CODEWITHSUNDEEP
javascriptkendo-uitelerikkendo-gridtelerik-grid
Mohamed Sahir
Mohamed Sahir

Reputation: 2543

How to sort the from-date and to-date in same column in kendo ui grid

I have a column PeriodDate in kendo ui column. i have set the type as Date and format the kendo date sorting , but its not working in fromdate and todate in same field.

The value is look like this month/date/year formatenter image description here .

**0:Object
ExpirePeriod: "06/16/2016 - 06/16/2016"
1:Object
CertificatePeriod: "07/16/1991 - 06/16/1992"
2:Object
CertificatePeriod: "01/16/1995 - 06/16/2017"
3:Object
CertificatePeriod: "01/16/2014 - 06/16/2017"**

Upvotes: 1

Views: 496

Answers (1)

dimodi
dimodi

Reputation: 4139

The built-in Kendo UI sorting mechanism can only work with single scalar values (strings, numbers, dates, booleans). Sorting of date ranges is not defined and not supported, for example it is unclear how a date range should be sorted - by start date, by end date or by duration?

If you want to sort by one of the dates, then do not merge them in the data to which the Grid is bound. Use two separate fields in the Grid dataSource and bind a column to the field by which you want to sort. You can display both dates in the same column via column template:

columns: [{
    field: "StartDateField",
    title: "Date Range",
    template: "#= kendo.toString(StartDateField, 'MM/dd/yyyy') # - #= kendo.toString(EndDateField, 'MM/dd/yyyy') #"
}]

The two dates must be JavaScript Date objects, not strings. Their data field type should be set to "date" in dataSource.schema.model.fields:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model

Alternatively, you can keep the two dates in a single data field client-side and use server-side data operations to sort via server code. This will also allow you to sort by range length.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverSorting

http://docs.telerik.com/kendo-ui/framework/datasource/overview#mixed-data-operations-mode

Upvotes: 1

Related Questions