Kitchen Sink

« Basic Usage Column Selection »
  Clear
Name Movie Director Genre Name not Encoded Released
2001: A Space Odyssey Stanley Kubrick SCI-FI 2001: A Space Odyssey 1968 Details
Airplane! David and Jerry Zucker and Jim Abrahams SLAPSTICK Airplane! 1980 Details
Brave Heart Mel Gibson ACTION Brave Heart Details
Casablanca Michael Curtiz DRAMA Casablanca 1942 Details
Citizen Kane Orson Welles DRAMA Citizen Kane 1941 Details
Close Encounters of the Third Kind Steven Spielberg SCI-FI Close Encounters of the Third Kind 1997 Details
Movie with <b>bold</b> This Guy TEST Movie with bold Details
Pulp Fiction Quentin Tarantino ACTION Pulp Fiction 1994 Details
Reservoir Dogs Quentin Tarantino THRILLER Reservoir Dogs 1992 Details
Rocky John G. Avildsen ACTION Rocky Details
Star Wars George Lucas SCI-FI Star Wars 1997 Details
Terminator James Cameron ACTION Terminator 1984 Details
Terminator 2: Judgement Day James Cameron ACTION Terminator 2: Judgement Day 1991 Details
The Godfather The Godfather MOB The Godfather 1972 Details
The Shawshank Redemption Frank Drabont DRAMA The Shawshank Redemption 1994 Details
Wonder Woman 1984 ACTION Wonder Woman 1984 2020 Details
@(await Html
    .SimpleGrid(Model)

    .AddColumn(column => column
        .For(model => model.Name)
        .LinkTo(
            linkBuilder: model => $"https://www.google.com/search?q={System.Web.HttpUtility.UrlEncode(model.Name)}",
            target: "_blank")
        .Sortable()
        .Css(elements => elements.Header.AddStyle("width:21%")))

    .AddColumn(column => column
        .For(model => model.Director)
        .Css(elements => elements.Header.AddStyle("width:21%")))

    .AddColumn(column => column
        .Header("Genre")
        .DisplayAs(model => model.Genre.ToUpper())
        .SortableBy(model => model.Genre)
        .Css(elements =>
        {
            elements.Header.AddStyle("width:21%");
            elements.Item.AddStyle("font-weight:bold");
        }))

    .AddColumn(column => column
        .Header("Name not Encoded")
        .DisplayAs(model => model.Name)
        .Css(elements => elements.Header.AddStyle("width:21%"))
        .Encoded(false))

    .AddColumnFor(model => model.Released)

    .AddColumn(column => column
        .DisplayAs(model => "Details")
        .LinkTo(model =>
            $"https://www.google.com/search?q={System.Web.HttpUtility.UrlEncode(model.Name)}",
            target: "_blank",
            css: css => css.AddClass("btn btn-sm btn-primary")))

    .Css(elements => elements.Table
        .AddClass("table-striped")
        .AddClass("table-sm"))

    .Sortable()
    .DefaultSortBy(model => model.Name, SortOrder.Ascending)

    .AddSearch(
        name: "Name and Director",
        searchFilter: (source, query) =>
        {
            return source.Where(model =>
                model.Name.Contains(query, StringComparison.OrdinalIgnoreCase) ||
                (model.Director != null && model.Director.Contains(query, StringComparison.OrdinalIgnoreCase)));
        })

    .AddSearch(
        name: "Genre",
        searchFilter: (source, query) =>
        {
            query = query.Trim();
            return source.Where(model => model.Genre.Contains(query, StringComparison.OrdinalIgnoreCase));
        })

    .Options(options =>
    {
        options.MaxRows = 1000;
    })

    .AddPager(options =>
    {
        options.RowsPerPage = 5;
        options.DisplayPagerTop = true;
        options.DisplayPagerBottom = true;
        options.DisplayTotal = true;
        options.RowsPerPageOptions = new[] { 5, 10, 20, 50, 100, 1000 };
    })

    .RenderAsync()
)