This project is read-only.

Refreshing grid after adding elements

Sep 26, 2013 at 12:03 PM
i am binding a list(Users List) of items to grid in a view.In same view, i have a form.i add new user info to that form and want show Grid with updated list i.e when i click on submit button,i want to refresh the grid so that i can show new user info in grid without refreshing the page.
Sep 27, 2013 at 6:02 AM
There is no built-in mechanism to do this. You need to render grid body content on the server and replace the content of the table.

You can see how it works with ajax paging - - next grid page layout queries from the server and adds to the table. You need to do something like that, but replace the content.

I'll think about built-in mechanism of ajax refreshing in the grid in next versions
Oct 3, 2013 at 7:30 AM
Hi Bukharin

I was actually just searching for this myself, and i looked at that url as well, but I cannot seem to find the code that does the ajax paging, i only see code for the grid itself, I am very new to using this grid and would love some help.

Kind Regards
Oct 7, 2013 at 6:15 PM

The sample override default grid pager with custom implementation AjaxGridPager, that tells to grid, that is uses _AjaxGridPager partial view to render the grid
public class AjaxGridPager : IGridPager
    private readonly IGrid _grid;

    public AjaxGridPager(IGrid grid)
        _grid = grid;

    public int PageSize { get; set; }

    public int CurrentPage { get; set; }

    public string TemplateName
            //Custom view name to render this pager
            return "_AjaxGridPager";

    /// <summary>
    ///     Returns true if the pager has pages
    /// </summary>
    public bool HasPages
            return _grid.ItemsToDisplay.Count() >= PageSize;

    public void Initialize<T>(IQueryable<T> items)
        //do nothing
AjaxGridPager view contains the javascript code, which makes ajax call.
    (function ($) {
        var self = this;
        this.currentPage = 1;

        var pageLink = $(".grid-ajax-pager a");
        var gridTableBody = pageLink.closest(".grid-wrap").find("tbody");

        pageLink.on("click", function () {

        this.loadNextPage = function () {

            $.get("/Home/GetOrdersGridRows" + self.pad( + self.currentPage)
                .done(function (response) {

                    if (!response.HasItems)
                .fail(function () {
                    alert("cannot load items");

        this.pad = function (query) {
            if (query.length == 0) return "?page=";
            return query + "&page=";
This view was created in demo purposes. In real project you can created custom pagers as you want.
Apr 16, 2014 at 6:07 PM
Hello Sir.

I am new to Grid.MVC.. Will you provide me code for loading grid with a newly added record.. How can i do this ,please provide me code by today as it was very urgent.

PLease send me the code by today ..

Saurabh Shekhar