How to specify data-columns field type in declarative grid definition

7 posts, 0 answers
  1. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2013

    Posted 31 Oct Link to this post

    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>

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 02 Nov Link to this post

    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
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  3. Kendo UI is VS 2017 Ready
  4. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2013

    Posted 02 Nov in reply to Rosen Link to this post

    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;


               }
          }
    });

     

  5. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2013

    Posted 02 Nov Link to this post

    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" } } } }'

  6. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 03 Nov Link to this post

    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" } }
                 }
             }
         }),
        //....
       }

    Regards,
    Rosen
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  7. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2013

    Posted 03 Nov in reply to Rosen Link to this post

    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.

  8. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 04 Nov Link to this post

    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" } }
                }
            }
        }),
        //...
    });
     
    //OR
     
    viewModel = 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
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready