Sort Grid when using templates

4 posts, 0 answers
  1. Victor
    Victor avatar
    2 posts
    Member since:
    Jun 2016

    Posted 17 Jul 2017 Link to this post

    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.

     

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 19 Jul 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Victor
    Victor avatar
    2 posts
    Member since:
    Jun 2016

    Posted 01 Aug 2017 Link to this post

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

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 03 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top