How To Apply a Filter on a GridDateTimeColumn Using RadComboBox

Have you ever wondered how to replace the GridDateTimeColumn’s built-in filter component with a custom control of your choice?

As rare it sounds, there may be cases when you would want to do that.

Here is one example that uses a RadComboBox to Filter on a GridDateTimeColumn showing only records later than or equal to today’s date.

If you would like to see the complete implementation of this scenario, check out the Knowledge Base: Apply filter on a GridDateTimeColumn using RadComboBox article.

Or you can keep reading the blog to find out more.

Probably you have tried to add a Combo to the GridDateTimeColumn’s Filter Template and it didn't work. Worry not! In this blog, I will give you a short summary of what is happening and how you can overcome it.

RadComboBox to the Rescue!

As you might already know, RadGrid offers the possibility to replace the built-in components with custom Controls by exposing the “FilterTemplate” element for its columns. You can find instructions in the Filter Template Documentation article.

However, the Filter Template was designed mainly for the GridBoundColumn and GridTemplateColumn. These columns do not render a dedicated Filter Component based on the Column’s Data Type.

On the other hand, Data Type–specific columns such as the GridDateTimeColumn, or GridNumericColumn render a dedicated filter component that is compatible with the given data. For example, the GridDateTimeColumn renders a RadDatePicker component to handle DateTime values, while the GridNumericColumn renders a RadNumericTextBox to handle Numeric values.

Let’s just say you wanted to use GridDateTimeColumn with a RadComboBox in its Filter Template. You will still need to use a Data Type–specific Control in it (see FilterTemplate for Data Specific Columns). But that is not an issue—you can add a hidden DatePicker which will be found by the Grid’s logic, and it won’t be visible to users.

For example, add the FilterTemplate element to the GridDateTimeColumn. After that, add a RadDatePicker and a RadComboBox. You can hide the RadDatePicker by setting its Visible property to “False.”

The Column will now have a ComboBox as Filter component.

Next, you can attach the OnClientSelectedIndexChanged client-side event to the RadComboBox and disable the AutoPostBack to prevent this control from making PostBacks.

In the OnClientSelectedIndexChanged event handler, you will have JavaScript code that will call the filter() client-side function of the Grid similar to how it is shown in the Filter Template documentation article. This will make the Grid fire the Filter Command.

Although there are Items in the ComboBox, those do not have values. This example uses the backend to assign values dynamically. This way, you can assign any date from the past, present or the future automatically.

To do that, you can use the DataBinding event of the RadComboBox.

When the event fires, you can assign the current “Today” Date dynamically like so:

At this point, the filtering will work—however, the selected item in the Combo will not reflect that. To keep the item selected after the filtering, you will need to bind the SelectedValue property to the value coming from the Column’s Filter Value.

That is it!

The GridDateTimeColumn now has a RadComboBox as Filter component and you can use the Combo’s Selected Values to filter on it.

Complete Code

Code-Behind Code

The following code snippet is responsible for applying different background color to the cells. (OPTIONAL.)

Related Articles

• RadGrid Overview
• filter() client-side function – RadGrid
• Filter Template – RadGrid
• FilterTemplate for Data Specific Columns – RadGrid
• Column Types – RadGrid
• GridDateTimeColumn – RadGrid
• GridBoundColumn – RadGrid
• GridTemplateColumn – RadGrid
• Conditional Formatting – RadGrid
• OnClientSelectedIndexChanged – RadComboBox