Ajax Expand/Collapse details

[Jana]

What is the best approach for using a telerik grid control and ajax binding to expand/contract additional columns - showing one or two columns in the grid view and displaying the rest of the columns when the row is selected? The Master-Detail example shows how to display child-related tables, but I just need the remaining columns of the main table displayed in a list view rather than grid view.

[Iana Tsolova]

Hello Jana,

In order to achieve your goal, you can add an ajax setting where the RadGrid updates the RadListView. Then set the EnablePostBackOnRowClick property in the grid ClientSettings to true. Handle the postback in the ItemCommand event of the grid as below:

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if(e.CommandName == "RowClick")
    {
        //code for updating the RadListView here
    }
}

Check it out and let me know if further questions arise.

Sincerely yours,
Iana
the Telerik team

[Jana]

Before I saw this answer, I discovered a way to use grouping combined with a template, which comes close to accomplishing what I need, if I could find a way to default all the groups to being collapsed initially. Is there a way to do that with the MVC grid? I just have a group for each record which expands and collapses.
 

<%= Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>{columns.Bound(i => i.Title)
.ClientTemplate("<#= Acronym #>"
+ "</br>"
+ "<#= Title #>"
+ "</br>"
+ "<#= Description #>"
+ "</br>"
+ "<#= Keywords #>"
+ "</br>"  ;
})
.Groupable(grouping => grouping.Groups(groups =>
{groups.Add(i => i.Title);}) )
.DataBinding(d => d.Ajax().Select("_AjaxBinding", "Home"))
.Pageable(paging => paging.PageSize(20)
.Sortable(sorting => sorting
.OrderBy(sortOrder => sortOrder.Add(i => i.Title).Ascending() ) )
.Scrollable(scrolling => scrolling.Height(550) )
.Filterable()
%>

[Iana Tsolova]

Hi Jana,

For the groups to be collapsed in initial load, you can set the GroupsDefaultExpanded property of the grid MasterTableView to false.
Try it out and see if it works for you.

Kind regards,
Iana
the Telerik team