GridBoundColumn DateTime javascript error on between filter.

[Jamie Lediet]

I am attempting to apply a date range filter to a GridBoundColumn bound to a DateTime.

<telerik:GridBoundColumn DataField="Created"  FilterControlAltText="Filter Created column"
                    HeaderText="Created" SortExpression="Created" UniqueName="Created">
                     <FilterTemplate>
                     <telerik:RadDatePicker ID="ToCreatedDatePicker" runat="server" Width="85px"
                            MinDate="01-01-2012" DbSelectedDate='<%# EndCreatedDate %>'  ClientEvents-OnDateSelected="ToDateSelected"/>
                        to
                     <telerik:RadDatePicker ID="FromCreatedDatePicker" runat="server" Width="85px"
                            MinDate="01-01-2000" DbSelectedDate='<%# StartCreatedDate %>' ClientEvents-OnDateSelected="FromDateSelected"/>
<telerik:RadScriptBlock ID="scriptFilterEventDate" runat="server">
                                    <script type="text/javascript">
                                        function FromDateSelected(sender, args) {
                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToCreatedDatePicker").ClientID %>');

                                            var fromDate = FormatSelectedDate(sender);
                                            var toDate = FormatSelectedDate(ToPicker);

                                            if (toDate != '') {
                                                tableView.filter("Created", fromDate + " " + toDate, "Between");
                                            }
                                        }

                                        function ToDateSelected(sender, args) {
                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromCreatedDatePicker").ClientID %>');

                                            var fromDate = FormatSelectedDate(FromPicker);
                                            var toDate = FormatSelectedDate(sender);

                                            if (fromDate != '') {
                                                tableView.filter("Created", 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>

When the filter is applied I receive the following error message from javascript console.

Uncaught Sys.WebForms.PageRequestManagerServerErrorException: Sys.WebForms.PageRequestManagerServerErrorException: String was not recognized as a valid DateTime.
Sys.WebForms.PageRequestManager._endPostBackTelerik.Web.UI.WebResource.axd:15
Sys.WebForms.PageRequestManager._parseDeltaTelerik.Web.UI.WebResource.axd:15
Sys.WebForms.PageRequestManager._onFormSubmitCompletedTelerik.Web.UI.WebResource.axd:15
(anonymous function)Telerik.Web.UI.WebResource.axd:6
(anonymous function)Telerik.Web.UI.WebResource.axd:6
Sys.Net.WebRequest.completedTelerik.Web.UI.WebResource.axd:6
_onReadyStateChange

The filter is not applied when this error is received

Any idea what I'm doing wrong here..

[Marin]

Hi Jamie,

 Please check the FormatSelectedDate function and the value that it returns. It should a valid DateTime format according to the current culture of the application.

All the best,
Marin
the Telerik team

[Ahmed Ilyas]

I am also getting the same error. the function seems to return it to the correct format in our case (dd/mm/yyyy)
any ideas?

<FilterTemplate>
                            <telerik:RadComboBox ID="ddlDateFilter" runat="server" DropDownWidth="200px" DataTextFormatString="{0:g}" ShowDropDownOnTextboxClick="true">
                                <Items>
                                    <telerik:RadComboBoxItem Selected="true" />
                                </Items>
                                <ItemTemplate>
                                    From
                                    <telerik:RadDatePicker ID="FromDatePicker" runat="server" width="85px" ClientEvents-OnDateSelected="FromDateSelected" DbSelectedDate='<%# startDate %>' />

                                    To
                                    <telerik:RadDatePicker ID="ToDatePicker" runat="server" width="85px" ClientEvents-OnDateSelected="ToDateSelected" DbSelectedDate='<%# endDate %>' />
                                    <telerik:RadScriptBlock runat="server" ID="RadDateFilterScript">
                                        <script type="text/javascript">
                                            function FromDateSelected(sender, args) {

                                                var tableView = $find('grdShiftObservation').get_masterTableView();
                                                var ToPicker = $find('<%# TryCast(Container, RadComboBoxItem).FindControl("ToDatePicker").ClientID %>');

                                                var fromDate = FormatSelectedDate(sender);
                                                var toDate = FormatSelectedDate(ToPicker);
                                                tableView.filter("DateTime", fromDate + " " + toDate, "Between");

                                            }

                                            function ToDateSelected(sender, args) {
                                                var tableView = $find('grdShiftObservation').get_masterTableView();
                                                var FromPicker = $find('<%# TryCast(Container, RadComboBoxItem).FindControl("FromDatePicker").ClientID %>');

                                                var fromDate = FormatSelectedDate(FromPicker);
                                                var toDate = FormatSelectedDate(sender);
                                                tableView.filter("DateTime", 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>
                                </ItemTemplate>
                            </telerik:RadComboBox>
                        </FilterTemplate>

[Marin]

Hi,

 The function is designed for use in a filter template of the GridBoundColumn as shown in this demo. It might need certain modifications depending on the javascript error that you are getting so that the approach can be applied to use in RadComboBox.
You should check whether firing a filter command from the client with the specified format (dd/mm/yyyy), also causes an error it depends on the current culture of the application and the date format in the database - they should match the specified format.
Also we are preparing some improvements for the between filtering in the next release, which will make it easier to filter correctly when having a time component of the date format as well.

All the best,
Marin
the Telerik team

[Ahmed Ilyas]

given my example, can you post the sample that works?
the dates are correct format

[Marin]

Hello Ahmed,

 I am attaching a sample runnable page in VB that demonstrates the following:
 - between filtering in the ItemTemplate in the combobox, using your sample markup code
 - accessing and correcting the filter values so that time component is included for correct filtering. This is not supported on the client, so I have shown how to do it on the server.
- rebinding the control so that it shows the correct filtered values.

I hope this helps. Let me know if you have any other questions.

Greetings,
Marin
the Telerik team

[Ahmed Ilyas]

Thanks. I have not tried your attached sample however earlier on, I managed to get it to work.I had to set the e.Canceled property to true then call Rebind(). This then forces, as you know, the NeedDataSource event to which I then also filter the DataSet using the FilterExpression (and any amendements in the ItemCommand event) which is stored in a global variable.