Skip to content

Commit 347c736

Browse files
attilaantalattilaantal
committed
kb(grid): add apply filter on griddatetimecolumn with radcombobox
1 parent 476afc0 commit 347c736

2 files changed

+286
-0
lines changed

‎knowledge-base/grid-apply-filter-on-a-griddatetimecolumn-using-radcombobox.md

+286
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
---
2+
title: Apply filter on a GridDateTimeColumn using RadComboBox
3+
description:
4+
type: how-to
5+
page_title:
6+
slug: grid-apply-filter-on-a-griddatetimecolumn-using-radcombobox
7+
position:
8+
tags:
9+
ticketid: 1509750
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadGrid for ASP.NET AJAX</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Solution
25+
26+
Example that uses a RadComboBox to Filter on a GridDateTimeColumn showing only records later or equal to today's date.
27+
28+
29+
![](images/grid-apply-filter-on-a-griddatetimecolumn-using-radcombobox.gif)
30+
31+
32+
The markup definition
33+
34+
````ASPNET(C#)
35+
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" AllowFilteringByColumn="true"
36+
OnItemDataBound="RadGrid1_ItemDataBound"
37+
OnNeedDataSource="RadGrid1_NeedDataSource">
38+
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
39+
<Columns>
40+
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
41+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
42+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
43+
</telerik:GridBoundColumn>
44+
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
45+
DataFormatString="{0:MM/dd/yyyy}" EnableTimeIndependentFiltering="true"
46+
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate (mm/dd/yyyy)"
47+
SortExpression="OrderDate" UniqueName="OrderDate" FilterControlWidth="160px">
48+
49+
<FilterTemplate>
50+
<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Visible="false">
51+
</telerik:RadDatePicker>
52+
53+
<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="false"
54+
EmptyMessage="Select a date"
55+
OnDataBinding="RadComboBox1_DataBinding"
56+
OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
57+
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("OrderDate").CurrentFilterValue %>'>
58+
<Items>
59+
<telerik:RadComboBoxItem Text="View All" />
60+
<telerik:RadComboBoxItem Text="Current Term" />
61+
</Items>
62+
</telerik:RadComboBox>
63+
64+
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
65+
<script>
66+
function OnClientSelectedIndexChanged(sender, args) {
67+
// Get reference to the Grid's TableView Object
68+
var tableView = $find('<%# ((GridItem)Container).OwnerTableView.ClientID %>');
69+
70+
// Get the Combo's selected value
71+
var selectedValue = args.get_item().get_value();
72+
73+
// Condition to check if the Value exists
74+
if (!selectedValue) {
75+
// If false, apply the "NoFilter" with Empty values
76+
tableView.filter('OrderDate', "", "NoFilter");
77+
} else {
78+
// If true, appl a Filter Function with the Selected Value
79+
tableView.filter('OrderDate', selectedValue, "GreaterThanOrEqualTo");
80+
}
81+
}
82+
</script>
83+
</telerik:RadScriptBlock>
84+
</FilterTemplate>
85+
</telerik:GridDateTimeColumn>
86+
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
87+
FilterControlAltText="Filter Freight column" HeaderText="Freight"
88+
SortExpression="Freight" UniqueName="Freight">
89+
</telerik:GridNumericColumn>
90+
<telerik:GridBoundColumn DataField="ShipName"
91+
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
92+
SortExpression="ShipName" UniqueName="ShipName">
93+
</telerik:GridBoundColumn>
94+
<telerik:GridBoundColumn DataField="ShipCountry"
95+
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
96+
SortExpression="ShipCountry" UniqueName="ShipCountry">
97+
</telerik:GridBoundColumn>
98+
</Columns>
99+
</MasterTableView>
100+
</telerik:RadGrid>
101+
````
102+
````ASPNET(VB)
103+
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" AllowFilteringByColumn="true"
104+
OnItemDataBound="RadGrid1_ItemDataBound"
105+
OnNeedDataSource="RadGrid1_NeedDataSource">
106+
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
107+
<Columns>
108+
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
109+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
110+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
111+
</telerik:GridBoundColumn>
112+
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
113+
DataFormatString="{0:MM/dd/yyyy}" EnableTimeIndependentFiltering="true"
114+
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate (mm/dd/yyyy)"
115+
SortExpression="OrderDate" UniqueName="OrderDate" FilterControlWidth="160px">
116+
117+
<FilterTemplate>
118+
<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Visible="false">
119+
</telerik:RadDatePicker>
120+
121+
<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="false"
122+
EmptyMessage="Select a date"
123+
OnDataBinding="RadComboBox1_DataBinding"
124+
OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
125+
SelectedValue='<%# CType(Container, GridItem).OwnerTableView.GetColumn("OrderDate").CurrentFilterValue %>'>
126+
<Items>
127+
<telerik:RadComboBoxItem Text="View All" />
128+
<telerik:RadComboBoxItem Text="Current Term" />
129+
</Items>
130+
</telerik:RadComboBox>
131+
132+
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
133+
<script>
134+
function OnClientSelectedIndexChanged(sender, args) {
135+
// Get reference to the Grid's TableView Object
136+
var tableView = $find('<%# CType(Container, GridItem).OwnerTableView.ClientID %>');
137+
138+
// Get the Combo's selected value
139+
var selectedValue = args.get_item().get_value();
140+
141+
// Condition to check if the Value exists
142+
if (!selectedValue) {
143+
// If false, apply the "NoFilter" with Empty values
144+
tableView.filter('OrderDate', "", "NoFilter");
145+
} else {
146+
// If true, appl a Filter Function with the Selected Value
147+
tableView.filter('OrderDate', selectedValue, "GreaterThanOrEqualTo");
148+
}
149+
}
150+
</script>
151+
</telerik:RadScriptBlock>
152+
</FilterTemplate>
153+
</telerik:GridDateTimeColumn>
154+
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
155+
FilterControlAltText="Filter Freight column" HeaderText="Freight"
156+
SortExpression="Freight" UniqueName="Freight">
157+
</telerik:GridNumericColumn>
158+
<telerik:GridBoundColumn DataField="ShipName"
159+
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
160+
SortExpression="ShipName" UniqueName="ShipName">
161+
</telerik:GridBoundColumn>
162+
<telerik:GridBoundColumn DataField="ShipCountry"
163+
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
164+
SortExpression="ShipCountry" UniqueName="ShipCountry">
165+
</telerik:GridBoundColumn>
166+
</Columns>
167+
</MasterTableView>
168+
</telerik:RadGrid>
169+
````
170+
171+
Code behind Code for data binding and dynamic operations
172+
173+
````C#
174+
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
175+
{
176+
(sender as RadGrid).DataSource = OrdersTable();
177+
}
178+
179+
// This event is Only Used to paint the Cells to Yellow and Green based on the Cell value
180+
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
181+
{
182+
var dataItem = (e.Item as GridDataItem);
183+
184+
// If it's a GridDataItem
185+
if (dataItem != null)
186+
{
187+
// Access the Cell
188+
var dateCell = dataItem["OrderDate"];
189+
190+
if (DateTime.ParseExact(dateCell.Text, "MM/dd/yyyy", CultureInfo.GetCultureInfo("en-US")) < DateTime.Now.Date)
191+
{
192+
dateCell.BackColor = System.Drawing.Color.Yellow;
193+
}
194+
else
195+
{
196+
dateCell.BackColor = System.Drawing.Color.LimeGreen;
197+
}
198+
}
199+
}
200+
201+
protected void RadComboBox1_DataBinding(object sender, EventArgs e)
202+
{
203+
var combo = (sender as RadComboBox);
204+
// Find the ComboBoxItem by "Current Term" text and set it's Value to Today's Date
205+
combo.FindItemByText("Current Term").Value = DateTime.Now.Date.ToShortDateString();
206+
}
207+
208+
private DataTable OrdersTable()
209+
{
210+
DataTable dt = new DataTable();
211+
212+
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
213+
dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
214+
dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));
215+
dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
216+
dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));
217+
218+
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
219+
220+
for (int i = 0; i < 10; i++)
221+
{
222+
int index = i + 1;
223+
224+
DataRow row = dt.NewRow();
225+
226+
row["OrderID"] = index;
227+
row["OrderDate"] = DateTime.Now.Date.AddDays(-7).AddDays(index);
228+
row["Freight"] = index * 0.1 + index * 0.01;
229+
row["ShipName"] = "Name " + index;
230+
row["ShipCountry"] = "Country " + index;
231+
232+
dt.Rows.Add(row);
233+
}
234+
235+
return dt;
236+
}
237+
````
238+
````VB
239+
Protected Sub RadGrid1_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
240+
CType(sender, RadGrid).DataSource = OrdersTable()
241+
End Sub
242+
243+
Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
244+
Dim dataItem = TryCast(e.Item, GridDataItem)
245+
246+
If dataItem IsNot Nothing Then
247+
Dim dateCell = dataItem("OrderDate")
248+
249+
If DateTime.ParseExact(dateCell.Text, "MM/dd/yyyy", CultureInfo.GetCultureInfo("en-US")) < DateTime.Now.Date Then
250+
dateCell.BackColor = System.Drawing.Color.Yellow
251+
Else
252+
dateCell.BackColor = System.Drawing.Color.LimeGreen
253+
End If
254+
End If
255+
End Sub
256+
257+
Protected Sub RadComboBox1_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
258+
Dim combo = CType(sender, RadComboBox)
259+
combo.FindItemByText("Current Term").Value = DateTime.Now.Date.ToShortDateString()
260+
End Sub
261+
262+
Private Function OrdersTable() As DataTable
263+
Dim dt As DataTable = New DataTable()
264+
dt.Columns.Add(New DataColumn("OrderID", GetType(Integer)))
265+
dt.Columns.Add(New DataColumn("OrderDate", GetType(DateTime)))
266+
dt.Columns.Add(New DataColumn("Freight", GetType(Decimal)))
267+
dt.Columns.Add(New DataColumn("ShipName", GetType(String)))
268+
dt.Columns.Add(New DataColumn("ShipCountry", GetType(String)))
269+
dt.PrimaryKey = New DataColumn() {dt.Columns("OrderID")}
270+
271+
For i As Integer = 0 To 10 - 1
272+
Dim index As Integer = i + 1
273+
Dim row As DataRow = dt.NewRow()
274+
row("OrderID") = index
275+
row("OrderDate") = DateTime.Now.Date.AddDays(-7).AddDays(index)
276+
row("Freight") = index * 0.1 + index * 0.01
277+
row("ShipName") = "Name " & index
278+
row("ShipCountry") = "Country " & index
279+
dt.Rows.Add(row)
280+
Next
281+
282+
Return dt
283+
End Function
284+
````
285+
286+

‎knowledge-base/images/grid-apply-filter-on-a-griddatetimecolumn-using-radcombobox.gif

71.6 KB
Loading

0 commit comments

Comments
 (0)