Grid Filter Row Large Data Source

By default the grid filters (filter row and filter popup also) is designed to handle a large data source, the filter select editors (DropdownList, Multiselect) don't have any data loaded initially, they load data on demand, when the user starts typing to search for an item.
For each column a filter editor will be created automatically, based on the column's type, or if you specified a filter type like DropdownList, Multiselect, that will be used instead.
You can set a custom row filter that does something similar to the default select editors, you can see an example for that in the Dish column.
The Dish column uses remote search, initially only a few items are loaded, and additional items are loaded when we make a search.

GridFilterRowServerSideData/LargeDataSource.cshtml

@(Html.Awex().Grid<Lunch>("GridFrowLargeData")
    .Main()
    .Mod(o => o.FilterRow())
    .Url(Url.Action("LunchFilterGridLarge", "GridFilterRowServerSideData"))
    .Height(390)
    .Columns(b =>
    {
        b.Add(o => o.Id, new Column { Width = 100 }
        .FltFormat("Search:"));

        b.Add(o => o.Person);

        // example of custom remote search 
        b.Add(o => o.Dish.Name, new Column { ClientFormatFunc = "site.imgDish", MinWidth = 200 }
            .FltDropdownList(new DropdownListOpt
            {
                Name = b.PathNameOf(o => o.Dish.Id),// match selected value with Lunch.Dish.Id
                Url = Url.Action("GetDishsInit")
            }
            .RemoteSearch(Url.Action("SearchDish"))
            .AutoFilter()
            .DishImgItem()));

        b.Add(o => o.Country.Name, new Column { Header = "Country" })
            .Flt(type: FilterType.DropdownList);

        b.Add(o => o.Price, new Column { MinWidth = 170 });

        b.Add(o => o.Meals.Select(m => m.Name), new Column { MinWidth = 230, Grow = 1.7 })
            .Flt(type: FilterType.Multiselect);
        
        b.Add(o => o.Date, new Column { Width = 200 });

        b.Add(o => new { o.Chef.FirstName, o.Chef.LastName }, new Column { Header = "Chef" })
            .Flt(type: FilterType.DropdownList);

        b.Add(o => o.Organic, new Column { Width = 140 });
    }))

Demos/Grid/GridFilterRowServerSideDataController.cs

    public IActionResult LunchFilterGridLarge(GridParams g)
    {
        var query = Db.Lunches.AsQueryable();

        var gmb = new GridModelBuilder<Lunch>(query, g)
        {
            KeyProp = o => o.Id
        };

        gmb.Prop(o => o.Organic, render: o => o ? "Yes" : "No");

        // props used in site.imgDish
        gmb.Prop(o => o.Dish.Pic, "DishPic");
        gmb.Prop(o => o.Dish.Name, "DishName");

        return this.AweJson(gmb.Build());
    }

    // 2 actions below used for the custom filter editor in Dish column
    public IActionResult SearchDish(string term)
    {
        var items = Db.Dishes
            .AsQueryable()
            .StrContains(term, o => o.Name)                
            .Take(10)
            .ToArray()
            .Select(o => new MealDisplay(o.Id, o.Name, o.Pic));

        return Json(items);
    }

    public IActionResult GetDishsInit(int? v)
    {
        var query = Db.Dishes.OrderBy(o => o.Id);
        var items = query.Take(3).ToList();
        var selected = query.FirstOrDefault(o => o.Id == v);

        if (selected != null && !items.Contains(selected))
        {
            items.Add(selected);
        }

        var lst = new List<MealDisplay> { new MealDisplay("", "any", "pasta.png") };
        lst.AddRange(items.Select(o => new MealDisplay(o.Id, o.Name, o.Pic)));

        return Json(lst);
    }
    #endregion
}

Comments