not able to expand/collapse row in telerik's mvc webgrid

I am trying to collapse and expand the telerik's mvc webgrid. However only the first row comes expanded, i cannot colla开发者_运维问答pse it. And i cannot expand the successive rows. The code is: @{

 Html.Telerik().Grid(this.Model)
               .Name("grdPersonView")
               .Columns(columns =>
                   {
                       columns.Bound(p => p.id);
                       columns.Bound(p => p.age);
                       columns.Bound(p => p.name);
                   })
               .DetailView(detailview => detailview.Template(e =>
                   {

                       Html.Telerik().Grid(e.GetPersons())
                           .Name("Subgrid")
                           .Columns(column =>
                               {
                                   column.Bound(p => p.name);
                                   column.Bound(p => p.age);
                               })
                               .Pageable(pager => pager.PageSize(2))
                               .Render();
                   }))
               .RowAction(row =>
                   {
                       if (row.Index == 0)
                       {
                           row.DetailRow.Expanded = true;
                       }                         
                   })
               .Pageable(pager => pager.PageSize(20))
               .Sortable(sorting =>
                   {
                       sorting.SortMode(GridSortMode.MultipleColumn);
                       sorting.OrderBy(sortOrder => sortOrder.Add(p => p.id));
                   }
                       )
                       .Render();

}

Razor templates are defined in a different way. Check the razor version of the grid hierarchy example:

@{ Html.Telerik().Grid(Model)
    .Name("Employees")
    .DetailView(detailView => detailView.Template(
        @<text>
            @(Html.Telerik().Grid(item.Orders)
                    .Name("Orders_" + item.EmployeeID)