Kendo Grid with Column Templates not sorting correctly

[Berel]

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");

[Ignacio]

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?

[Berel]

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;
}

[Ignacio]

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?

[Berel]

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

[Nikolay Rusev]

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

[Greeshma]

I had a look at the Dojo Demo and made some changes to have prefix to the maskedtext. But on the first load (if there are no match to the masked Text) in this example an empty string , the prefix does not appear until unless clicked on the input. This causes a problem because the input should have the prefix regardless of any event occurring on it.

Is there any way I can have the input populated with the prefix on load if the value has not match in masked text.

http://dojo.telerik.com/UbiWAPAV/2

 

[Alex Hajigeorgieva]

Hi, Greeshma,

I have already responded to you in the private ticket that you have submitted but I will paste my response here as well:

____________________________________________

The behaviour of a Kendo UI MaskedTExtbox is such by design when the widget has no value - it shows as a regular text input. The mask is revealed on focus and hidden on blur.

On first load, you could check if the mask has value and se the value to the mask:

http://dojo.telerik.com/UbiWAPAV/3

if(!$("#masked").val()){
 $("#masked").val("SA__-___");
}

*in the context of the grid, you can use the edit event handler

Alternatively, you can provide a placeholder as shown in this how to article:

https://docs.telerik.com/kendo-ui/controls/editors/maskedtextbox/how-to/custom-placeholder.html

If you feel tht the mask should always be shown on blur and focus, I would suggest we open a feature request on your behalf. Our Kendo Angular and React widgets already implement this behaviour and I can see how that feels like better UX.

Let me know if you would like that and I can convert this ticket to a public feature request so people can vote or it.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik