Skip to content

Commit 519280b

Browse files
github-actions[bot]KB Bot
github-actions[bot]
and
KB Bot
authored
Added new kb article grid-conditionally-hidinnnng-rows (#604)
Co-authored-by: KB Bot <[email protected]>
1 parent 161f5f5 commit 519280b

File tree

1 file changed

+188
-0
lines changed

1 file changed

+188
-0
lines changed

‎knowledge-base/grid-conditionally-hidinnnng-rows.md‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
---
2+
title: Conditionally Hiding Rows in RadGrid
3+
description: Learn how to conditionally hide rows in RadGrid based on selections from RadComboBox within the grid.
4+
type: how-to
5+
page_title: Conditionally Hiding Rows in RadGrid
6+
slug: grid-conditionally-hidinnnng-rows
7+
tags: radgrid, asp.net ajax, hide rows, conditional display, radcombobox
8+
res_type: kb
9+
ticketid: 1666697
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadGrid for ASP.NET AJAX</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>All</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
In scenarios where RadGrid displays hierarchical data, such as Sections and Questions, you might need to dynamically show or hide certain rows based on user interactions. For instance, hiding a specific Section row when a particular answer is selected in a RadComboBox within the Questions of a preceding Section. This KB article demonstrates how to achieve this behavior using client-side events.
29+
30+
This KB article also answers the following questions:
31+
32+
- How can I hide a grid row based on a dropdown selection inside the grid?
33+
- What's the best way to conditionally display rows in RadGrid?
34+
- How to use client-side events in RadGrid to manipulate row visibility?
35+
36+
## Solution
37+
38+
To conditionally hide rows in a [RadGrid](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/overview), use the `OnClientSelectedIndexChanged` event of the `RadComboBox` within the GridTemplateColumn. This approach involves hiding the row by setting its display style to none based on the selected item in the RadComboBox.
39+
40+
Define the RadGrid with hierarchical data and include a RadComboBox in the ItemTemplate or EditItemTemplate of the GridTemplateColumn.
41+
42+
````ASP.NET
43+
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="400px"
44+
OnNeedDataSource="RadGrid1_NeedDataSource"
45+
OnDetailTableDataBind="RadGrid1_DetailTableDataBind">
46+
<MasterTableView Name="Orders" AutoGenerateColumns="False" DataKeyNames="OrderID">
47+
<Columns>
48+
<telerik:GridNumericColumn DataField="OrderID" DataType="System.Int32"
49+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
50+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
51+
</telerik:GridNumericColumn>
52+
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
53+
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
54+
SortExpression="OrderDate" UniqueName="OrderDate">
55+
</telerik:GridDateTimeColumn>
56+
</Columns>
57+
<DetailTables>
58+
<telerik:GridTableView Name="OrderDetails" AutoGenerateColumns="false">
59+
<Columns>
60+
<telerik:GridEditCommandColumn />
61+
<telerik:GridNumericColumn DataField="OrderID" DataType="System.Int32"
62+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
63+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
64+
</telerik:GridNumericColumn>
65+
<telerik:GridTemplateColumn>
66+
<ItemTemplate>
67+
<asp:Label Text="Label1" ID="Label1" runat="server" />
68+
</ItemTemplate>
69+
<EditItemTemplate>
70+
<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" OnClientSelectedIndexChanged="onSekectedIndexChanged">
71+
<Items>
72+
<telerik:RadComboBoxItem Text="Item 1" />
73+
<telerik:RadComboBoxItem Text="Item 2" />
74+
<telerik:RadComboBoxItem Text="Item 3" />
75+
</Items>
76+
</telerik:RadComboBox>
77+
</EditItemTemplate>
78+
</telerik:GridTemplateColumn>
79+
</Columns>
80+
</telerik:GridTableView>
81+
</DetailTables>
82+
</MasterTableView>
83+
</telerik:RadGrid>
84+
````
85+
86+
````C#
87+
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
88+
{
89+
(sender as RadGrid).DataSource = OrdersTable();
90+
}
91+
92+
protected void RadGrid1_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)
93+
{
94+
if (e.DetailTableView.Name == "OrderDetails")
95+
{
96+
GridDataItem parentItem = e.DetailTableView.ParentItem;
97+
98+
int orderId = (int)parentItem.GetDataKeyValue("OrderID");
99+
100+
e.DetailTableView.DataSource = OrderDetailsTable().Select(string.Format("OrderID = '{0}'", orderId));
101+
}
102+
}
103+
104+
private DataTable OrdersTable()
105+
{
106+
DataTable dt = new DataTable();
107+
108+
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
109+
dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
110+
111+
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
112+
113+
for (int i = 0; i < 3; i++)
114+
{
115+
int index = i + 1;
116+
117+
DataRow row = dt.NewRow();
118+
119+
row["OrderID"] = index;
120+
row["OrderDate"] = DateTime.Now.Date.AddDays(index);
121+
122+
dt.Rows.Add(row);
123+
}
124+
125+
return dt;
126+
}
127+
128+
private DataTable OrderDetailsTable()
129+
{
130+
DataTable dt = new DataTable();
131+
132+
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
133+
dt.Columns.Add(new DataColumn("UnitPrice", typeof(decimal)));
134+
dt.Columns.Add(new DataColumn("Quantity", typeof(int)));
135+
dt.Columns.Add(new DataColumn("Discount", typeof(decimal)));
136+
137+
var orders = OrdersTable();
138+
139+
int itemsPerOrder = 4;
140+
141+
for (int rowIndex = 0; rowIndex < orders.Rows.Count; rowIndex++)
142+
{
143+
DataRow currentOrder = orders.Rows[rowIndex];
144+
145+
for (int j = 0; j < itemsPerOrder; j++)
146+
{
147+
int index = j + 1;
148+
149+
DataRow row = dt.NewRow();
150+
151+
row["OrderID"] = currentOrder["OrderID"];
152+
153+
row["UnitPrice"] = index;
154+
row["Quantity"] = index;
155+
row["Discount"] = index * 0.01;
156+
157+
dt.Rows.Add(row);
158+
}
159+
}
160+
return dt;
161+
}
162+
````
163+
164+
Implement the client-side event handler to hide the specific row based on the selected item's text.
165+
166+
````JavaScript
167+
function onSelectedIndexChanged(sender, args) {
168+
let selectedItemText = args.get_item().get_text();
169+
170+
if (selectedItemText === "Item 2") {
171+
let masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
172+
let dataItems = masterTable?.get_dataItems();
173+
let rowToHide = dataItems[1].get_element(); // Index of the row you want to hide
174+
175+
rowToHide.style.display = 'none';
176+
}
177+
}
178+
````
179+
180+
Ensure your RadGrid is properly configured to bind data for both the master and detail tables using the `OnNeedDataSource` and `OnDetailTableDataBind` events.
181+
182+
By following these steps, you can effectively hide specific rows in RadGrid based on user selection within a RadComboBox. This method leverages client-side programming to dynamically adjust the visibility of rows, providing a responsive and interactive user experience.
183+
184+
## See Also
185+
186+
- [RadGrid Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/overview)
187+
- [RadComboBox Client-Side Programming](https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/overview)
188+
- [OnClientSelectedIndexChanged Event](https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/events/onclientselectedindexchanged#onclientselectedindexchanged)

0 commit comments

Comments
 (0)