This is a migrated thread and some comments may be shown as answers.
Ajax Binding Telerik MVC Grid with DetailView in one call
2 Answers 133 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Adel Khalil
Top achievements
Rank 1
Adel Khalil asked on 02 Nov 2011, 10:31 PM
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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 03 Nov 2011, 10:45 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Adel Khalil
Top achievements
Rank 1
answered on 07 Nov 2011, 06:03 PM
Thanks, that worked very well :)

Adel.
Tags
Grid
Asked by
Adel Khalil
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Adel Khalil
Top achievements
Rank 1
Share this question
or