I have a grid which I define declaratively. It works well except that the column sorting interprets the columns as strings, whereas I wish for some columns to be sorting as numerical values.
Below is my grid definition.
The column I am interested in sorting in numerical order is "incident_count". I have tried specifying a type: "number" attribute to the column but it did not work.
<div id="PatrolRecords">
<div data-filterable='{ "mode": "row" }'
data-role='grid'
data-sortable='true'
data-detail-template='patrolDetailTemplate'
data-detail-init='detailInit'
data-bind='source: reportData.Patrols, events: {excelExport: excelExportHandler}'
data-pageable='{ "pageSize": 10 }'
data-toolbar='["excel"]'
data-excel='{ "fileName": "Patrols.xlsx", "allPages": "true" }'
data-columns='[
{
field: "patrol_id_plain",
title: "Patrol ID",
filterable: false,
width: 70
},
{
field: "tour_name",
title: "Tour",
filterable: { cell: { operator: "contains" } }
},
{
field: "location_name",
title: "Location",
filterable: { cell: { operator: "contains" } }
},
{
field: "client_company",
title: "Company",
filterable: { cell: { operator: "contains" } }
},
{
field: "address",
title: "Address",
template: kendo.template($("#addressTemplate").html()),
filterable: { cell: { operator: "contains" } }
},
{
field: "end_date_seconds",
title: "Date & Time",
template: kendo.template($("#dateTemplate").html()),
filterable: false
},
{
field: "patrolled_by",
title: "Patrolled By",
filterable: { cell: { operator: "contains" } }
},
{
field: "checkpoints",
title: "Checkpoints",
template: kendo.template($("#checkpointsTemplate").html()),
filterable: false,
width: 90
},
{
field: "incident_count",
title: "Incidents",
filterable: false,
type: "number",
width: 70
},
{
title: "GPS",
template: kendo.template($("#gpsTemplate").html()),
filterable: false,
width: 50
},
{
title: "",
template: kendo.template($("#viewLinkTemplate").html()),
filterable: false,
width: 60
},
]'>
</div>
</div>
3 Answers, 1 is accepted
Hello Tom,
As you may know the type of the field is defined inside the DataSource.schema.model. Therefore, you will need to modify the declaration of the DataSource bound to the Grid widget in order to set the type for a given field. Note that if you are binding directly to a collection you will need to switch to a DataSource instance instead.
Regards,Rosen
Telerik by Progress
Rank 1
Rosen thank you for the reply.
Could you show me how I can specify a schema, given my viewmodel?
Below is my viewmodel, as you can see from the above kendo grid declarative initialization, the data source is specified with the attribute data-bind='source: reportData.Patrols'
Basically my question is where do I put the "schema:" attribute to get the grid to interpret the columns as specific data types?
Would it be somewhere in the data-bind='source: ..src..., events: ...events..., schema: ...schema...'
viewModel:
viewModel = kendo.observable({
reportData:
"Patrols":
[{
"patrol_id": "yO0crrEjeNvlrkc3H8otng%3d%3d",
"patrol_id_plain": "7383748",
"tour_name": "Airport Towers",
"location_name": "Airport Towers",
"client_company": "Scottsdale Auto Center",
"address": "18881 Von Karman",
"city": "Irvine",
"abbreviation": "CA",
"end_date": "10/31/2016 11:56:47 AM",
"end_date_seconds": "531237407",
"first_name": "James",
"last_name": "Wierzba",
"patrolled_by": "James Wierzba",
"incident_only": "0"
},
"patrol_id": "KhZmgPq2fbSP3Zly%2bw2I5Q%3d%3d",
"patrol_id_plain": "7383747",
"tour_name": "Airport Towers",
"location_name": "Airport Towers",
"client_company": "Scottsdale Auto Center",
"address": "18881 Von Karman",
"city": "Irvine",
"abbreviation": "CA",
"end_date": "10/10/2016 6:24:01 AM",
"end_date_seconds": "529403041",
"first_name": "James",
"last_name": "Wierzba",
"patrolled_by": "James Wierzba",
"incident_only": "0"
],
excelExportHandler: function (e) {
var sheet = e.workbook.sheets[0];
for (var i = 1; i < sheet.rows.length; i++) {
var row = sheet.rows[i];
var data = e.data.reportData.Patrols[i - 1];
if (data.incident_only == "1") row.cells[6].value = '-';
else row.cells[6].value = data.completed_checkpoint_count + ' of ' + data.total_checkpoint_count;
}
}
});
Rank 1
I've tried specifying the data-bind="src:" (reportData) to be a instance of kendo.data.DataSource and it did not work
viewModel = kendo.observable({
reportData: new kendo.data.DataSource({
schema: {
data: results,
model: {
fields: { incident_count: { type: "number" } }
}
}
}),
excelExportHandler: function (e) {
var sheet = e.workbook.sheets[0];
for (var i = 1; i < sheet.rows.length; i++) {
var row = sheet.rows[i];
var data = e.data.reportData.Patrols[i - 1];
if (data.incident_only == "1") row.cells[6].value = '-';
else row.cells[6].value = data.completed_checkpoint_count + ' of ' + data.total_checkpoint_count;
}
}
Additionally I've tried specifying a schema inside of the data-bind attribute:
<div>
...
data-bind='source: reportData.Patrols, events: {excelExport: excelExportHandler}, schema: { model: {fields: { incident_count: { type: "number" } } } }'
Hello Tom,
You should use the data option of the DataSource in order to assign the data. In the snippet you have pasted the schema.data is used, which has different purpose and is not applicable in this case.
Here is how the DataSource configuration should look like:
viewModel = kendo.observable({ reportData: new kendo.data.DataSource({ data: [{ "patrol_id": "yO0crrEjeNvlrkc3H8otng%3d%3d", "patrol_id_plain": "7383748", "tour_name": "Airport Towers", "location_name": "Airport Towers", "client_company": "Scottsdale Auto Center", "address": "18881 Von Karman", "city": "Irvine", "abbreviation": "CA", "end_date": "10/31/2016 11:56:47 AM", "end_date_seconds": "531237407", "first_name": "James", "last_name": "Wierzba", "patrolled_by": "James Wierzba", "incident_only": "0" },{ "patrol_id": "KhZmgPq2fbSP3Zly%2bw2I5Q%3d%3d", "patrol_id_plain": "7383747", "tour_name": "Airport Towers", "location_name": "Airport Towers", "client_company": "Scottsdale Auto Center", "address": "18881 Von Karman", "city": "Irvine", "abbreviation": "CA", "end_date": "10/10/2016 6:24:01 AM", "end_date_seconds": "529403041", "first_name": "James", "last_name": "Wierzba", "patrolled_by": "James Wierzba", "incident_only": "0" }], schema: { model: { fields: { incident_count: { type: "number" } } } } }), //.... }Rosen
Telerik by Progress
Rank 1
Rosen,
I've managed to modify my viewModel to include this schema as
viewModel = kendo.observable({
reportData: new kendo.data.DataSource({
data: results,
schema: {
model: {
fields: { incident_count: { type: "number" } }
}
}
}),
I've also had to modify the grid template data-bind attribute since changing the viewModel datasource from data-bind='source: reportData.Patrols' to data-bind='source: reportData.options.data.Patrols'
The data populates into the grid correctly, however the incident_count field still get sorted based on string value (e.g. ascending order of 1,10,2,3 ... )
This is the issue I'm trying to solve, if I didn't make that clear before. I need to sort values based on a data type.
Hello Tom,
The DataSource definition is incorrect. As shown in my previous message the data should be at the top level or you will need to use schema data option. Thus, if the shape of the Object referenced by the result variable looks like this{ Patrols: [/*.data in here.*/] } Then the DataSource configuration should looks like one of the following configuration:
viewModel = kendo.observable({ reportData: new kendo.data.DataSource({ data: results.Patrols, schema: { model: { fields: { incident_count: { type: "number" } } } } }), //...});//ORviewModel = kendo.observable({ reportData: new kendo.data.DataSource({ data: results, schema: { data: "Patrols", model: { fields: { incident_count: { type: "number" } } } } }), //...});Also you should not bind via the options field of the DataSource. The binding should look similar to the following:
data-bind='source: reportData, events: {excelExport: excelExportHandler}'Regards,
Rosen
Telerik by Progress