Ajax Binding Telerik MVC Grid with DetailView in one call

Question

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?

Answer 1

Just used telerik support example to fix this, and it worked very well.Telerik Post