Ajax Binding Telerik MVC Grid with DetailView in one call

[Adel Khalil]

Hi,

    I have the following markup.

@(Html.Telerik().Grid(Model)
             .Name("Grid")
             .DataKeys(keys => keys.Add(key => key.Id))
             .Columns(columns =>
                          {
                              columns.Bound(c => c.FullNameWithEmail).ClientTemplate("<#= FullNameWithEmail #>").Title("Name and Email").Width(230);
                              columns.Bound(c => c.Notes);
                          })
             .ClientEvents(events => events.OnRowDataBound("grid_onRowDataBound"))
             .DetailView(checkInAppGridDetails => checkInAppGridDetails.ClientTemplate("<# if (RelatedCount > 0) { #>" +

                  Html.Telerik().Grid<ViewModel>()
                                          .Name("GridDetails_<#= Id #>")
                                          .Footer(false)
                                          .Columns(columns =>
                                          {
                                              columns.Bound(c => c.FullNameWithEmail).ClientTemplate("<#= FullNameWithEmail #>").Title("Name and Email").Width(225);
                                              columns.Bound(c => c.Notes);
                                              columns.Bound(c => c.Actions).ClientTemplate("<#= Actions #>").Width(150);
                                          })
                                          .ClientEvents(events => events.OnRowDataBound("GridDetails_onRowDataBound"))
                                          .DataBinding(dataBinding => dataBinding.Ajax()
                                              .Select("GetRelated", "Controller", new
                                              {
                                                  id = @ViewBag.EventKey,
                                                  ticketId = "<#= Id #>"
                                              }))
                                          .ToHtmlString() +
                  "<# } #>"
              ))
      )

What i have here is that i am binding the main grid with Ajax call, and once rows got bound the details view gets bound with the DataBinding ajax call.


I already have in the Model a collection for the related records i wanted to show in the DetailView, i don't want the extra call to the server.

here is an example of the ViewModel

public class ViewModel
{
    public string FirstProperty {get; set;}
    .
    .
    .
    public IEnumurable<ViewModel> RelatedRecords { get; set; }
}

Any idea how to bind the whole Grid with the DetailView with only single Ajax request?

[Rosen]

Hi Adel Khalil,

I'm afraid that this is not supported out-of-the box. However, you may achieve similar behavior by manually populating the inner grid through dataBind method. I have attached a sample which demonstrates a basic implementation.

All the best,
Rosen
the Telerik team

[Adel Khalil]

Thanks, that worked very well :)

Adel.