This is a migrated thread and some comments may be shown as answers.

Problem when filtering with date..

6 Answers 843 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Akhilesh
Top achievements
Rank 1
Akhilesh asked on 02 Feb 2012, 11:59 AM
I m having a kendo grid in my page. I need to search the data from the controller using external search. So i set the serverFiltering of datasource to true for that. Its working wonderfully. But I need to enable Grid filtering also. So I set the filterable to true. Here comes the problem the grid's bult in grid filtering functionality is not working when I set the server filtering to true. Its always post to the controller. When I set the server filtering   to false its working. Here's my datasource

ds= new kendo.data.DataSource({
                transport: {
                    read: {
                        url: 'method',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8"
                    },
                    parameterMap: function (options) {                    
                        return JSON.stringify({ filter: options });
                    }
                },
                schema: {
                    model: {
                        fields: {
                            Id: { type: "number" },
                            Name: { type: "string" },
                            Age: { type: "number" },
                            BeginDate: { type: "date" },
                            EndDate: { type: "date" },
                            Mode: { type: "string" }
                        }
                    }
                }
            });

Also when I set the serverfiltering to false. Its working fine. But for both the date fields its throwing format error  when filter by dates.
In my grid's row template I am showing the date by format it by.
 <td># if(EndDate!=null){# #= kendo.toString(toDate(EndDate), "MM/dd/yyyy")#  #} else {# ${EndDate}#}#</td>

Can anyone figure this out???

6 Answers, 1 is accepted

Sort by
0
John Thompson
Top achievements
Rank 2
answered on 07 Mar 2012, 05:50 PM
I am playing around with server side filtering of date/time values and I've found that the filter value selected in the built-in filtering controls is not being passed back to the server.

More info:  Kendo takes the input value and parses it into a JavaScript Date object and save it in the filters properly.  When the jQuery AJAX call (version 1.7.1) is finally made the Date object does not get added to the parameter stack in the jQuery buildParams method on line 7630 of the unminified.  

Even more info:  On line number 7650 of the unminified jQuery 1.7.1 source is where the issue is:

} else if ( !traditional && obj != null && typeof obj === "object" ) {
    // Serialize object item.
    for ( var name in obj ) {
        buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
    }

The "traditional" value is undefined, "obj" is not null and "obj" is a typeof object.  Therefore the for (var name in obj) is executing and the JavaScript Date object does not have a name property and the buildParams method never gets invoked with the value of the date.  The question now becomes:  how do I get this to work properly?

0
Iliana Dyankova
Telerik team
answered on 12 Mar 2012, 03:40 PM
Hi,
@Akhilesh
Concerning to the external filter - I am not sure if I got you right- if you need to send the external filter value, you could add it as a parameter in the returned object from the parameterMap.

Regarding to the format error issue - you need to parse the raw dates received from the server into a valid JavaScript Date object. I suggest to do that in the parse method of the schema. Thus the dates will be saved in the correct format into the DataSource.
In case I missed something please provide more details.

@John
I am not sure if I understand your question. Please share more specified information and if possible a sample project so I can get a better view over your case.


Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John Thompson
Top achievements
Rank 2
answered on 13 Mar 2012, 04:32 PM
Sorry, it was more of a monologue than a question!

I've attached a sample project that demonstrates the issue.  I have a JSON stream of 6 objects with a date column that I fetch from an MVC 3 controller and I am using a table with data-field definitions of the columns and row templates to display the data.  The controller has a filter to string building method that I display the filter results even though I don't use the filter to limit the data for testing only.  I the production application I use dynamic LInQ to filter the results.  Regardless, the date object does not appear to get passed back from the client when the filter is applied for the date column.
0
Iliana Dyankova
Telerik team
answered on 16 Mar 2012, 01:25 PM
Hello John,

I examined your project and I believe the problem is caused by the returned result- actually it is the filter not the filtered data. Thus the filter is not applied and the Grid visualizes all the data.

In order to achieve the described behavior you need to implement filtering on your server - a custom function which accepts the Grid filter and returns the filtered data.


All the best,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John Thompson
Top achievements
Rank 2
answered on 16 Mar 2012, 02:11 PM

I am not disturbed by the fact that the data is not being filtered as that is by design.  I avoided that part of the code because it is based on dynamic LInQ from a SQL Server database in the production application.  This pared down application’s purpose is just to demonstrate that Kendo and jQuery are not playing nice together when a JavaScript Date object is being serialized into parameters for the AJAX call to get the data.

See the attached Word document for details and screen shots showing my process.

I have opened a ticket on the jQuery but see nothing there yet.  The issue can be fixed in jQuery 1.7.1 by changing the buildParams method by adding a check to see if the object is an "instanceof" the JavaScript Date type. 

} else if (!traditional && obj != null && typeof obj === "object")
{
    // Serialize object item.
    //  JHT: We have to do this because a javascript date is reported as an "object" and not a "date".
    if (obj instanceof Date)
    {
        add(prefix, obj);
    }
    else
    {
        for (var name in obj)
        {
            buildParams(prefix + "[" + name + "]", obj[name], traditional, add);
        }
    }
} else

This change in near line 9048 of the unminified version of jQuery 1.7.1 that I have copied local to test with.

0
John Thompson
Top achievements
Rank 2
answered on 19 Mar 2012, 01:02 PM
It appears that jQuery v1.7.2pre Live from Git has this fixed! 
Tags
Grid
Asked by
Akhilesh
Top achievements
Rank 1
Answers by
John Thompson
Top achievements
Rank 2
Iliana Dyankova
Telerik team
Share this question
or