This project is read-only.

Grid reloads on pager click

Jun 16, 2015 at 11:43 PM
I have seen this hinted at a few times but haven't seen a solution. I have a grid in a partial view and I render it using an ajax call, after a value is selected from a select list. The grid populates just fine, but if I use the pager or sort, the view reloads and the grid disappears. I assume the partial view grid just needs to be reloaded, but I'm can't figure out how to do it. Here is my code:
Get the select list value and call the grid:

        $(document).ready(function () {

        $("select").on("change", function () {
            var personId = $("select option:selected").val();
            $("#person").val(personId);
            $.ajax({
                url: '@Url.Action("LandOwnerList", "Home")',
                type: 'GET',
                data: { id: personId },
                success: function (data) {
                    $('#land-owner-grid').html(data);
                    $('#land-owner-grid').gridmvc();
                }
            })
        })
    });
In the controller:
In the controller:

    [HttpGet]
    public PartialViewResult LandOwnerList(int id)
    {
        RecipBypersonViewModel vm = new RecipBypersonViewModel();
        vm.personRecipList = repo.GetRecipientsByperson(id);

        return PartialView("_landOwnerGrid", vm);
    }
On the index page I am not using the typical Html.Partial, because this returns an empty grid which returns a null exception.
<div class="row" id="land-owner-grid"></div>

and the actual grid code in the partial view:
@using GridMvc.Html
@model TreeApp.Models.ViewModels.RecipBypersonViewModel

<div class="table-responsive">
@Html.Grid(Model.personRecipList).Named("RecipientGrid").Columns(columns =>
                  {
                      columns.Add(c => c.RecipKey, true);
                      columns.Add(c => c.ActivityDate).Titled("Activity Date").Format("{0:MM/dd/yyyy}").Filterable(true);
                      columns.Add(c => c.RecipientName).Titled("Land Owner").Sortable(true);
                      columns.Add(c => c.StreetAddress).Titled("Address");
                      columns.Add(c => c.City).Titled("City");
                      columns.Add(c => c.CountyCode).Titled("County");
                      columns.Add(c => c.DistrictCode).Titled("District");
                  }).WithPaging(15)
</div>

Please let me know how I can make the paging, sorting, filtering work when rendering the grid with ajax. Thanks.