This is a migrated thread and some comments may be shown as answers.

Show/Hide command Items in Hierarchical DetailTable in RadGrid

1 Answer 155 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Larry asked on 04 Dec 2012, 07:18 AM

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>

1 Answer, 1 is accepted

answered on 06 Dec 2012, 03:46 PM

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.