Hi Telerik team,
I am trying to filter date column on my radgrid by the following RadDatePicker:
<label>Start Date:</label>
</div>
<telerik:RadDatePicker ID="RadDatePicker1" Runat="server" AutoPostBack="True" Culture="en-ZA" MinDate="2015-01-01" SelectedDate="2015-01-01" Skin="BlackMetroTouch">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" EnableWeekends="True" FastNavigationNextText="&lt;&lt;" Skin="BlackMetroTouch"></Calendar>
<DateInput DisplayDateFormat="yyyy/MM/dd" DateFormat="yyyy/MM/dd" LabelWidth="40%" AutoPostBack="True" DisplayText="2015/01/01" SelectedDate="2015-01-01" value="2015/01/01">
<EmptyMessageStyle Resize="None"></EmptyMessageStyle>
<ReadOnlyStyle Resize="None"></ReadOnlyStyle>
<FocusedStyle Resize="None"></FocusedStyle>
<DisabledStyle Resize="None"></DisabledStyle>
<InvalidStyle Resize="None"></InvalidStyle>
<HoveredStyle Resize="None"></HoveredStyle>
<EnabledStyle Resize="None"></EnabledStyle>
</DateInput>
<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
</telerik:RadDatePicker>
<div class="form-group">
<label>End Date</label>
</div>
<telerik:RadDatePicker ID="RadDatePicker2" Runat="server" AutoPostBack="True" Culture="en-ZA" MinDate="2015-01-01" SelectedDate="2015-01-01" Skin="BlackMetroTouch">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" EnableWeekends="True" FastNavigationNextText="&lt;&lt;" Skin="BlackMetroTouch"></Calendar>
<DateInput DisplayDateFormat="yyyy/MM/dd" DateFormat="yyyy/MM/dd" LabelWidth="40%" AutoPostBack="True" DisplayText="2015/01/01" SelectedDate="2015-01-01" value="2015/01/01">
<EmptyMessageStyle Resize="None"></EmptyMessageStyle>
<ReadOnlyStyle Resize="None"></ReadOnlyStyle>
<FocusedStyle Resize="None"></FocusedStyle>
<DisabledStyle Resize="None"></DisabledStyle>
<InvalidStyle Resize="None"></InvalidStyle>
<HoveredStyle Resize="None"></HoveredStyle>
<EnabledStyle Resize="None"></EnabledStyle>
</DateInput>
And the following is my RadGrid:
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlSalesReport" Skin="BlackMetroTouch" AllowFilteringByColumn="True">
<MasterTableView EnableHierarchyExpandAll="true" AutoGenerateColumns="False" DataSourceID="SqlSalesReport" DataKeyNames="Vin">
<DetailTables>
<telerik:GridTableView EnableHierarchyExpandAll="true" runat="server" DataSourceID="SqlParts" DataKeyNames="Vin" AutoGenerateColumns="False" AllowFilteringByColumn="False">
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="Vin" MasterKeyField="Vin" />
</ParentTableRelation>
<Columns>
<telerik:GridBoundColumn SortExpression="PartNumber" HeaderText="Part Number" HeaderButtonType="TextButton"
DataField="PartNumber" UniqueName="PartNumber">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="CaptureDate" HeaderText="Capture Date" HeaderButtonType="TextButton"
DataField="CaptureDate" UniqueName="CaptureDate" DataFormatString="{0:D}">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
<FilterTemplate>
From
<telerik:RadDatePicker ID="FromOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="FromDateSelected"
MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
to
<telerik:RadDatePicker ID="ToOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="ToDateSelected"
MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="05-06-1998" DbSelectedDate='<%# endDate %>' />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function FromDateSelected(sender, args) {
var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
var ToPicker = $find('<%# TryCast(Container, GridItem).FindControl("ToOrderDatePicker").ClientID %>');
var fromDate = FormatSelectedDate(sender);
var toDate = FormatSelectedDate(ToPicker);
tableView.filter("CaptureDate", fromDate + " " + toDate, "Between");
}
function ToDateSelected(sender, args) {
var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
var FromPicker = $find('<%# TryCast(Container, GridItem).FindControl("FromOrderDatePicker").ClientID %>');
var fromDate = FormatSelectedDate(FromPicker);
var toDate = FormatSelectedDate(sender);
tableView.filter("CaptureDate", fromDate + " " + toDate, "Between");
}
function FormatSelectedDate(picker) {
var date = picker.get_selectedDate();
var dateInput = picker.get_dateInput();
var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
return formattedDate;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
DataField="Quantity" UniqueName="Quantity">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="PartSoldPrice" HeaderText="Part Sold Price" HeaderButtonType="TextButton"
DataField="PartSoldPrice" UniqueName="PartSoldPrice" DataFormatString="{0:C}">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="TotalPrice" HeaderText="Total Price" HeaderButtonType="TextButton"
DataField="TotalPrice" UniqueName="TotalPrice" DataFormatString="{0:C}">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Commission" HeaderText="Commission" HeaderButtonType="TextButton"
DataField="Commission" UniqueName="Commission" DataFormatString="{0:C}">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridBoundColumn DataField="Vin" FilterControlAltText="Filter Vin column" HeaderText="Vin" SortExpression="Vin" UniqueName="Vin">
<ColumnValidationSettings>
<ModelErrorMessage Text="" />
</ColumnValidationSettings>
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>​
Note: i dont want to use the radgrid template i want to use the first two RadDatePickers to filter inside the radgrid.
thanks
1 Answer, 1 is accepted
What is the problem exactly? You can achieve this requirement by using the filter() method with Between function?
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridtableview-object/methods/filter
You can check this live sample:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/filter-templates/defaultcs.aspx
Also, are you aware that RadGrid provides built-in range filtering?
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime" FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate" SortExpression="OrderDate" UniqueName="OrderDate" EnableRangeFiltering="true"></telerik:GridDateTimeColumn>Regards,
Eyup
Telerik