This is a migrated thread and some comments may be shown as answers.

RadGrid expand/collapse nestedview

2 Answers 501 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mattia asked on 12 Dec 2013, 09:44 AM

Hi,
I have the following grid and I'm trying to expand/collapse nested view on double click

<telerik:RadGrid ID="HomeRadGrid" runat="server" OnNeedDataSource="HomeRadGrid_NeedDataSource"

EnableEmbeddedSkins="False" AllowPaging="True" AllowAutomaticUpdates="false"

AllowAutomaticInserts="false" AllowAutomaticDeletes="false" AllowSorting="True"

AllowFilteringByColumn="True" CellSpacing="0" Culture="it-IT" GridLines="None"

OnItemCommand = "HomeRadGrid_ItemCommand" OnGroupsChanging="HomeRadGrid_GroupsChanging"

OnItemDataBound = "HomeRadGrid_ItemDataBound"

Skin="MySkin" ShowGroupPanel="True">

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" DataKeyNames="Id">

<ColumnGroups>

<telerik:GridColumnGroup Name="GeneralInformation" HeaderText="General Information"

HeaderStyle-HorizontalAlign="Center" />

<telerik:GridColumnGroup Name="WarningsIcon" HeaderText="Warnings"

HeaderStyle-HorizontalAlign="Center" />

</ColumnGroups>

<CommandItemSettings RefreshText="" ShowAddNewRecordButton="false" />

<GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldAlias="Company" FieldName="Cdc.CompanyCode"></telerik:GridGroupByField>

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="Cdc.CompanyCode" SortOrder="Descending"></telerik:GridGroupByField>

</GroupByFields>

</telerik:GridGroupByExpression>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldAlias="Project" FieldName="Cdc.Code" ></telerik:GridGroupByField>

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="Cdc.Code"></telerik:GridGroupByField>

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<Columns>

<telerik:GridBoundColumn DataField="Cdc.CompanyCode" HeaderText="Company Code" SortExpression="Cdc.CompanyCode"

UniqueName="Cdc.CompanyCode" Visible="false" ColumnGroupName="GeneralInformation" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Cdc.Code" HeaderText="Project" SortExpression="Cdc.Code"

UniqueName="Cdc.Code" Visible="false" ColumnGroupName="GeneralInformation" >

</telerik:GridBoundColumn>

<telerik:GridHyperLinkColumn

DataNavigateUrlFields="Bt1Asset.Asset.Code,Cdc.CompanyCode, Bt1Asset.Code, Ambiente"

DataNavigateUrlFormatString="Default.aspx?id={0}&filtro_soc2={1}&cgrcod={2}&amb_anag={3}&site=*&commessa=*&codicemezzo=*"

DataTextField="Bt1Asset.Asset.Code"

UniqueName="Bt1Asset.Asset.Code" HeaderText="Asset Code" HeaderStyle-Width="150px"

ColumnGroupName="GeneralInformation" ></telerik:GridHyperLinkColumn>

<telerik:GridBoundColumn DataField="Bt1Asset.Asset.Description" HeaderText="Asset Description"

SortExpression="Bt1Asset.Asset.Description" UniqueName="Bt1Asset.Asset.Description" Visible="true" ColumnGroupName="GeneralInformation" >

</telerik:GridBoundColumn>

<telerik:GridImageColumn HeaderText="BT1" AllowFiltering="false" HeaderStyle-Width="50px" ItemStyle-Width="50px" ColumnGroupName="WarningsIcon"

UniqueName="Bt1Asset.Bt1">

</telerik:GridImageColumn>

<telerik:GridImageColumn HeaderText="BT2" AllowFiltering="false" UniqueName="Bt1Asset.Bt2"

HeaderStyle-Width="50px" ItemStyle-Width="50px" ColumnGroupName="WarningsIcon">

</telerik:GridImageColumn>

<telerik:GridImageColumn HeaderText="Tx/Rx" AllowFiltering="false" HeaderStyle-Width="50px" ItemStyle-Width="50px" ColumnGroupName="WarningsIcon">

</telerik:GridImageColumn>

<telerik:GridImageColumn HeaderText="Alerts" AllowFiltering="false" HeaderStyle-Width="50px" ItemStyle-Width="50px" ColumnGroupName="WarningsIcon">

</telerik:GridImageColumn>

</Columns>

<NestedViewTemplate>

<div class="carBackground">

<div style="float: left; padding-left: 40px; padding-right:20px; padding-top:10px">

<asp:Image ID="ItemImage" runat="server" AlternateText="" ImageUrl='<%# GetItemImageUrl(Container)%>' Width="200px" />

</div>

<div style="float: left; width: 50%">

<div class="carTitle">

<%# Eval("Bt1Asset.Asset.Code")%>

</div>

<span style="color: #555555">

<%# Eval("Bt1Asset.Asset.Description")%>

times</span>

<hr class="lineSeparator" />

<table width="100%" class="carInfo">

<tr>

<td>

<strong>Site:</strong>

<%# Eval("Cdc.Site")%>

</td>

</tr>

<tr>

<td>

<strong>Plate:</strong>

<%# Eval("Bt1Asset.Asset.Targa")%>

</td>

</tr>

</table>

</div>

<div style="float: right; padding-right: 40px; padding-left:20px;padding-top:10px">

<div style="width:200px; border:solid 1px black" id="small_map_div"></div>

</div>

<div style="clear: both">

</div>

</NestedViewTemplate>

</MasterTableView>

<ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True">

<ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>

<Selecting AllowRowSelect="False"></Selecting>

<Resizing AllowRowResize="True" AllowColumnResize="True" EnableRealTimeResize="True"

ResizeGridOnColumnResize="False"></Resizing>

</ClientSettings>

<GroupingSettings ShowUnGroupButton="true"></GroupingSettings>

</telerik:RadGrid>

And that's my missing script

function RowDblClick(sender, args) {

//expand/collapse nested row

}

2 Answers, 1 is accepted

Accepted

answered on 16 Dec 2013, 09:12 AM

Hi Stefania,

Using HierarchyLoadMoad set to Client, you could expand your row directly on the client as follows:

ASPX:

<ClientEvents OnRowDblClick="RowDblClicked" />

<MasterTableView HierarchyLoadMode="Client" Name="Master">

JS:

<script type="text/javascript">

function RowDblClicked(sender, args) {

var tableView = args.get_tableView();

if (tableView.get_name() == "Master") {

var index = args.get_itemIndexHierarchical();

args.get_item().set_expanded(!args.get_item().get_expanded());

}

</script>

Thanks,
Princy

answered on 08 Jan 2014, 08:37 AM

Thanks this helped me to understand..
so this is my final code

function RowDblClick(sender, args) {

var item = sender.get_masterTableView().get_dataItems()[args.get_itemIndexHierarchical()];

if (item.get_expanded())

item.set_expanded(false);

else

item.set_expanded(true);

}

function CollapseOtherRows(sender, args) {

var countrow = sender.get_masterTableView().get_dataItems().length;

for (var i = 0; i < countrow; i++) {

var item = sender.get_masterTableView().get_dataItems()[i];

item.set_expanded(false);

}

<MasterTableView AutoGenerateColumns="False" DataKeyNames="Id" ClientDataKeyNames="Id"

HierarchyLoadMode="Client" >...

<ClientEvents OnRowDblClick="RowDblClick" OnHierarchyExpanded="LoadSmallMap" OnHierarchyExpanding="CollapseOtherRows">

</ClientEvents>