Grid Infinite scrolling

Loading data when the content is scrolled

Grid with infinite/endless scroll. Scrolling down or up from a certain page will automatically load the next/previous page. If you scroll faster you can skip several pages.
For group aggregates GridModelBuilder.MakeHeader needs to ignore the group items (GroupInfo.Items) and call the data source directly to calculate aggregate values, otherwise the values will be calculated only on the items present in the current page.

GridInfiniteScrollingDemo/Index.cshtml

@(Html.Awex().Grid<Lunch>("InfiniteScrollingGrid")
    .Main()
    .Persistence(Persistence.Session)
    .Mod(o => o.InfiniteScroll())
    .Url(Url.Action("GetItems"))
    .Height(400)
    .Columns(b =>{
        b.Add(new Column {ClientFormat = ".(Nr)", Header = "Nr", Width = 75});
        b.Add(o => o.Id, new Column{Width = 75, Groupable = false, Resizable = false});
        b.Add(o => o.Person);
        b.Add(o => o.Dish.Name, new Column{Header = "Dish", ClientFormatFunc = "site.imgDish"});
        b.Add(o => o.Location);
        b.Add(o => o.Date, new Column{Width = 120});
        b.Add(o => o.Country.Name);
        b.Add(o => new { o.Chef.FirstName, o.Chef.LastName }, new Column{ Header = "Chef"});
    }))

Demos/Grid/GridInfiniteScrollingDemoController.cs

public class GridInfiniteScrollingDemoController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

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

        var nr = 1;

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

        gmb.Prop(o => o.Dish.Name, "DishName");
        gmb.Prop(o => o.Dish.Pic, "DishPic");
        gmb.ComputeProp(o => nr++ + (g.Spage - 1) * g.PageSize, "Nr");

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

Grid with load more button

Instead of loading the next page on scroll a Load more data button is provided.

Defined height:

GridInfiniteScrollingDemo/Index.cshtml

@(Html.Awex().Grid<Lunch>("GridLoadMore")
    .Main()
    .Mod(o => o.InfiniteScroll(true))
    .Columns(b =>{
        b.Add(new Column {Prop = "Nr", Header = "Nr", Width = 75});
        b.Add(o => o.Id, new Column{Width = 75, Groupable = false, Resizable = false});
        b.Add(o => o.Person);
        b.Add(o => o.Dish.Name, new Column{Header = "Dish", ClientFormatFunc = "site.imgDish"});
        b.Add(o => o.Location);
        b.Add(o => o.Date).Width(120);
        b.Add(o => o.Country.Name);
        b.Add(o => new { o.Chef.FirstName, o.Chef.LastName }).Header("Chef");
    })        
    .Url(Url.Action("GetItems"))
    .Resizable()
    .Reorderable()
    .Height(400)
    .PageSize(10))

Comments