[Solved] DetailView expansion not working (Ajax)

[Badi]

I have a client detail template with a grid within a grid. I'm using Ajax actions as detailed in this example:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-master---detail-client-detail-template-and-hierarchy.html#ClientDetails

When I press the + button, nothing happens and the underlying grid is not loaded ( the action never gets called ) although the + changes to -.

Code is attached.

I am missing something?

[Badi]

I thought I'd post the code for convenience:


Model:

public class RbcEntry

{

    public RegionalCouncilDTO RegionalCouncil { get; set; }

    public string Continent { get; set; }

    public string CountryResponsible { get; set; }

}
public class RegionalCouncilDTO
{
     public DateTime DateFrom{get; set;}
     /*And so on*/
}

Controller Actions:

public ActionResult Index()
{  return View(); }
public ActionResult _Index()
{  /*code ommitted for brevity - returns View(List<RbcEntry>)*/}
public ActionResult _History()
{  /* code ommitted for brevity - return View(List<RbcEntry>)*/}

Index View:

<%=
    Html.Telerik().Grid<RbcEntry>()
    .Name("Grid")
    .DataBinding(dataBinding =>
        dataBinding.Ajax()
            .Select("_Index", "Home")
            .Update("Update", "Home")
    )
    .DataKeys(dataKeys => dataKeys.Add(r => r.RegionalCouncil.SerialNumber))
    .Columns(columns =>
         {
             columns.Bound(r => r.RegionalCouncil.DateFrom).Format("{0:MM/dd/yyyy}").Width(120);
             columns.Bound(r => r.RegionalCouncil.NumberOfMembers).Width(100);
             columns.Command(commands => commands.Edit());
         })
    .DetailView(detailView => detailView.ClientTemplate(
        Html.Telerik().TabStrip()
        .Name("TabStrip_<#= SerialNumber #>")
        .SelectedIndex(0)
        .Items(items =>
              items.Add().Text("History").Content(
                  Html.Telerik().Grid<RegionalCouncilDTO>()
                  .Name("History_<#= SerialNumber #>")
                  .DataBinding(hdataBinding => hdataBinding.Ajax()
                        .Select("_History", "Home", new { id = "<#= SerialNumber #>" }))
                  .Columns(
                            columns =>
                            {
                                columns.Bound(h => h.RegionalCouncilFullName);
                                columns.Bound(h => h.NumberOfMembers).Width(100);
                                columns.Bound(h => h.ApprovalDate);
                            })
                        .Footer(false)
                        .ToHtmlString()
                    )
                ).ToHtmlString()
    ))

%>

I am missing something?

[Glenn Henriksen]

I'm having the same problem

@(Html.Telerik().Grid<PlantDto>(Model.Plants)
    .Name("Plants")
    .Columns(columns =>
        {
            columns.Bound(plant => plant.Title);
        })
    .DetailView(details => details.ClientTemplate(
        Html.Telerik().Grid<ProjectDto>().Name("Plant_<#= Id #>")
        .Columns(columns =>
        {
            columns.Bound(p => p.Name).Width(101);
            columns.Bound(p => p.Description).Width(140);
        })
        .DataBinding(dataBinding => dataBinding.Ajax()
                .Select("ProjectsForPlant", "User", new { plantId = "<#= Id #>" }))
            .ToHtmlString()))
)

In FireBug, not a single HTTP call i made. When I click the "plus"-icon, some white space appears below the line but no data is sent and no request is made. Like it's not firing at all.

[Tako]

Just encountered the same problem myself. Clicking on the expand button and the sub-grid is not being displayed at all.

At first I thought data was not being collected, but when I add .Render() to the DetailView section it displays the actual sub grid on top of the main grid with the values I need to display... so the sub-grid seems to be fine, and this is just a case of the sub-grid not being displayed correctly in the right place.

I am trying with the Q1, so even in the latest version of Telerik MVC, the problem persists.

Any assistance with this matter would be highly appreciated.

[Ajden Towfeek]

Is there any solution? I mean it is obviously working in the sample from telerik, when I change to server side binding it works like a charm.

Edit:

Ok so after a couple of hours of hair pulling and debugging I figured it out.

When It didn't work, I fed the view a typed model, using: Inherits="System.Web.Mvc.ViewPage<IEnumerable<TModel>>", actually it was a ViewModel but it doesn't matter. Then when rendering the grid I of course did it this way Html.Telerik().Grid(Model), and this didn't work!!

Changing the view to not be typed:  Inherits="System.Web.Mvc.ViewPage", and rendering the Grid by calling Html.Telerik().Grid<TModel>() and then ONLY feeding the grid the typed model on the databinding made it work.

Hope this saves somebody the time I just wasted.

Peace!

/A

[Jake]

Just a follow up since I ran into the same problem today...

Make sure the name of your detailview grid does not contain any special characters or spaces.  I was dynamically naming my grid in the detail view and noted that it had both forward slashes and spaces in the name.  My guess is one or both of these cause problems with jQuery selectors which prevents the grid functionality from working.

[Andreas]

Make sure that your details grid has a unique name.  I missed it the first time and the docs are not clear on that point.  The grid sample silently shows the solution:

...
.DetailView(details => details.ClientTemplate(
    Html.Telerik().Grid<FooViewModel>()
              .Name("detail_grid_<#= FooID #>")
...

Where "FooID" is the primary key of the selected record in the master grid.  Make sure that the model you use for the master table contains that primary key.  This primary key column does not need to be displayed in the master grid.

Hope this helps.