Skip to content

Commit 4518748

Browse files
P1l3T0P1l3T0
committed
kb(grid): add article dynamic options to freeze columns
1 parent 2ba80fc commit 4518748

File tree

1 file changed

+174
-0
lines changed

1 file changed

+174
-0
lines changed

‎knowledge-base/grid-dynamic-pin-and-unpin-option-to-freeze-colums-for-static-scrolling.md

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
title: Dynamic pin/unpin option to freeze columns for static scrolling
3+
description: Dynamic pin/unpin option to freeze columns for static scrolling. Check it now!
4+
type: how-to
5+
page_title: Dynamic pin/unpin option to freeze columns for static scrolling
6+
slug: grid-dynamic-pin-and-unpin-option-to-freeze-colums-for-static-scrolling.md
7+
res_type: kb
8+
---
9+
10+
## Environment
11+
12+
<table>
13+
<tr>
14+
<td>Product</td>
15+
<td>Telerik WebForms Grid for ASP.NET AJAX</td>
16+
</tr>
17+
</table>
18+
19+
## Description
20+
21+
This sample demonstrates a convenient functionality to provide the end user with dynamic arrangement of the frozen columns.
22+
23+
## Solution
24+
25+
Markup of the Grid, be sure to set the **AllowScroll**, **UseStaticHeaders** and **FrozenColumnsCount** properties:
26+
27+
````ASP.NET
28+
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px"
29+
OnItemCreated="RadGrid1_ItemCreated" OnNeedDataSource="RadGrid1_NeedDataSource">
30+
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
31+
<Columns>
32+
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
33+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
34+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
35+
</telerik:GridBoundColumn>
36+
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
37+
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
38+
SortExpression="OrderDate" UniqueName="OrderDate">
39+
</telerik:GridDateTimeColumn>
40+
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
41+
FilterControlAltText="Filter Freight column" HeaderText="Freight"
42+
SortExpression="Freight" UniqueName="Freight">
43+
</telerik:GridNumericColumn>
44+
<telerik:GridBoundColumn DataField="ShipName"
45+
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
46+
SortExpression="ShipName" UniqueName="ShipName">
47+
</telerik:GridBoundColumn>
48+
<telerik:GridBoundColumn DataField="ShipCountry"
49+
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
50+
SortExpression="ShipCountry" UniqueName="ShipCountry">
51+
</telerik:GridBoundColumn>
52+
</Columns>
53+
</MasterTableView>
54+
<ClientSettings>
55+
<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="400px" FrozenColumnsCount="1" />
56+
</ClientSettings>
57+
</telerik:RadGrid>
58+
````
59+
60+
This [`ItemCreated`]({%slug grid/server-side-programming/events/itemcreated%}) event is executed when each item in the Grid is created. It is used to add custom controls (pin/unpin buttons) to the header cells:
61+
62+
- Check if the item is a header item
63+
- Get the header item and columns
64+
- Iterate through each column and create a pin/unpin button
65+
- Creates a RadButton for each column with two toggle states (pin and unpin).
66+
- The button's checked state is determined during the PreRender event based on whether the column is frozen.
67+
- Adds a client-side click event (OnClientClicked) that calls the pinButtonClick JavaScript function with the column index and table view ID as parameters.
68+
- Adds the button to the header cell.
69+
70+
````C#
71+
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
72+
{
73+
if (e.Item is GridHeaderItem)
74+
{
75+
GridHeaderItem headerItem = e.Item as GridHeaderItem;
76+
GridColumn[] cols = headerItem.OwnerTableView.RenderColumns;
77+
78+
foreach (GridColumn col in cols)
79+
{
80+
RadButton button = new RadButton()
81+
{
82+
ID = "RadGridPinButton" + col.UniqueName,
83+
ButtonType = RadButtonType.ToggleButton,
84+
ToggleType = ButtonToggleType.CheckBox,
85+
Width = 14,
86+
Height = 14,
87+
AutoPostBack = false
88+
};
89+
button.ToggleStates.Add(new RadButtonToggleState()
90+
{
91+
ImageUrl = "pin.png",
92+
Text = "Pin"
93+
});
94+
button.ToggleStates.Add(new RadButtonToggleState()
95+
{
96+
ImageUrl = "unpin.png",
97+
Text = "Unpin",
98+
});
99+
button.PreRender += (s, a) =>
100+
{
101+
button.Checked = col.OrderIndex < RadGrid1.ClientSettings.Scrolling.FrozenColumnsCount + 2;
102+
};
103+
104+
button.Style["float"] = "right";
105+
button.OnClientClicked = "function(s,a){pinButtonClick(s,a,"
106+
+ col.OrderIndex + ",\"" + headerItem.OwnerTableView.ClientID + "\");}";
107+
108+
headerItem[col.UniqueName].Controls.Add(button);
109+
}
110+
}
111+
}
112+
113+
114+
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
115+
{
116+
(sender as RadGrid).DataSource = OrdersTable();
117+
}
118+
private DataTable OrdersTable()
119+
{
120+
DataTable dt = new DataTable();
121+
122+
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
123+
dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
124+
dt.Columns.Add(new DataColumn("Freight", typeof(double)));
125+
dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
126+
dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));
127+
128+
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
129+
130+
for (int i = 0; i < 100; i++)
131+
{
132+
int index = i + 1;
133+
134+
DataRow row = dt.NewRow();
135+
136+
row["OrderID"] = index;
137+
row["OrderDate"] = DateTime.Now.Date.AddDays(index);
138+
row["Freight"] = index * 0.01;
139+
row["ShipName"] = "Name " + index;
140+
row["ShipCountry"] = "Country " + index;
141+
142+
dt.Rows.Add(row);
143+
}
144+
145+
return dt;
146+
}
147+
````
148+
149+
This `pinButtonClick` function handles the client-side logic when a pin/unpin button is clicked:
150+
151+
- Retrieves the GridTableView object using the tableViewID.
152+
- Determines the new count of frozen columns based on whether the button is checked (pin) or unchecked (unpin).
153+
- Updates the FrozenColumnsCount property.
154+
- Iterates through the columns to update the checked state of other pin buttons accordingly.
155+
156+
````JavaScript
157+
function pinButtonClick(sender, args, index, tableViewID) {
158+
debugger;
159+
var tableView = $find(tableViewID);
160+
var delta = sender.get_checked() ? 1 : 2;
161+
tableView.get_owner().ClientSettings.Scrolling.FrozenColumnsCount = index - delta;
162+
163+
var cols = tableView.get_columns();
164+
for (var i = 0; i < cols.length; i++) {
165+
if (i != index - 2) {
166+
var button = $telerik.findControl(cols[i].get_element(),
167+
"RadGridPinButton" + cols[i].get_uniqueName());
168+
button.set_checked(i < index - 1);
169+
}
170+
}
171+
}
172+
````
173+
174+

0 commit comments

Comments
 (0)