[Solved] Using RadWindow to edit hierarchical grid

[Steve LaForge]

I have a three-tiered hierarchical grid.  I am trying to use the Window / Edit Dialog for Grid example to insert / edit records.  The example works fine for a single-tier grid, but I can't follow what I need to do to edit the command item template and the template columns at the higher levels.

I'll apologize up front.  This is my first attempt at using a hierarchical grid and I'm finding the documentation and examples very confusing and/or sparse.

My three tiers are:
  DeviceClass
    DeviceGroup
      Devices

For example, the CommandItemTemplate at the first level looks like:

<CommandItemTemplate>
  <a href="#" onclick="return ShowClassInsert();">Add new Device Class</a>
</CommandItemTemplate>

and the template column contains

<telerik:GridTemplateColumn UniqueName="EditClass">
  <ItemTemplate>
    <asp:HyperLink ID="EditClassLink" runat="server" Text="Edit" />
  </ItemTemplate>
</telerik:GridTemplateColumn>

In the code-behind, I have

Protected Sub gridDevices_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles gridDevices.ItemCreated

        If TypeOf e.Item Is GridDataItem Then

            Dim editClass As HyperLink = DirectCast(e.Item.FindControl("EditClassLink"), HyperLink)
            If Not (editClass Is Nothing) Then
                editClass.Attributes("href") = "#"
                editClass.Attributes("onclick") = String.Format("return ShowClassEdit('{0}','{1}');", _
                 e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("DeviceClass"), _
                 e.Item.ItemIndex)
            End If

        End If
    End Sub

This works just fine and opens the window like it should - but only for the first tier. 

What I need now is that when I click on the 'Add new Group' command at the top of the grid, I need to be able to pass the key of the parent DeviceClass, and when I click on the Edit command in the grid for a DeviceGroup, to pass both the parent DeviceClass and the current DeviceGroup.  For the 'Add...' I want the onclick code to look like 'return ShowGroupInsert('parentClass');' and on the template column, I need for the onclick to look like 'return ShowGroupEdit('parentClass','selectedGroup');'

To take this to the third level, it would be the same except for the 'Add...' I want the onclick code to look like 'return ShowDeviceInsert('parentClass','parentGroup');' and on the template column, I need for the onclick to look like 'return ShowGroupEdit('parentClass','parentGroup','parentType');'.

I have included all of my code thus far below if you need it for reference.

Many thanks!
Steve

Here is all of my aspx code. 

