expand row at client side

[Michael]

hello ,
i have a grid with item nested template can i rasise expand row on row click client event ?

[Shinu]

Hi Michael,

I tried following client side code in order to expand/collapse the nestedview when clicking the row.

JavaScript:

<script type="text/javascript">
    function OnRowCreated() {
    }
    function OnRowClick(sender, args) {
        var dataitem = args.get_gridDataItem();
        if (!dataitem.get_expanded()) {
            dataitem.set_expanded(true);
        }
        else {
            dataitem.set_expanded(false);
        }
    }
</script>

Note: I set the HierarchyLoadMode="Client" for grid MasterTableView.

-Shinu.

[Michael]

hi Shinu,
thank you for your reply , i tried the java script row clicked event but the "null is null or not an object error occars" , ii debugged the java script event and i found that args.get_gridDataItem() always return null.

here is my grid .

<telerik:RadGrid ID="GridRootDep" runat="server" GridLines="None" AllowSorting="false"
        Width="100%" dir="rtl" ShowHeader="false" AutoGenerateColumns="False" BorderStyle="None"
        Skin="WebBlue">
        <MasterTableView Dir="RTL" HeaderStyle-BorderStyle="None" GroupLoadMode="Client"
            DataKeyNames="DepartmentId,ParentId" HierarchyLoadMode="Client" HierarchyDefaultExpanded="false">
            <ItemStyle CssClass="ELRootDepartmentItemStyle" Width="100%" />
            <AlternatingItemStyle CssClass="ELRootDepartmentItemStyle" />
            <NestedViewTemplate>
                <table style="width: 100%">
                    <tr>
                        <td class="ELGridHeader" colspan="2" style="padding-right: 10px">
                            <asp:Literal ID="departmentManagerltl" runat="Server"> مدير القسم </asp:Literal>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <telerik:RadGrid ID="GridDepManagers" runat="server" Skin="WebBlue" BorderStyle="None"
                                GridLines="None" AutoGenerateColumns="false">
                                <MasterTableView AllowPaging="True" AllowSorting="False" PageSize="50" Dir="RTL"
                                    Width="100%" HeaderStyle-BorderStyle="None" GroupLoadMode="Client" HierarchyLoadMode="Client"
                                    DataKeyNames="EmpNo">
                                    <NoRecordsTemplate>
                                        لا يوجد مديرين قسم
                                    </NoRecordsTemplate>
                                    <Columns>
                                        <telerik:GridTemplateColumn HeaderText="اسم الموظف" UniqueName="TemplateColumn2">
                                            <ItemTemplate>
                                                <table class="solidTable" width="100%|">
                                                    <tr>
                                                        <td>
                                                            <%#Eval("EmpNameArabic")%>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <a href='mailto:<%#Eval("EmpEmail") %>'>
                                                                <%#Eval("EmpEmail")%></a>
                                                        </td>
                                                    </tr>
                                                    <tr style="text-align: center; font-weight: bold">
                                                        <td>
                                                            <%#Eval("EmpNoteArabic")%>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="الوظيفة" UniqueName="TemplateColumn1">
                                            <ItemTemplate>
                                                <asp:Repeater ID="RepEmployeeJop" runat="server">
                                                    <HeaderTemplate>
                                                    </HeaderTemplate>
                                                    <ItemTemplate>
                                                        <%#Eval("PosNameArabic") %>
                                                        <%--  <asp:Label ID="Label1" runat="server" Font-Bold="true" ForeColor="Red">--%>
                                                        <%#Eval("EmpPosNoteArabic")%>
                                                        <%-- </asp:Label>--%>
                                                    </ItemTemplate>
                                                    <SeparatorTemplate>
                                                        <br />
                                                    </SeparatorTemplate>
                                                    <FooterTemplate>
                                                    </FooterTemplate>
                                                </asp:Repeater>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridBoundColumn DataField="EmpWorkPhone" HeaderText="الرقم المباشر " UniqueName="EmpWorkPhone">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="EmpExtentionPhone" HeaderText="التحويله" UniqueName="column">
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                </MasterTableView>
                                <ClientSettings>
                                    <%--                                    <Selecting AllowRowSelect="true" />--%>
                                </ClientSettings>
                            </telerik:RadGrid>
                        </td>
                    </tr>
                    <tr>
                        <td class="ELNestedSmallheader" style="padding-right: 10px" colspan="2">
                            <%--      <asp:Literal ID="memeberDepartmentltl" runat="Server"> الاقسام الفرعية </asp:Literal>--%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <telerik:RadGrid ID="GridSubDep" runat="server" AutoGenerateColumns="false" Skin="WebBlue"
                                Width="100%" ShowHeader="false" BorderStyle="None" GridLines="None">
                                <MasterTableView AllowPaging="True" AllowSorting="False" PageSize="50" Dir="RTL"
                                    DataKeyNames="DepartmentId,ParentId" HierarchyDefaultExpanded="true" HeaderStyle-BorderStyle="None"
                                    GroupLoadMode="Client" HierarchyLoadMode="Client">
                                    <ItemStyle CssClass="ELSubDepartmentItemStyle" />
                                    <AlternatingItemStyle CssClass="ELSubDepartmentItemStyle" />
                                    <NestedViewTemplate>
                                        <telerik:RadGrid ID="GridEmployeesMemebers" runat="server" AutoGenerateColumns="False"
                                            BorderStyle="None" GridLines="None" Skin="WebBlue">
                                            <MasterTableView AllowPaging="True" AllowSorting="False" PageSize="50" Dir="RTL"
                                                Width="100%" HeaderStyle-BorderStyle="None" GroupLoadMode="Client" HierarchyLoadMode="Client"
                                                DataKeyNames="EmpNo">
                                                <ItemStyle CssClass="EmployeeItemStyle" />
                                                <AlternatingItemStyle CssClass="EmployeeAlternatingItemStyle" />
                                                <NoRecordsTemplate>
                                                    لا يوجد موظفين
                                                </NoRecordsTemplate>
                                                <Columns>
                                                    <telerik:GridTemplateColumn HeaderText="اسم الموظف" UniqueName="TemplateColumn2">
                                                        <ItemTemplate>
                                                            <table class="solidTable">
                                                                <tr>
                                                                    <td>
                                                                        <%#Eval("EmpNameArabic")%>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <a href='mailto:<%#Eval("EmpEmail") %>'>
                                                                            <%#Eval("EmpEmail")%></a>
                                                                    </td>
                                                                </tr>
                                                                <tr style="text-align: center; font-weight: bold">
                                                                    <td>
                                                                        <%#Eval("EmpNoteArabic")%>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <telerik:GridTemplateColumn HeaderText="الوظيفة" UniqueName="TemplateColumn1">
                                                        <ItemTemplate>
                                                            <asp:Repeater ID="RepEmployeeJop" runat="server">
                                                                <HeaderTemplate>
                                                                </HeaderTemplate>
                                                                <ItemTemplate>
                                                                    -
                                                                    <%#Eval("PosNameArabic") %>
                                                                    <asp:Label ID="Label1" runat="server" Font-Bold="true" ForeColor="Red">
                                                                            <%#Eval("EmpPosNoteArabic")%>
                                                                    </asp:Label>
                                                                </ItemTemplate>
                                                                <SeparatorTemplate>
                                                                    <br />
                                                                </SeparatorTemplate>
                                                                <FooterTemplate>
                                                                </FooterTemplate>
                                                            </asp:Repeater>
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <telerik:GridBoundColumn DataField="EmpWorkPhone" HeaderText="الرقم المباشر " UniqueName="EmpWorkPhone">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="EmpExtentionPhone" HeaderText="التحويله" UniqueName="column">
                                                    </telerik:GridBoundColumn>
                                                </Columns>
                                                <HeaderStyle BorderStyle="None" />
                                            </MasterTableView>
                                        </telerik:RadGrid>
                                    </NestedViewTemplate>
                                    <NoRecordsTemplate>
                                        لا يوجد موظفيين
                                    </NoRecordsTemplate>
                                    <ExpandCollapseColumn Visible="True">
                                    </ExpandCollapseColumn>
                                    <Columns>
                                        <telerik:GridBoundColumn AllowSorting="False" DataField="NameAr" ShowSortIcon="False"
                                            UniqueName="NameAr">
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                    <HeaderStyle BorderStyle="None" />
                                </MasterTableView>
                                <ClientSettings>
                                    <ClientEvents OnRowClick="RowClick" />
                                    <%--<Selecting AllowRowSelect="true" />--%>
                                </ClientSettings>
                            </telerik:RadGrid>
                        </td>
                    </tr>
                </table>
            </NestedViewTemplate>
            <NoRecordsTemplate>
                لا توجد اقسام
            </NoRecordsTemplate>
            <ExpandCollapseColumn Visible="True">
                <HeaderStyle Width="10px"></HeaderStyle>
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn AllowSorting="False" DataField="NameAr" ShowSortIcon="False"
                    UniqueName="NameAr">
                </telerik:GridBoundColumn>
                <%--                <telerik:GridTemplateColumn UniqueName="NameAr" ShowSortIcon="False">
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkrootdepName" runat="server" Text='<%# Eval("NameAr") %>' OnClientClick="javascript:return false;"></asp:LinkButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>--%>
            </Columns>
            <HeaderStyle BorderStyle="None"></HeaderStyle>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnRowClick="RowClick" />
        </ClientSettings>
    </telerik:RadGrid>