expand row at client side

3 posts, 0 answers
  1. Michael
    Michael avatar
    13 posts
    Member since:
    Sep 2008

    Posted 11 Oct 2009 Link to this post

    hello ,
    i have a grid with item nested template can i rasise expand row on row click client event ?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Oct 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    13 posts
    Member since:
    Sep 2008

    Posted 12 Oct 2009 Link to this post

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

Back to Top