Refreshing grid after adding elements

Sep 26, 2013 at 11:03 AM
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.
Coordinator
Sep 27, 2013 at 5: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 - http://gridmvc.azurewebsites.net/Home/AjaxPaging - 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 6: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
Coordinator
Oct 7, 2013 at 5:15 PM
Hi,

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
    {
        get
        {
            //Custom view name to render this pager
            return "_AjaxGridPager";
        }
    }

    /// <summary>
    ///     Returns true if the pager has pages
    /// </summary>
    public bool HasPages
    {
        get
        {
            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 () {
            self.loadNextPage();
        });

        this.loadNextPage = function () {
            self.currentPage++;

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

                    gridTableBody.append(response.Html);
                    if (!response.HasItems)
                        pageLink.hide();
                })
                .fail(function () {
                    alert("cannot load items");
                });
        };

        this.pad = function (query) {
            if (query.length == 0) return "?page=";
            return query + "&page=";
        };
    })(jQuery);
This view was created in demo purposes. In real project you can created custom pagers as you want.
Apr 16, 2014 at 5: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 ..

Thanks..
Saurabh Shekhar