<%@ Page Title="" Language="VB" MasterPageFile="~/CTMNet.master" AutoEventWireup="false" CodeFile="devs.aspx.vb" Inherits="devs" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" Runat="Server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function ShowClassEdit(dc, rowIndex) {
                var grid = $find("<%= gridDevices.ClientID %>");
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                grid.get_masterTableView().selectItem(rowControl, true);
                window.radopen("EditDeviceClass.aspx?dc=" + dc, "DeviceClassDialog");
                return false;
            }

            function ShowClassInsert() {
                window.radopen("EditDeviceClass.aspx?dc=new", "DeviceClassDialog");
                return false;
            }

            function ShowGroupEdit(dc, dg, rowIndex) {
                var grid = $find("<%# gridDevices.ClientID %>");
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                grid.get_masterTableView().selectItem(rowControl, true);
                window.radopen("EditDeviceGroup.aspx?dc=" + dc + "&dg=" + dg, "DeviceClassDialog");
                return false;
            }

            function ShowGroupInsert(dc, rowIndex) {
                window.radopen("EditDeviceGroup.aspx?dc=" + dc + "&dg=new", "DeviceClassDialog");
            }

            function ShowDeviceEdit(dc, dg, dt, rowIndex) {
                var grid = $find("<%# gridDevices.ClientID %>");
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                grid.get_masterTableView().selectItem(rowControl, true);
                window.radopen("EditDevice.aspx?dc=" + dc + "&dg=" + dg + "&typ=" + dt, "DeviceClassDialog");
                return false;
            }

            function ShowDeviceInsert(dc, dg, rowIndex) {
                window.radopen("EditDevice.aspx?dc=" + dc + "&dg=" + dg + "&typ=new", "DeviceClassDialog");
            }

            function refreshGrid(arg) {
                if (!arg) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
                }
                else {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
                }
            }
        </script>
    </telerik:RadCodeBlock>
    <h3>Device Maintenance</h3>
    <telerik:RadGrid ID="gridDevices" runat="server" AutoGenerateColumns="False"
        ShowStatusBar="True" GridLines="None" DataSourceID="dsClasses">
        <MasterTableView DataKeyNames="DeviceClass" Width="100%" CommandItemDisplay="Top" DataSourceID="dsClasses" Name="DeviceClass">
            <DetailTables>
                <telerik:GridTableView DataKeyNames="DeviceClass, DeviceGroup" DataSourceID="dsGroups" Name="DeviceGroups"
                    Width="100%" runat="server" CommandItemDisplay="Top" BorderColor="#800000" BorderWidth="3px">
                    <ParentTableRelation>
                        <telerik:GridRelationFields DetailKeyField="DeviceClass" MasterKeyField="DeviceClass" />
                    </ParentTableRelation>
                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="DeviceClass, DeviceGroup, DeviceType" DataSourceID="dsDevices"
                            Name="Devices" width="100%" runat="server" CommandItemDisplay="Top" BorderColor="#008000" BorderWidth="3px">
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="DeviceClass" MasterKeyField="DeviceClass" />
                                <telerik:GridRelationFields DetailKeyField="DeviceGroup" MasterKeyField="DeviceGroup" />
                            </ParentTableRelation>
                            <Columns>
                                <telerik:GridBoundColumn DataField="DeviceNum" HeaderText="Device" MaxLength="7" UniqueName="DeviceNum" />
                                <telerik:GridBoundColumn DataField="DeviceDescription" HeaderText="Description"
                                    MaxLength="70" UniqueName="DeviceDescription" />
                                <telerik:GridCheckBoxColumn DataField="Active" HeaderText="Active" UniqueName="Active"
                                    ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
                                <telerik:GridBoundColumn DataField="CostingType" HeaderText="Costing Tab" MaxLength="50"
                                    UniqueName="CostingType" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
                                <telerik:GridNumericColumn DataField="DirectCosts" HeaderText="Direct Costs" DataFormatString="{0:c}"
                                    UniqueName="DirectCosts" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" />
                                <telerik:GridNumericColumn DataField="OptionsDirect" HeaderText="Direct Options"
                                    DataFormatString="{0:c}" UniqueName="OptionsDirect" ItemStyle-HorizontalAlign="Right"
                                    HeaderStyle-HorizontalAlign="Right" />
                                <telerik:GridDateTimeColumn DataField="ModifiedOn" HeaderText="Last Updated On" UniqueName="ModifiedOn" />
                                <telerik:GridBoundColumn DataField="ModifiedBy" HeaderText="Last Updated By"
                                    MaxLength="30" UniqueName="ModifiedBy" />
                                <telerik:GridTemplateColumn UniqueName="EditDevice">
                                    <ItemTemplate>
                                        <asp:HyperLink ID="EditDevice" runat="server" Text="Edit" />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                            </Columns>
                            <CommandItemTemplate>
                                <a href="#" onclick="return ShowDeviceInsert();">Add new Device</a>
                            </CommandItemTemplate>
                        </telerik:GridTableView>
                    </DetailTables>
                    <ExpandCollapseColumn Visible="true" />
                    <Columns>
                        <telerik:GridBoundColumn DataField="DeviceGroup" HeaderText="Device Group" MaxLength="2" UniqueName="DeviceGroup" />
                        <telerik:GridBoundColumn DataField="GroupDescription" HeaderText="Group Description"
                            MaxLength="30" UniqueName="GroupDescription" />
                        <telerik:GridTemplateColumn UniqueName="EditGroup">
                            <ItemTemplate>
                                <asp:HyperLink ID="EditGroup" runat="server" Text="Edit" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <CommandItemTemplate>
                        <a href="#" onclick="return ShowGroupInsert();">Add new Device Group</a>
                    </CommandItemTemplate>
                </telerik:GridTableView>
            </DetailTables>
            <ExpandCollapseColumn Visible="true" />
            <Columns>
                <telerik:GridBoundColumn DataField="DeviceClass" HeaderText="Class" MaxLength="2" UniqueName="DeviceClass" />
                <telerik:GridBoundColumn DataField="ClassDescription" HeaderText="Description" MaxLength="30" UniqueName="ClassDescription" />
                <telerik:GridNumericColumn DataField="LaborRate" HeaderText="Labor Rate" MaxLength="7" DataFormatString="{0:c}" UniqueName="LaborRate" Visible="true" />
                <telerik:GridTemplateColumn UniqueName="EditClass">
                    <ItemTemplate>
                        <asp:HyperLink ID="EditClassLink" runat="server" Text="Edit" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
            <CommandItemTemplate>
                <a href="#" onclick="return ShowClassInsert();">Add new Device Class</a>
            </CommandItemTemplate>
        </MasterTableView>
    </telerik:RadGrid>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
        <Windows>
            <telerik:RadWindow ID="DeviceClassDialog" runat="server" Title="Device Class Maintenance" Height="400px" Width="300px" Left="150px"
                ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true" />
        </Windows>
    </telerik:RadWindowManager>
    <asp:SqlDataSource ID="dsClasses" runat="server" ConnectionString="<%$ ConnectionStrings:MM %>"
        ProviderName="System.Data.SqlClient" SelectCommand="select DeviceClass, ClassDescription, LaborRate from tblCBO_DeviceClass" />
    <asp:SqlDataSource ID="dsGroups" runat="server" ConnectionString="<%$ ConnectionStrings:MM %>"
        ProviderName="System.Data.SqlClient" SelectCommand="select DeviceClass, DeviceGroup, DeviceClassGroup, GroupDescription from tblCBO_DeviceGroup where DeviceClass = @DeviceClass">
        <SelectParameters>
            <asp:SessionParameter Name="DeviceClass" SessionField="DeviceClass" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="dsDevices" runat="server" ConnectionString="<%$ ConnectionStrings:MM %>"
        ProviderName="System.Data.SqlClient" SelectCommand="select DeviceNum, DeviceDescription, isnull(Active,0) as Active, CostingType, isnull(DirectCosts,0) as DirectCosts, isnull(OptionsDirect,0) as OptionsDirect, DeviceClass, DeviceGroup, DeviceType, ModifiedBy, ModifiedOn from tblDevices where DeviceClass = @DeviceClass and DeviceGroup = @DeviceGroup">
        <SelectParameters>
            <asp:SessionParameter Name="DeviceClass" SessionField="DeviceClass" Type="String" />
            <asp:SessionParameter Name="DeviceGroup" SessionField="DeviceGroup" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
