RadGrid expand/collapse nestedview

[Stefania]

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>
                      </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


}

[Princy]

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

[Stefania]

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>