GridTemplateColumn Filtering Datetime in HeaderContextMenu

[Tu]

Hello,

 

I have a grid with one of column defined as below, now I want to use HeaderContextMenu to show the filter option but the input is textbox instead of DateTime which should have a small calendar icon on the right side. I have tried manually showing and hiding the textbox by using below jquery at ShowMenu event but the filter just doesn't take value from my input datepicker. Can you show me how to do that?

$('[id$=DPFirstCond_wrapper]').show();
$('[id$=DPSecondCond_wrapper]').show();
$('[id$=TBFirstCond_wrapper]').hide();
$('[id$=TBSecondCond_wrapper]').hide();

 

<telerik:GridTemplateColumn SortExpression="StartDate" UniqueName="StartDate"
                                                            DataType="System.DateTime"
                                                            HeaderText="Complan Eff. Date" DataField="StartDate">
                                    <HeaderStyle Width="180px"></HeaderStyle>
                                    <ItemTemplate>
                                        <div runat="server" class='<%# ComPlanCssClass(Eval("StartDate"), Eval("ComPlanPending.StartDate"), Eval("ComPlanPending"))%>'>
                                            <asp:Label Text='<%# ComPlanValue(Eval("StartDate"), Eval("ComPlanPending.StartDate"), Eval("ComPlanPending"))%>' runat="server" />
                                        </div>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

[Attila Antal]

I know it is an old question, but since we have the answer, I will leave it here for those who stumble upon this forum later.

 

Generally speaking, server Templates are empty containers allowing the developer to add custom Controls, therefore, those do not have built-in features. The Grid, however, renders a TextBox in its GridTemplateColumn's FilterTemplate to eliminate the need to create a template for filtering too.

Because, there is a built-in Column for every data type (numeric, date, string, etc.), the GridTemplateColumn renders a Control for the most common type (string), which uses a TextBox control.

Nevertheless, you can create your own template with a DatePicker and a FilterButton that will look and behave the same as the built-in Filter.

Example

GridTemplateColumn with a DatePicker and a RadButton in its FilterTemplate.

<telerik:GridTemplateColumn DataField="OrderDate" DataType="System.DateTime"
    FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
    SortExpression="OrderDate" UniqueName="OrderDate">
    <FilterTemplate>
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" AutoPostBack="false">
        </telerik:RadDatePicker>
        <telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"
            OnClientClicked="showFilterMenu"
            CssClass="t-button rgActionButton rgFilter">
            <Icon PrimaryIconCssClass="t-font-icon rgIcon rgFilterIcon" />
        </telerik:RadButton>
        <script>
            function showFilterMenu(sender, args) {
                var tableView = sender.get_parent();
                var grid = tableView.get_owner();
                grid._showFilterMenu(sender.get_parent().get_id(), 'OrderDate', args.get_domEvent());
            }
        </script>
    </FilterTemplate>
    <ItemTemplate>
        <%# ((DateTime)Eval("OrderDate")).ToString("MM/dd/yyy") %>
    </ItemTemplate>
</telerik:GridTemplateColumn>

The button has the embedded skins and base stylesheets disabled and uses the CSS class names of the other filter buttons to make it look the same.

When the button is clicked, it will open the context menu that would normally open for the other filter buttons, and by clicking on the ContextMenu item, it will command the Grid to filter this column.

 

Behind the scenes, the Grid will access the DatePicker's value to filter the Column and this works well, however, the Filter value disappears from the DatePicker after the filter is applied, and also, the filter button does not show an indicator that the column has a filter applied.

To overcome that, you can wire up the PreRender event to the Grid and check if there is a filter applied for the column. If so, restore the date picker value as well as append an additional CSS class name to the button.

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    string dateColumnName = "OrderDate";

    GridTemplateColumn dateCol = RadGrid1.MasterTableView.GetColumn(dateColumnName) as GridTemplateColumn;

    string filterValue = dateCol.CurrentFilterValue;

    if (!string.IsNullOrEmpty(filterValue))
    {
        GridFilteringItem filterItem = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem).FirstOrDefault() as GridFilteringItem;

        DateTime selectedDate = DateTime.Parse(filterValue);

        RadDatePicker datePicker = filterItem[dateColumnName].FindControl("RadDatePicker1") as RadDatePicker;
        datePicker.SelectedDate = selectedDate;

        RadButton filterButton = filterItem[dateColumnName].FindControl("RadButton1") as RadButton;
        filterButton.CssClass += " rgFiltered";
    }
}

 

Result

 

Regards,
Attila Antal
Progress Telerik