[Solved] How to create Ajax-support Paging Nested Grid in Telerik MVC?

[Vinh]

Hello there.

I try to create a Ajax-support Paging Nested Grid in Telerik MVC Extension. I have rendered the Nested Grid in browse, can expand row Genre to show the related Albums filtered by GenreId, but when i use Ajax for this nested Grid, it don't work in grid paging. I have upload my project and post some code about my View and Controller.

When i don't use ajax, the gird can work properly but it cannot expand correctly when browse is reloaded, how can i maintain the state of row which had expanded?

I'm gratiful for any help.

My Project: http://share.vnn.vn/dl.php/11718146

My View:

@model IEnumerable<MvcMusicCodeFirsr.Models.Genre>

@{
    ViewBag.Title = "Home Page";
    Layout = @"~\Views\Shared\_Layout.cshtml";
}

<h1>@ViewBag.Test</h1>

@( Html.Telerik().Grid<MvcMusicCodeFirsr.Models.Genre>(@Model)
    .Name("personGrid")
    .DataKeys(keys => keys.Add(k => k.GenreId))
    .DataBinding(d => d.Ajax().Update( "_Update", "Home" )
    )
    .Columns(c =>
    {
        c.Bound(m => m.Name).Width(150);
        c.Bound(m => m.Description).Width(150);
        c.Command(commands =>
        {
            commands.Edit();
        }).Width(80);
    })
    .DetailView(detailView => 
        detailView.Template(
        @<text>
            @(Html.Telerik().Grid<MvcMusicCodeFirsr.Models.Album>(item.Albums)
                    .Name("Albums_" + item.GenreId)
                    .DataBinding(d => d.Ajax())
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.Title).Width(101);
                        columns.Bound(o => o.Price).Width(140);
                    })
                    .Pageable()
                    .Filterable()
            )

        </text>
        )
        .ClientTemplate(
                    Html.Telerik().Grid<MvcMusicCodeFirsr.Models.Album>()
                    
                                  .Name("Albums_<#=GenreId#>")
                                  .Footer(false)
                                  .ClientEvents(events => events.OnDataBinding("detailGrid_dataBinding"))
                                    .Pageable()
                                    .Sortable()
                                  .ToHtmlString()
        ))
                               
                    .Sortable()
                    .Pageable()
                
                
    )
    
    
)

<script type="text/javascript">
    function detailGrid_dataBinding(e) {
        var grid = $(this).data("tGrid"),
            masterRow = $(this).closest("tr.t-detail-row").prev(),
            dataItem = $("#Grid").data("tGrid").dataItem(masterRow);

        grid.dataBind(dataItem.Albums);

        e.preventDefault();

    }
</script>

My Controller:

    MusicStoreEntities db = new MusicStoreEntities();
    public ActionResult Index()
    {
        return View(db.Genres.ToList());
    }

    [GridAction]
    public ActionResult _Select()
    {
        return View(new GridModel ( db.Genres.ToList()));
    }

    [GridAction]
    public ActionResult _Update()
    {
        return View(new GridModel { Data = db.Genres.ToList() });
    }