Extend the HTML Grid for adding div at the end of Html Grid (MVC Contrib)

Question

I have search the web to find a syntax or a guide to this but with no success.

I will appreciate any help.

I have implemented a Grid in a view, and instead of using the paging of the grid view i am trying to implement a button "View More" at the end of the grid that load more data to the grid view.

See the code

@Html.Grid(Model.Orders).Columns(columns =>
        {
            columns.For(c => @Html.AddInstitudeRetangle(c.User.Institute.InstitudeColor, c.User.Institute.InstituteName)).Named("");
            columns.For(c => @Html.CheckBox(c.OrderID.ToString(), false, new { @ID = "cb-" + c.OrderID.ToString(), @Name = "cb-" + c.OrderID.ToString() })).Header("<th><input type=\"checkbox\" id=\"chkHeader\" /></th>");
            columns.For(c => @Ajax.LinkForBootstrapModalNo("OrderDetails", "OrdersManagement", c.OrderID.ToString(), new { OrderID = c.OrderID }, new { id = "OrderID" }).LoadingPanel("Please Wait Loading...").ToMVCHtmlString()).Named(OrdersManagementStrings.OrderID);
            columns.For(c => @Html.GetOrderTypeIcon(c.OrderTypeStatus, c.OrderTypeStatus.GetDescription())).Named(OrdersManagementStrings.OrderType);
            columns.For(c => String.Format("{0:dd/MM/yyyy hh:mm}", c.CreationDate)).Named(OrdersManagementStrings.OrderDate);
            columns.For(c => String.Format("{0} {1}", c.User.FirstName, c.User.LastName)).Named(OrdersManagementStrings.CustomerName);
            columns.For(c => c.User.Institute.InstituteName).Named(OrdersManagementStrings.AffiliateName);
            columns.For(c => c.TotalCost).Named(OrdersManagementStrings.TotalCost);
            columns.For(c => c.ShippingTypeEnum.GetDescription()).Named(OrdersManagementStrings.ShippingType);
            columns.For(c => c.Address.FullAddress).Named(OrdersManagementStrings.Address);
            columns.For(c => c.OrderStatusEnum.GetDescription()).Named(OrdersManagementStrings.OrderStatus);
        }).Attributes(@class => "table table-hover table-responsive table-condensed", @id => "ordersTable")

        <div id="scroll" data-itemsperpage="50" data-spy="scroll">Load More</div

Now when a user clicks on the div at the end i am using ajax request to load more data.

Now, i want to create an extension the will add this div to the end of the Grid.

So at the end the syntax will be something as

columns.For(c => c.OrderStatusEnum.GetDescription())
.Named(OrdersManagementStrings.OrderStatus);
            })
.Attributes(@class => "table table-hover table-responsive table-condensed", @id => "ordersTable")
.LoadMoreButton(50);

The number 50 represent the number of rows per page

Answer 1

After looking through the source, I think it might be easier to extend HtmlTableGridRenderer as a ScrollingHtmlTableGridRenderer and use

@Html.Grid(Model.Orders)
     .RenderUsing(new ScrollingHtmlTableGridRenderer(50))
     ...

then in ScrollingHtmlTableGridRenderer override RenderGridEnd to add the extra DIV

public class ScrollingHtmlTableGridRenderer<T> : HtmlTableGridRenderer<T>
    where T : class
{
     private readonly int _itemsPerPage;

     public ScrollingHtmlTableGridRenderer(int itemsPerPage)
     {
          _itemsPerPage = itemsPerPage;
     }

     protected override void RenderGridEnd()
     {
          base.RenderGridEnd();
          RenderText("<div id=\"scroll\" data-itemsperpage=\"" + _itemsPerPage + \"" data-spy=\"scroll\">Load More</div>");
     }
}

You might be able to do this as an extension that basically creates a new renderer and propagates all the data from the underlying grid model to it, but the Grid class seems to be built to be extended by replacing the renderer with one that handles your custom needs rather than by extensions on IGridOptionsModel.