Kendo Grid with Column Templates not sorting correctly

6 posts, 0 answers
  1. Berel
    Berel avatar
    3 posts
    Member since:
    Sep 2013

    Posted 28 Oct 2013 Link to this post

    Hi, I have a Kendo Grid with column templates to handle date formatting, null values, etc., and the columns are set to sortable.  However, when I click a column header to sort the sort arrow changes but the data does not sort. Below is the grid definition.  Any ideas would be very much appreciated!

    var gridDataSource = new kendo.data.DataSource({
        data: results,
        total: results.length,
        pageSize: 20,
        schema: {
            model: {
                id: "id",
                fields: {
                    attributes: { type: "object" }
                }
            }
        }
    });
     
    //Build the Kendo UI grid
    var kendoDataGrid = $("#dataGrid").kendoGrid({
        dataSource: gridDataSource,
        columns: GetGridColumns(),
        scrollable: true,
        pageable: true,
        resizable: true,
        sortable: true,
        selectable: "row",
        navigatable: true,
        height: gridHeight,
        editable: false
    }).data("kendoGrid");
  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 28 Oct 2013 Link to this post

    Hi Berel,

    I have made a simple demo that has sorting working with custom templates.
    http://jsfiddle.net/RTWF9/

    Im not sure whats wrong with your setup.
    Could you please post the code for your GetGridColumns function?
  3. Kendo UI is VS 2017 Ready
  4. Berel
    Berel avatar
    3 posts
    Member since:
    Sep 2013

    Posted 28 Oct 2013 Link to this post

    Hi, here's my GetGridColumns function.  Basically, I'm returning the array of columns with some conditions around which columns are in the array. 

    GetGridColumns: function()
    {
        if (typeof(console) !== "undefined")
        {
            console.log(this.CurrentTab);
        }
     
         var columns = [
                {
                    field: "attributes['contact.firstname']",
                    template: "#=LDS.SR.CRM.WebResource.Dashboard.Core.Templates.Text(attributes['contact.firstname'])#",
                    title: "First Name",
                    attributes: {
                        "class": "gridColumn"
                    },
                    headerAttributes: {
                        "class": "gridHeader",
                        style: "font-weight: bold"
                    },
                    sortable: true
                },
                {
                    field: "attributes['contact.lastname']",
                    template: "#=LDS.SR.CRM.WebResource.Dashboard.Core.Templates.Text(attributes['contact.lastname'])#",
                    title: "Last Name",
                    attributes: {
                        "class": "gridColumn"
                    },
                    headerAttributes: {
                        "class": "gridHeader",
                        style: "font-weight: bold"
                    },
                    sortable: true
                },
                {
                    field: "attributes.scheduledend",
                    title: "Due Date",
                    template: "#=LDS.SR.CRM.WebResource.Dashboard.Core.Templates.Date(attributes.scheduledend)#",
                    attributes: {
                        "class": "gridColumnRightAlign"
                    },
                    headerAttributes: {
                        "class": "gridHeader",
                        style: "font-weight: bold"
                    },
                    sortable: true
                },
                {
                    field: "attributes.new_attemptcount",
                    template: "#=LDS.SR.CRM.WebResource.Dashboard.Core.Templates.Number(attributes.new_attemptcount)#",
                    title: "Contact Attempts",
                    attributes: {
                        "class": "gridColumnRightAlign"
                    },
                    headerAttributes: {
                        "class": "gridHeader",
                        style: "font-weight: bold"
                    },
                    sortable: true
                },
                {
                    title: "Last Progress Note",
                    attributes: {
                        "class": "gridColumnRightAlign"
                    },
                    headerAttributes: {
                        "class": "gridHeader",
                        style: "font-weight: bold"
                    },
                    sortable: false
                },
                {
                    hidden: true,
                    field: "attributes.regardingobjectid",
                    sortable: false
                },
                {
                    hidden: true,
                    field: "attributes.activityid",
                    sortable: false
                },
                {
                    hidden: true,
                    field: "logicalName",
                    sortable: false
                }
         ];
        var isSrTab = $("#" + LDS.SR.CRM.WebResource.Dashboard.Core.CurrentTab).hasClass("tab-sr");
        var isPefTab = $("#" + LDS.SR.CRM.WebResource.Dashboard.Core.CurrentTab).hasClass("tab-pef");
        var isMyTasksTab = $("#" + LDS.SR.CRM.WebResource.Dashboard.Core.CurrentTab).hasClass("tab-mytasks");
         
        if (isSrTab)
        {
            columns.push({
                command: [
                    {
                        name: "launchDialog",
                        text: "Launch Dialog",
                        click: LDS.SR.CRM.WebResource.Dashboard.Core.CommandActions.LaunchDialog,
                        className: "command"
                    }
                ],
                title: "Launch Dialog",
                height: 12,
                attributes: {
                    "class": "gridColumn"
                },
                headerAttributes: {
                    "class": "gridHeader",
                    style: "font-weight: bold"
                },
                sortable: false
            });
        }
        else if (isMyTasksTab)
        {
            columns.push({
                command: [
                    {
                        name: "openActivity",
                        text: "Open Activity",
                        click: LDS.SR.CRM.WebResource.Dashboard.Core.CommandActions.OpenActivity,
                        className: "command"
                    }
                ],
                title: "Open Activity",
                height: 12,
                attributes: {
                    "class": "gridColumn"
                },
                headerAttributes: {
                    "class": "gridHeader",
                    style: "font-weight: bold"
                },
                sortable: false
            });
        }
     
     
        return columns;
    }
  5. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 29 Oct 2013 Link to this post

    Hi Berel,

    There should not be a problem with making a function to return your columns array
    http://jsfiddle.net/ignaciofuentes/RTWF9/2/

    Do you have any errors showing up on your F12 tools?

  6. Berel
    Berel avatar
    3 posts
    Member since:
    Sep 2013

    Posted 29 Oct 2013 Link to this post

    Hi nikobellic,

    Thank you so much for your help on this.  So the reason it's not sorting is that I was pointing the field at an object and then returning the value in a template.  As a result, the sort method, which looks at the field not the returned template value, was not working.  However, now that I've fixed that I have another issue.  The reason that I had to use the template is that the service I'm getting this information from doesn't actually return an element if the field value is null, so I have to check if the object is defined and then return the value property of that object (see below).  The only way for sorting to work is to point the field at the value property - field: "attributes['contact.firstname'].value" - but then I get an error in the browser when that field is null since the value property is not defined, SCRIPT5007: Unable to get property 'value' of undefined or null reference.  I hope this makes some sense, do you have any ideas on the best way to address this?

    //Field Definition
                    {
                        field: "attributes['contact.firstname']",
                        template: "#=TextTemplate(attributes['contact.firstname'])#",
                        title: "First Name",
                        attributes: {
                            "class": "gridColumn"
                        },
                        headerAttributes: {
                            "class": "gridHeader",
                            style: "font-weight: bold"
                        },
                        sortable: true
                    },

    //Template
            TextTemplate: function(textField)
            {
                var textValue = "";
                if (typeof(textField) !== "undefined" && textField !== null)
                {
                    if (textField.value !== null)
                    {
                        textValue = textField.value;
                        return textValue;
                    }
                }
                return textValue;
            },

    Thanks,
    Berel
  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 30 Oct 2013 Link to this post

    Hello Berel,

    Indeed that is what will happen if on the field in the `attributes['contact.firstname']` chain is null. In this case you should normalize the data structure. This can happen by implementing DataSource.parse function. It will be executed every time the data source is feed with new data.

    Here is an proof of concept example for this: http://jsbin.com/OcoHaNU/1/edit

    Regards,
    Nikolay Rusev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready