Show/Hide command Items in Hierarchical DetailTable in RadGrid

2 posts, 0 answers
  1. Raju Guratafi
    Raju Guratafi avatar
    3 posts
    Member since:
    Oct 2012

    Posted 04 Dec 2012 Link to this post

    I am recently implementing the RadGrid to show the Payment Bills , together with "DetailTable" to show details of the Payment Bill such as Items Bought , Quantity, Price and Discount .
    When I collapse the detailTables, the command button in the "DetailTable" does not close. Would you please tell me whether there exist   the javascript statement to detect expand/collapse of the "DetailTable" ? How to detect the changes and apply to the attribute "visible" in order to achieve this?

    The following is my code : 
    <telerik:RadGrid ID="grdPayment" runat="server" AutoGenerateColumns="false" HeaderStyle-Font-Bold="true"
                                AllowMultiRowSelection="true" AllowAutomaticInserts="True" OnDetailTableDataBind="
    grdPayment_DetailTableDataBind"
     
                                CssClass="RadGridCustomClass" OnNeedDataSource="
    grdPayment_NeedDataSource" Width="98%">
     
     
                                <MasterTableView HierarchyLoadMode="Client"   AllowSorting="true" NoDetailRecordsText=""
                                    CommandItemDisplay="TopAndBottom" EditMode="InPlace" DataKeyNames="PaymentItemID">
                                    <CommandItemTemplate>
                                        <div style="padding: 5px 5px;">
                                            <telerik:RadButton ID="btnInsert" runat="server" CommandName="InitInsert" Visible='<%# !
    grdHAGroup.
     
    MasterTableView.IsItemInserted %>'
                                                Text="Add new">
                                                <Icon PrimaryIconUrl="~/Image/Button/add.gif" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                            </telerik:RadButton>
                                               
                                            <telerik:RadButton runat="server" Text="Save" ID="Button01" Visible='<%# !grdPayment.MasterTableView.IsItemInserted %>'>
                                                <Icon PrimaryIconUrl="~/Image/Button/save.gif" PrimaryIconLeft="8" PrimaryIconTop="4" />
                                            </telerik:RadButton>
                                               
                                            <asp:LinkButton ID="btnCancel" runat="server" CommandName="CancelAll" Visible='<%#
    grdPayment.EditIndexes.Count > 0 || grdPayment.MasterTableView.IsItemInserted %>'>
     
                                                                <img style="border:0px;vertical-align:middle;" alt="" src="~/Image/Button/cancel.gif" />Cancel editing
                                            </asp:LinkButton>  
                                            <asp:LinkButton ID="LinkButton3" runat="server" CommandName="PerformInsert" Visible='<%# grdPayment.MasterTableView.IsItemInserted %>'>
                                                                <img style="border:0px;vertical-align:middle;" alt="" src="~/Image/Button/yes.gif" /> Add this Bill No
                                            </asp:LinkButton>  
                                            <telerik:RadButton runat="server" Text="Delete selected Bill No(s)" ID="RadButton5"
                                                Visible='<%# !grdPayment.MasterTableView.IsItemInserted %>' OnClientClick="javascript:return confirm('Delete all selected customers?')"
                                                CommandName="DeleteSelected">
                                                <Icon PrimaryIconUrl="~/Image/Button/remove.gif" PrimaryIconLeft="8" PrimaryIconTop="4" />
                                            </telerik:RadButton>
                                               
                                        </div>
                                    </CommandItemTemplate>
                                    <Columns>
                                        <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />
                                        <telerik:GridTemplateColumn UniqueName="CostCentreDisplyID" HeaderText="Bill No.">
                                            <ItemTemplate>
                                                <asp:Label ID="lblCostCentreID" runat="server" Text='<%# Eval("BillNo") %>' />
                                                <asp:TextBox ID="txtCostCentreID" runat="server" Text='<%# Bind("BillNo") %>' Width="95%"
                                                    Style="display: none" />
                                            </ItemTemplate>
                                            <InsertItemTemplate>
                                                <asp:TextBox ID="txtCostCentreID" runat="server" Width="95%" />
                                            </InsertItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn UniqueName="CostCentre" HeaderText="Description">
                                            <ItemTemplate>
                                                <asp:Label ID="lblCostCentre" runat="server" Text='<%# Eval("BillDesp") %>' />
                                                <asp:TextBox ID="txtCostCentre" runat="server" Text='<%# Bind("BillDesp") %>' Width="95%"
                                                    Style="display: none" />
                                            </ItemTemplate>
                                            <InsertItemTemplate>
                                                <asp:TextBox ID="txtCostCentre" runat="server" Width="95%" />
                                            </InsertItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        
                                        <telerik:GridBoundColumn DataField="discount" HeaderText="Discount(%)" DataFormatString="{0:###,##0.###0}"
                                            UniqueName="discount">
                                            <ItemStyle HorizontalAlign="Right" />
                                            <HeaderStyle HorizontalAlign="Right" />
                                            <ItemStyle Width="50px" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Amount" HeaderText="Certified Amount" DataFormatString="{0:###,##0.#0}"
                                            UniqueName="Amount">
                                            <ItemStyle HorizontalAlign="Right" />
                                            <HeaderStyle HorizontalAlign="Right" />
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                    <DetailTables>
                                        <telerik:GridTableView DataKeyNames="PaymentItemID" Name="ItemLevel" Width="100%"
                                            CommandItemDisplay="TopAndBottom" EditMode="InPlace" HierarchyLoadMode="ServerOnDemand">
                                            <HeaderStyle CssClass="MostInnerHeaderStyle" />
                                            <CommandItemTemplate>
                                                <div style="padding: 5px 5px;">
                                                  <telerik:RadButton ID="btnInsertDetail"
                                                  runat="server" CommandName="InitDetailInsert"
                                                        Visible='<%#  !(Container as GridCommandItem).OwnerTableView.IsItemInserted %>' 
                                            Text="Add New Milestone#" >
                                                <Icon PrimaryIconUrl="~/Image/Button/add.gif" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                                </telerik:RadButton>  
                                                  <telerik:RadButton ID="btnCancelDetail"
                                                  runat="server" CommandName="InitDetailCancel"
                                                      Visible='<%# grdPayment.EditIndexes.Count > 0 || (Container as GridCommandItem).OwnerTableView.IsItemInserted %>'
                                            Text="Cancel editing" >
                                                <Icon PrimaryIconUrl="~/Image/Button/cancel.gif" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                                </telerik:RadButton>  
                                                  <telerik:RadButton ID="btnPerformInsertNewDetail"
                                                  runat="server" CommandName="PerformInsertDetail"
                                                 Visible='<%# (Container as GridCommandItem).OwnerTableView.IsItemInserted %>'
                                            Text="Add this Record" >
                                                <Icon PrimaryIconUrl="~/Image/Button/add.gif" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                                </telerik:RadButton>  
                                                  <telerik:RadButton ID="btnDeleteDetails"
                                                  runat="server" CommandName="InitDetailDelete"
                                                        OnClientClick="javascript:return confirm('Delete all selected customers?')"
                                                        Visible='<%#  !(Container as GridCommandItem).OwnerTableView.IsItemInserted %>'
                                            Text="Delete selected Milestone#" >
                                                <Icon PrimaryIconUrl="~/Image/Button/remove.gif" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                                </telerik:RadButton>  
                                                   
                                     
                                                </div>
                                            </CommandItemTemplate>
                                            <Columns>
                                                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">
                                                    <HeaderStyle Width="5%" />
                                                    <ItemStyle Width="5%" />
                                                </telerik:GridClientSelectColumn>
                                                <telerik:GridTemplateColumn UniqueName="ItemNo" HeaderText="Item No.">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblMilestoneDisplyID" runat="server" Text='<%# Bind("ItemNo") %>' />
                                                        <asp:TextBox ID="txtMilestoneDisplyID" runat="server" Text='<%# Bind("ItemNo") %>'
                                                            Width="95%" Style="display: none" />
                                                    </ItemTemplate>
                                                    <InsertItemTemplate>
                                                        <asp:TextBox ID="txtMilestoneDisplyID" runat="server" Width="95%" />
                                                    </InsertItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridTemplateColumn UniqueName="ItemDesp" HeaderText="Description">
                                                    <ItemTemplate>
                              
                                                        <asp:TextBox ID="tbxCostActivities" runat="server" Text='<%# Bind("ItemDesp") %>'
                                                            Width="95%" Style="display: none" />
                                                    </ItemTemplate>
                                                    <InsertItemTemplate>
                                                        <asp:TextBox ID="txtCostActivities" runat="server" Width="95%" />
                                                    </InsertItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridBoundColumn DataField="Amount" HeaderText="Certified Amount" DataFormatString="{0:###,##0.#0}"
                                                    UniqueName="Amount">
                                                    <ItemStyle HorizontalAlign="Right" />
                                                    <HeaderStyle HorizontalAlign="Right" />
                                                </telerik:GridBoundColumn>
                                            </Columns>
                                            <ExpandCollapseColumn Visible="True"/>
                                        </telerik:GridTableView>
                                    </DetailTables>
                                </MasterTableView>
                                <ClientSettings AllowExpandCollapse="false">
                                    <Selecting AllowRowSelect="true" />
                                   </ClientSettings>
                            </telerik:RadGrid>

  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 06 Dec 2012 Link to this post

    Hi Larry,

    See these client side events:

    You can access the cells client-side using the getCellByColumnUniqueName method of the GridTableView client-side object. For an example that uses this method to access cell values, see Getting cell values for selected rows client side.

    Greetings,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top