</asp:Content>

Likewise, here is my entire code-behind as well:

Imports System.Data
Imports System.Data.SqlClient
Imports Telerik.Web.UI

Partial Class devs
    Inherits System.Web.UI.Page

    Protected Sub gridDevices_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles gridDevices.ItemCreated

        If TypeOf e.Item Is GridDataItem Then

            Dim editClass As HyperLink = DirectCast(e.Item.FindControl("EditClassLink"), HyperLink)
            If Not (editClass Is Nothing) Then
                editClass.Attributes("href") = "#"
                editClass.Attributes("onclick") = String.Format("return ShowClassEdit('{0}','{1}');", _
                 e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("DeviceClass"), _
                 e.Item.ItemIndex)
            End If

        End If
    End Sub

    Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest

        Select Case e.Argument
            Case "Rebind"
                gridDevices.MasterTableView.SortExpressions.Clear()
                gridDevices.MasterTableView.GroupByExpressions.Clear()
                gridDevices.Rebind()
            Case "RebindAndNavigate"
                gridDevices.MasterTableView.SortExpressions.Clear()
                gridDevices.MasterTableView.GroupByExpressions.Clear()
                gridDevicesgridDevices.MasterTableView.CurrentPageIndex = gridDevices.MasterTableView.PageCount - 1
                gridDevices.Rebind()
        End Select

    End Sub
End Class

[Georgi Krustev]

Hello Steve,

I have already answer to the support ticket open the same matter. May I ask you to continue our conversation in it in order to avoid any duplications?

Thank you for the understanding.

All the best,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Steve LaForge]

Sorry.  I posted here but I didn't receive any response so I opened the support issue.