GridBoundColumn DateTime javascript error on between filter.

7 posts, 0 answers
  1. Jamie Lediet
    Jamie Lediet avatar
    3 posts
    Member since:
    Mar 2010

    Posted 24 Jan 2012 Link to this post

    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..

  2. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 25 Jan 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Ahmed Ilyas
    Ahmed Ilyas avatar
    51 posts
    Member since:
    Feb 2010

    Posted 04 Apr 2012 Link to this post

    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>

  4. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 04 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Ahmed Ilyas
    Ahmed Ilyas avatar
    51 posts
    Member since:
    Feb 2010

    Posted 04 Apr 2012 Link to this post

    given my example, can you post the sample that works?
    the dates are correct format
  6. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 05 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Ahmed Ilyas
    Ahmed Ilyas avatar
    51 posts
    Member since:
    Feb 2010

    Posted 05 Apr 2012 Link to this post

    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.
Back to Top