Sort Grid when using templates

[Victor]

I have a grid that builds from Sharepoint list... the problem I have is that in my list (data table) I have a value that is recorded as an array, I know I can format the result on the grid using a template, however when I do this I can use the sort function. I think that it's because when the grid builds it sees that the results are [Object object] and not the final result.

 

My code is something like this 

 

var currentContext = new SP.ClientContext.get_current();
    var targetList = currentContext.get_web().get_lists().getByTitle('Flujos');
    var camlBuilder = new CamlBuilder();
    var query = camlBuilder.Where().TextField("Activa").EqualTo("true").ToCamlQuery();

ListItems = targetList.getItems(query);
    currentContext.load(ListItems);
    currentContext.executeQueryAsync(Succeeded, Failed);

    function Succeeded() {
        var listEnumerator = ListItems.getEnumerator();

        var solEntries = [];
        while (listEnumerator.moveNext()) {
            var item = listEnumerator.get_current();
            var entry = item.get_fieldValues();
            solEntries.push(entry);
          
        }
        $("#grid").kendoGrid({

            culture: "es-CL",
            toolbar: ["excel"],
            excel: {
                fileName: "GerenciaPersonas_" + fec1 + ".xlsx",
                filterable: true
            },
            dataSource: solEntries,
            /*pageable: {
                scrollable: true,
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },*/
            scrolling: true,
            sorting: {
                multiple: true
            },
            height: "500px",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            paging: false,
            filterable: {
                mode: "row",
            },
            selection: {
                type: "row",
                multiple: true,
                toggle: false
            },
            columns: [
                { field: "Solicitud", title: "Solicitud", template: "#= formatSolicitud(data) #", width: "90px", filterable: false },
                { field: 'Created', title: 'Creada', width: "70px", filterable: false, format: "{0:dd-MM-yyyy}" },
                { field: 'Activa', title: 'Activa', width: "50px", filterable: false }
            ]
        });

        var grid = $("#grid").data("kendoGrid");
    } // FIN SUCCEED

 

After this the results are like this : Image of the Result

I know I can use a template with this function

function formatSolicitud(o) {
    var firstFieldName = Object.keys(JSON.parse(JSON.stringify(o.Solicitud)))[1];
    var object = JSON.parse(JSON.stringify(o.Solicitud));
    var res = object[firstFieldName];
    return res;
}

How ever I can't use the sort function, it just doesn't sort at all, and I think that it's because the grid saw that the results where [Object object] before being transformed.

 

I would love some help on this topic.

 

 

[Alex Hajigeorgieva]

Hello Victor,

It is possible to sort a Kendo UI Grid column bound to a nested object. There are two different scenarios that I can think of:

1) A nested property with no special templating logic. 
2) A nested property where custom sort is required

1) In this case, you can use the data source schema fields from configuration setting to map the new property:

dataSource: {
 data: solEntries,
 schema:{
  model:{
   fields: {
    Solicitud: { from: "Solicitud.firstNameField" }
   }
  }
 }
}

Here is a runnable example:

http://dojo.telerik.com/efize

2) With the help of a custom column sortable compare function:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.sortable.compare

Here is a runnable example:

http://dojo.telerik.com/ufeGE

Finally, there are a few settings of the provided grid configuration which are not needed, so I am going to use this opportunity to provide you with some feedback:

culture: "es-CL",
scrolling: true,
sorting: {
 multiple: true
},
paging: false,
selection: {
 type: "row",
 multiple: true,
 toggle: false
},

All of the above have a slightly different name and will be ignored by the Kendo UI Grid. 

Here are the API references:

- culture - will be ignored because it is not a supported configuration
- pageable: false by default so not needed
- scrollable: true by default so not needed
- sorting - can be removed as it is already set with the sortable configuration
- selection should be set to a string as selectable

selectable: "multiple, row"

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Victor]

Thank you for the reply, it kinda works.

Sorts the column but it's like compares every other row.

First Load

First Sort

Second Sort

 

I used the compare function you suggested and it looks like this.

$("#grid-tareas").kendoGrid({

            dataSource: solEntries,
            height: "500px",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            filterable: {
                mode: "row"
            },
            columns: [
                { field: 'ID', title: 'ID', width: '50px', sortable: true, filterable: false },
                {
                    field: 'Solicitud', title: 'Solicitud', template: '#= Solicitud.$2d_1 #', width: '200px',
                    sortable: {
                        compare: function (a, b) {
                            return a.Solicitud.$2d_1 > b.Solicitud.$2d_1;
                        }
                    }, filterable: {
                        cell: {
                            operator: "contains",
                            showOperators: false
                        }
                    }
                }
            ]
        });

[Alex Hajigeorgieva]

Hello Victor,

I believe this is due to the compare function logic. If you change the operator, the sortable compare works as expected:

compare: function (a, b) {
  return a.Solicitud.$2d_1 - b.Solicitud.$2d_1;
}

Here is the Dojo which I tested with:

http://dojo.telerik.com/@bubblemaster/oPOviS/2

Kind Regards,
Alex Hajigeorgieva
Progress Telerik