Expand/Collapse not working in Telerik RadGrid - asp.net-mvc

Question

I am using Telerik RadGrid with NestedViewTemplate to display data in my MVC applicaiton.
Following is my code
<telerik:RadGrid ID="rgNutritionLog" runat="server" OnInit="rgNutritionLog_Init"
OnNeedDataSource="rgNutritionLog_NeedDataSource" OnPreRender="rgNutritionLog_PreRender" OnItemCommand="rgNutritionLog_ItemCommand" OnItemDataBound="rgNutritionLog_ItemDataBound"OnItemCreated="rgNutritionLog_ItemCreated">
<GroupingSettings CaseSensitive="false" />
<HeaderStyle Width="120px" CssClass="tableHeader" />
<ClientSettings AllowColumnsReorder="true" AllowExpandCollapse="true">
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="1" />
<ClientEvents OnGridCreated="GridCreated" OnHeaderMenuShowing="HeaderMenuShowing" />
</ClientSettings>
<HeaderContextMenu OnClientItemClosed="OnClientItemClosed" OnItemCreated="HeaderContextMenu_ItemCreated"
OnClientItemOpening="OnClientItemOpening" BackColor="AliceBlue" BorderColor="Black">
</HeaderContextMenu>
<MasterTableView AllowFilteringByColumn="true" ShowFooter="false" ClientDataKeyNames="ID"
DataKeyNames="ID" TableLayout="Fixed">
<Columns>
<telerik:GridBoundColumn DataField="ID" HeaderText="ID"
ShowFilterIcon="false" UniqueName="intFunctionalTestId" SortExpression="ID"
FilterControlWidth="100px" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
Visible="false">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn DataField="AthleteName" HeaderText="Athlete Name"
ShowFilterIcon="false" UniqueName="AthleteName" SortExpression="AthleteName"
FilterControlWidth="100px" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
Visible="true">
<ItemTemplate>
<%#Eval("AthleteName") %>
</ItemTemplate>
<HeaderStyle Width="120px" />
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="EnergyIncludingDietaryKjProposed" HeaderText="Proposed Energy Including Dietary Fibre (Kj)" ShowFilterIcon="true"
UniqueName="EnergyIncludingDietaryKjProposed" SortExpression="EnergyIncludingDietaryKjProposed" FilterControlWidth="80px"
AutoPostBackOnFilter="false" CurrentFilterFunction="NoFilter">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EnergyIncludingDietaryKjActual" HeaderText="Actual Energy Including Dietary Fibre (Kj)" ShowFilterIcon="true"
UniqueName="EnergyIncludingDietaryKjActual" SortExpression="EnergyIncludingDietaryKjActual" FilterControlWidth="80px"
AutoPostBackOnFilter="false" CurrentFilterFunction="NoFilter">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CarbohydrtProposed" HeaderText="Proposed Carbohydrates (g)" ShowFilterIcon="true"
UniqueName="CarbohydrtProposed" SortExpression="CarbohydrtProposed" FilterControlWidth="80px"
AutoPostBackOnFilter="false" CurrentFilterFunction="NoFilter">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
</Columns>
<NestedViewSettings>
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="ID" MasterKeyField="ID" />
</ParentTableRelation>
</NestedViewSettings>
<NestedViewTemplate>
<div style="overflow-y: scroll;">
<fieldset style="padding: 2px;">
<telerik:RadGrid ID="rgAssignedDetails" AutoGenerateColumns="false" runat="server"
AllowSorting="true" OnNeedDataSource="rgAssignedDetails_NeedDataSource">
<ClientSettings AllowColumnsReorder="true">
</ClientSettings>
<MasterTableView>
<Columns>
<telerik:GridBoundColumn DataField="Meal" HeaderText="Meal" UniqueName="Meal">
<HeaderStyle Width="150px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EnergyIncludingDietaryKjProposed" HeaderText="Proposed Energy Including Dietary Fibre (Kj)"
UniqueName="EnergyIncludingDietaryKjProposedMeal">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EnergyIncludingDietaryKjActual" HeaderText="Actual Energy Including Dietary Fibre (Kj)"
UniqueName="EnergyIncludingDietaryKjActual">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CarbohydrtProposed" HeaderText="Proposed Carbohydrates (g)"
UniqueName="CarbohydrtProposed">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
Any suggestion?
How can I do Expand/Collapse? Also is there any way to make nested grid scroll able?

Answer 1

I could not perform expand/collapse from server side so I did it using javascript following is the solution
var imageButtonPath = null;
function RowClicked(sender, eventArgs) {
var grid = sender;
var rowIndex = eventArgs.get_itemIndexHierarchical();
if (rowIndex.indexOf(':') != -1) {
rowIndex = rowIndex.substr(rowIndex.lastIndexOf('_') + 1);
}
var tableView = eventArgs.get_tableView();
var row = tableView.get_dataItems()[rowIndex];
if (tableView.getCellByColumnUniqueName(row, "ExpandColumn")) {
if (row.get_expanded() == false) {
row.set_expanded(true);
imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];
imageButton.className = "rgCollapse";
}
else {
row.set_expanded(false);
imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];
imageButton.className = "rgExpand";
}
}
GridCreated(sender, eventArgs)
}
I called this javascript function on row click event.