I have a grid and I'm trying to add some date range filtering to. The date range filter is on a GridDateTimeColumn, however I just need to filter on Date. I enabled Range Filtering on the column, but the filter control didn't play nice with the grid, it extendes the width of the DateTimeColumn so the other columns are almost too small. I then implemented a FilterTemplate with two Telerik DatePicker controls (one on top of the other) as per this demo and that seemed to work. However, it broke other filtering that I had on the grid.
Whenever I use any other filter, the date range filter is ignored.
Example workflow:
- Enter From Date and To Date - note the records in the grid
- Filter on any other column - note the date range is ignored
Here is my markup
<%@ Page Title="" Language="C#" MasterPageFile="~/pqc.Master" AutoEventWireup="true" CodeBehind="inspection.aspx.cs" Inherits="pqc.web.inspection.Inspection" %><asp:ContentID="Content1"ContentPlaceHolderID="head1"runat="server"> <telerik:RadScriptBlockrunat="server"ID="radScriptBlock"> <scripttype="text/javascript"> function RowSelected(sender, args) { var key = args.getDataKeyValue("inspection_id"); if (key) { window.location.href = "viewinspection.aspx?id=" + key; } } </script> </telerik:RadScriptBlock></asp:Content><asp:ContentID="Content2"ContentPlaceHolderID="ContextMenu"runat="server"> <div> <telerik:RadButtonrunat="server"ID="radNew"Text="New Inspection"OnClick="radNew_OnClick"></telerik:RadButton> </div></asp:Content><asp:ContentID="Content3"ContentPlaceHolderID="MainContent"runat="server"> <telerik:RadAjaxManagerrunat="server"ID="radAjaxManager"EnableAJAX="True"> <AjaxSettings> <telerik:AjaxSettingAjaxControlID="radInspection"> <UpdatedControls> <telerik:AjaxUpdatedControlControlID="radInspection"LoadingPanelID="radLpInspection"/> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <divclass="title">Inspection</div> <telerik:RadAjaxLoadingPanelrunat="server"ID="radLpInspection"></telerik:RadAjaxLoadingPanel> <telerik:RadGridrunat="server"ID="radInspection"AllowPaging="True"AllowSorting="True"ShowHeader="True"GridLines="None"CellPadding="0"CellSpacing="0" PageSize="20"AllowFilteringByColumn="True"OnNeedDataSource="radInspection_OnNeedDataSource"OnItemCommand="radInspection_OnItemCommand" OnItemDataBound="radInspection_OnItemDataBound"> <ClientSettingsAllowColumnsReorder="False"EnableRowHoverStyle="True"EnablePostBackOnRowClick="False"> <SelectingAllowRowSelect="True"></Selecting> <ScrollingUseStaticHeaders="True"></Scrolling> <ClientEventsOnRowSelected="RowSelected"></ClientEvents> </ClientSettings> <GroupingSettingsCaseSensitive="False"></GroupingSettings> <MasterTableViewDataKeyNames="inspection_id"ClientDataKeyNames="inspection_id"AutoGenerateColumns="False"AllowMultiColumnSorting="True"EnableHeaderContextMenu="True" AllowFilteringByColumn="True"CommandItemDisplay="TopAndBottom"Height="100%"> <NoRecordsTemplate>No inspections.</NoRecordsTemplate> <CommandItemSettingsShowAddNewRecordButton="False"ShowCancelChangesButton="False"ShowSaveChangesButton="False"ShowRefreshButton="True"></CommandItemSettings> <Columns> <telerik:GridBoundColumnDataField="inspection_id"HeaderText="ID"> <HeaderStyleWidth="1%"VerticalAlign="Top"HorizontalAlign="Right"></HeaderStyle> <ItemStyleWidth="1%"VerticalAlign="Top"HorizontalAlign="Right"></ItemStyle> <FilterTemplate> <asp:ImageButtonrunat="server"ID="ibClearDate"ImageUrl="images/icons/cancel.png"AlternateText="Clear filter"ToolTip="Clear filter" Width="16"Height="16"OnClick="ibClearDate_OnClick"/> </FilterTemplate> </telerik:GridBoundColumn> <telerik:GridDateTimeColumnDataField="inspection_datetime"HeaderText="Inspection Date"EnableTimeIndependentFiltering="False" PickerType="DateTimePicker"DataFormatString="{0:yyyy-MM-dd HH:mm tt}"UniqueName="InspectionDate"enable> <ItemStyleWidth="7%"VerticalAlign="Top"HorizontalAlign="Left"></ItemStyle> <HeaderStyleWidth="7%"></HeaderStyle> <FilterTemplate> <divstyle="float: left"> <telerik:RadDatePickerrunat="server"ID="radFromInspectionDate"Width="110px"> <Calendar> <SpecialDays> <telerik:RadCalendarDayRepeatable="Today"> <ItemStyleBackColor="LightGray"Font-Bold="True"BorderStyle="Solid"BorderColor="Black"BorderWidth="1px"></ItemStyle> </telerik:RadCalendarDay> </SpecialDays> </Calendar> <DateInputDisplayDateFormat="yyyy-MM-dd"DateFormat="yyyy-MM-dd"EmptyMessage="From Date"></DateInput> <ClientEventsOnDateSelected="FromInspectionDateSelected"></ClientEvents> </telerik:RadDatePicker> <br/> <telerik:RadDatePickerrunat="server"ID="radToInspectionDate"Width="110px"> <Calendar> <SpecialDays> <telerik:RadCalendarDayRepeatable="Today"> <ItemStyleBackColor="LightGray"Font-Bold="True"BorderStyle="Solid"BorderColor="Black"BorderWidth="1px"></ItemStyle> </telerik:RadCalendarDay> </SpecialDays> </Calendar> <DateInputDisplayDateFormat="yyyy-MM-dd"DateFormat="yyyy-MM-dd"EmptyMessage="To Date"></DateInput> <ClientEventsOnDateSelected="ToInspectionDateSelected"></ClientEvents> </telerik:RadDatePicker> </div> <telerik:RadScriptBlockrunat="server"ID="radInspectionScripts"> <scripttype="text/javascript"> function FromInspectionDateSelected(sender, args) { var tableView = $find("<%# Container.OwnerTableView.ClientID %>"); var toPicker = $find('<%# Container.FindControl("radToInspectionDate").ClientID %>'); if (tableView && toPicker) { var fromDate = FormatSelectedDate(sender); var toDate = FormatSelectedDate(toPicker); tableView.filter("InspectionDate", fromDate + " " + toDate, "Between"); } } function ToInspectionDateSelected(sender, args) { var tableView = $find("<%# Container.OwnerTableView.ClientID %>"); var fromPicker = $find('<%# Container.FindControl("radFromInspectionDate").ClientID %>'); if (tableView && fromPicker) { var fromDate = FormatSelectedDate(fromPicker); var toDate = FormatSelectedDate(sender); tableView.filter("InspectionDate", fromDate + " " + toDate, "Between"); } } function FormatSelectedDate(picker) { if (picker) { var date = picker.get_selectedDate(); var dateInput = picker.get_dateInput(); if (!date) { date = new Date(); } var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat()); return formattedDate; } return null; } </script> </telerik:RadScriptBlock> </FilterTemplate> </telerik:GridDateTimeColumn> <telerik:GridBoundColumnDataField="inspector"HeaderText="Inspector"FilterControlWidth="75%"> <HeaderStyleWidth="7%"></HeaderStyle> <ItemStyleWidth="7%"VerticalAlign="Top"HorizontalAlign="Left"></ItemStyle> </telerik:GridBoundColumn> <telerik:GridBoundColumnDataField="division"HeaderText="Division"UniqueName="Division"FilterControlWidth="75%"> <HeaderStyleWidth="5%"></HeaderStyle> <ItemStyleWidth="5%"VerticalAlign="Top"HorizontalAlign="Left"></ItemStyle> <FilterTemplate> <telerik:RadComboBoxrunat="server"ID="radDivisionFilter"Width="120px"OnClientSelectedIndexChanged="DivisionIndexChanged"></telerik:RadComboBox> <telerik:RadCodeBlockrunat="server"ID="radDivisionCode"> <scripttype="text/javascript"> function DivisionIndexChanged(sender, args) { var tableView = $find("<%# Container.OwnerTableView.ClientID %>"); tableView.filter("Division", args.get_item().get_value(), "EqualTo"); } </script> </telerik:RadCodeBlock> </FilterTemplate> </telerik:GridBoundColumn> <telerik:GridBoundColumnDataField="full_grade"HeaderText="Grade"FilterControlWidth="75%"> <HeaderStyleWidth="8%"></HeaderStyle> <ItemStyleWidth="8%"VerticalAlign="Top"HorizontalAlign="Left"></ItemStyle> </telerik:GridBoundColumn> <telerik:GridBoundColumnDataField="tag_number"HeaderText="Tag #"FilterControlWidth="75%"> <HeaderStyleWidth="5%"></HeaderStyle> <ItemStyleWidth="5%"VerticalAlign="Top"HorizontalAlign="Left"></ItemStyle> </telerik:GridBoundColumn> <telerik:GridBoundColumnDataField="size_description"HeaderText="Width"FilterControlWidth="75%"> <HeaderStyleWidth="4%"></HeaderStyle> <ItemStyleWidth="4%"VerticalAlign="Top"HorizontalAlign="Left"></ItemStyle> </telerik:GridBoundColumn> <telerik:GridBoundColumnDataField="length_description"HeaderText="Length"FilterControlWidth="75%"> <HeaderStyleWidth="4%"></HeaderStyle> <ItemStyleWidth="4%"VerticalAlign="Top"HorizontalAlign="Left"></ItemStyle> </telerik:GridBoundColumn> <telerik:GridCheckBoxColumnDataField="complete"HeaderText="Completed"AllowFiltering="False"> <HeaderStyleWidth="2%"HorizontalAlign="Right"></HeaderStyle> <ItemStyleWidth="2%"VerticalAlign="Top"HorizontalAlign="Right"></ItemStyle> </telerik:GridCheckBoxColumn> </Columns> </MasterTableView> </telerik:RadGrid></asp:Content>Here is my code-behind
usingSystem;usingSystem.Web.UI;usingpqc.web.Classes;usingTelerik.Web.UI;namespacepqc.web.inspection{ publicpartialclassInspection : PageBase { privateDateTime? FromDate { get; set; } privateDateTime? ToDate { get; set; } protectedvoidPage_Load(objectsender, EventArgs e) { if(Session["Key"] != null) { Session["Key"] = -1; } if(!IsPostBack) { LoadData(); } } privatevoidLoadData() { var inspections = dal.Inspection.GetVInspectionHeaders(); radInspection.DataSource = inspections; } protectedvoidradInspection_OnNeedDataSource(objectsender, GridNeedDataSourceEventArgs e) { LoadData(); } protectedvoidradNew_OnClick(objectsender, EventArgs e) { Session["Key"] = -1; Response.Redirect("header.aspx"); } protectedvoidradInspection_OnItemCommand(objectsender, GridCommandEventArgs e) { var grid = sender asRadGrid; if(grid == null) { return; } if(e.CommandName == "RowClick") { var item = e.Item asGridEditableItem; if(item == null) { return; } var key = item.GetDataKeyValue("inspection_id").ToString(); Response.Redirect(string.Format("viewinspection.aspx?id={0}", key)); } else { var filtering = e.Item asGridFilteringItem; if(filtering == null) { return; } var selected = ""; var fromDate = filtering.FindControl("radFromInspectionDate") asRadDatePicker; var toDate = filtering.FindControl("radToInspectionDate") asRadDatePicker; if(fromDate != null) { if(!string.IsNullOrEmpty(grid.MasterTableView.GetColumn("InspectionDate").CurrentFilterValue)) { selected = grid.MasterTableView.GetColumn("InspectionDate").CurrentFilterValue; selected = selected.Split(' ')[0]; } if(!string.IsNullOrEmpty(selected)) { FromDate = Convert.ToDateTime(selected); fromDate.SelectedDate = FromDate; } } if(toDate != null) { if(!string.IsNullOrEmpty(grid.MasterTableView.GetColumn("InspectionDate").CurrentFilterValue)) { selected = grid.MasterTableView.GetColumn("InspectionDate").CurrentFilterValue; selected = selected.Split(' ')[1]; } if(!string.IsNullOrEmpty(selected)) { ToDate = Convert.ToDateTime(selected); toDate.SelectedDate = ToDate; } } } } protectedvoidradInspection_OnItemDataBound(objectsender, GridItemEventArgs e) { var grid = sender asRadGrid; if(grid == null) { return; } var filtering = e.Item asGridFilteringItem; if(filtering == null) { return; } var fromDate = filtering.FindControl("radFromInspectionDate") asRadDatePicker; var toDate = filtering.FindControl("radToInspectionDate") asRadDatePicker; var cmbDiv = filtering.FindControl("radDivisionFilter") asRadComboBox; if(fromDate != null) { fromDate.SelectedDate = FromDate; } if(toDate != null) { toDate.SelectedDate = ToDate; } if(cmbDiv != null) { cmbDiv.ClearSelection(); cmbDiv.Items.Clear(); var selected = ""; if(!string.IsNullOrEmpty(grid.MasterTableView.GetColumn("Division").CurrentFilterValue)) { selected = grid.MasterTableView.GetColumn("Division").CurrentFilterValue; } ListHelper.FillDivisionsForFilter(cmbDiv, ApplicationId, selected); } } protectedvoidibClearDate_OnClick(objectsender, ImageClickEventArgs e) { radInspection.MasterTableView.FilterExpression = string.Empty; foreach(var column inradInspection.MasterTableView.RenderColumns) { var b = column asGridBoundColumn; if(b != null) { b.CurrentFilterValue = string.Empty; } } radInspection.Rebind(); } }}How can I get the date filter preserved when other columns are filtered?