Skip to content

Commit f5cb29d

Browse files
github-actions[bot]KB Bot
github-actions[bot]
and
KB Bot
authored
Added new kb article retrieve-visible-columns-radgrid-aspnet-ajax (#696)
Co-authored-by: KB Bot <[email protected]>
1 parent 4443170 commit f5cb29d

File tree

1 file changed

+154
-0
lines changed

1 file changed

+154
-0
lines changed

‎knowledge-base/retrieve-visible-columns-radgrid-aspnet-ajax.md

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
---
2+
title: Getting Visible Columns in RadGrid for ASP.NET AJAX
3+
description: Learn how to retrieve only the visible columns selected via the column chooser in RadGrid for ASP.NET AJAX.
4+
type: how-to
5+
page_title: How to Retrieve Visible Columns Selected in RadGrid for ASP.NET AJAX
6+
slug: retrieve-visible-columns-radgrid-aspnet-ajax
7+
tags: radgrid, asp.net ajax, visible columns, column chooser, client-side events
8+
res_type: kb
9+
ticketid: 1690144
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+
29+
I want to retrieve only the columns that are currently visible in the RadGrid after selection via the column chooser. The visibility of columns is controlled on the client side, and I need a solution to pass the list of visible columns to the server for further processing, such as exporting the data.
30+
31+
This knowledge base article also answers the following questions:
32+
- How can I track visible columns in RadGrid for ASP.NET AJAX?
33+
- How to send visible columns from RadGrid to the server-side code?
34+
- What is the best way to handle visible columns for exporting in RadGrid?
35+
36+
## Solution
37+
38+
To achieve this, use the `OnColumnHidden` client-side event to track hidden columns and determine the currently visible columns. Then, send the list of visible columns to the server using AJAX requests. Below is the implementation:
39+
40+
````JavaScript
41+
let hiddenColumnArray = []; // Array to track hidden columns
42+
43+
function onColumnHidden(sender, args) {
44+
let hiddenColumn = args.get_gridColumn(); // Get the hidden column
45+
hiddenColumnArray.push(hiddenColumn); // Add the column to the tracking array
46+
47+
let ajaxManager = $find("<%= RadAjaxManager1.ClientID %>"); // Reference to RadAjaxManager
48+
let columns = sender.get_masterTableView().get_columns(); // Get all columns
49+
let columnNameArray = []; // Array for visible column names
50+
51+
let visibleColumns = columns.filter((col) => col.get_visible() === true); // Filter visible columns
52+
visibleColumns.forEach((col) => columnNameArray.push(col.get_uniqueName())); // Add visible column names
53+
54+
if (hiddenColumnArray.length >= 3) { // Trigger AJAX request after 3 columns are hidden
55+
ajaxManager.ajaxRequest(columnNameArray); // Send visible column names
56+
}
57+
}
58+
````
59+
60+
````C#
61+
List<GridBoundColumn> columnsList = new List<GridBoundColumn>();
62+
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
63+
{
64+
string[] uniqueNames = e.Argument.Split(',');
65+
66+
foreach (string uniqueName in uniqueNames)
67+
{
68+
GridBoundColumn column = RadGrid1.MasterTableView.GetColumn(uniqueName) as GridBoundColumn;
69+
columnsList.Add(column);
70+
}
71+
}
72+
73+
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
74+
{
75+
(sender as RadGrid).DataSource = OrdersTable();
76+
}
77+
private DataTable OrdersTable()
78+
{
79+
DataTable dt = new DataTable();
80+
81+
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
82+
dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
83+
dt.Columns.Add(new DataColumn("Freight", typeof(double)));
84+
dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
85+
dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));
86+
87+
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
88+
89+
for (int i = 0; i < 100; i++)
90+
{
91+
int index = i + 1;
92+
93+
DataRow row = dt.NewRow();
94+
95+
row["OrderID"] = index;
96+
row["OrderDate"] = DateTime.Now.Date.AddDays(index);
97+
row["Freight"] = index * 0.01;
98+
row["ShipName"] = "Name " + index;
99+
row["ShipCountry"] = "Country " + index;
100+
101+
dt.Rows.Add(row);
102+
}
103+
104+
return dt;
105+
}
106+
````
107+
108+
````ASP.NET
109+
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
110+
<AjaxSettings>
111+
<telerik:AjaxSetting AjaxControlID="RadGrid1">
112+
<UpdatedControls>
113+
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
114+
</UpdatedControls>
115+
</telerik:AjaxSetting>
116+
</AjaxSettings>
117+
</telerik:RadAjaxManager>
118+
119+
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" EnableHeaderContextMenu="true" OnNeedDataSource="RadGrid1_NeedDataSource">
120+
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
121+
<Columns>
122+
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
123+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
124+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
125+
</telerik:GridBoundColumn>
126+
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
127+
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
128+
SortExpression="OrderDate" UniqueName="OrderDate">
129+
</telerik:GridDateTimeColumn>
130+
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
131+
FilterControlAltText="Filter Freight column" HeaderText="Freight"
132+
SortExpression="Freight" UniqueName="Freight">
133+
</telerik:GridNumericColumn>
134+
<telerik:GridBoundColumn DataField="ShipName"
135+
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
136+
SortExpression="ShipName" UniqueName="ShipName">
137+
</telerik:GridBoundColumn>
138+
<telerik:GridBoundColumn DataField="ShipCountry"
139+
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
140+
SortExpression="ShipCountry" UniqueName="ShipCountry">
141+
</telerik:GridBoundColumn>
142+
</Columns>
143+
</MasterTableView>
144+
<ClientSettings>
145+
<ClientEvents OnColumnHidden="onColumnHidden" />
146+
</ClientSettings>
147+
</telerik:RadGrid>
148+
````
149+
150+
## See Also
151+
152+
- [OnColumnHidden Event Documentation](https://www.telerik.com/products/aspnet-ajax/documentation/controls/grid/client-side-programming/events/oncolumnhidden#oncolumnhidden)
153+
- [RadAjaxManager ajaxRequest Method Documentation](https://www.telerik.com/products/aspnet-ajax/documentation/controls/ajaxmanager/client-side-programming/methods/ajaxrequest#ajaxrequest-method)
154+
- [RadGrid Overview](https://www.telerik.com/products/aspnet-ajax/documentation/controls/grid/overview)

0 commit comments

Comments
 (0)