Kendo Grid - sort on column bound to an object

[Michael]

 
Hi

I have a kendo grid with sorting enabled.  I am trying to sort on a column with a field called "Document_Category"

In the model Document_Category is an object that is comprised of 2 properties: Document_Category_Name (string) and  Document_Category_ID (int).  I have this field setup as an object this way so I can bind the id to the selected item of a dropdown list in the editor template

How can I can I configure the grid to sort this column by the Document_Category_Name property of the object that the field is bound to.

Is this possible? If not is there another way to bind to a dropdown list?

My code is below; thanks


$("#grid").kendoGrid({

             columns: [
                    { title: " ", template: "#= doclink(data) #", width: 31 },


                    { field: "Document_Category", title: "Category", width: "150px", editor: categoryDropDownEditor, template: "#=Document_Category.Document_Category_Name#" },
                    { field: "DOCUMENT_TITLE", title: "Title" },
                    { field: "DOCUMENT_FILE_NAME", title: "File Name" },
                    { field: "DOCUMENT_DESCRIPTION", title: "Description" },

                    { field: "DOCUMENT_FILE_SIZE", title: "File Size" },
                    { field: "tags", title: "Tags" },
                    { field: "DOCUMENT_CREATION_DATE", title: "Creation Date", format: "{0:dd-MMM-yyyy}" },

                    { command: "destroy", title: "Delete", width: "110px" }
                ],
             pageable: {
                 info: true
             }, // enable paging
             filterable: false, // enable filtering
             sortable: true, // enable sorting
             editable: true, // enable editing
             toolbar: ["save", "cancel"], // specify toolbar commands

             dataSource: {

                 serverPaging: false,
                 serverSorting: false,
                 serverFiltering: false,
                 pageSize: 5,
                 schema: {
                     data: "Data",
                     total: function (res) {
                         return res.total;
                     },
                     model: {
                         id: "DOCUMENT_ID",
                         fields: {


                             DOCUMENT_ID: { editable: false },
                             Document_Category: { editable: true },
                             DOCUMENT_TITLE: { type: "string" },
                             DOCUMENT_DESCRIPTION: { type: "string" },
                             tags: { type: "string" },
                             DOCUMENT_FILE_NAME: { type: "string", editable: false },
                             DOCUMENT_FILE_SIZE: { type: "string", editable: false },
                             DOCUMENT_CREATION_DATE: { type: "date", editable: false }

                         }
                     }
                 },
                 //  pageable: true,
                 batch: true,
                 transport: {

                     read: {
                         url: "GetDocuments?category_id=-1",
                         contentType: "application/json; charset=utf-8",
                         type: "POST"
                     },
                     update: {
                         url: "Update", service.
                         contentType: "application/json; charset=utf-8",
                         type: "POST"
                     },
                     destroy: {
                         url: "Destroy",
                         contentType: "application/json; charset=utf-8",
                         type: "POST"
                     },
                     parameterMap: function (data, operation) {
              

                         if (data.models) {
                             return JSON.stringify({ documents: data.models });
                         } else if (operation == "read") {
                             //Page methods always need values for their parameters

                             data = $.extend({ sort: null, filter: null }, data);

                             return JSON.stringify(data);
                         }
                     }
                 }
             }
         });
     });


     function categoryDropDownEditor(container, options) {

         $('<input data-text-field="Document_Category_Name" data-value-field="Document_Category_ID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: category_items // array of document categories
                        });
     }


 

[Alexander Valchev]

Hi Michael,

Generally speaking the DataSource supports flat data which is why some of the functionality such as sorting, filtering, etc. does not work with nested objects.

As a workaround I can suggest to bind the column to Document_Category.Document_Category_Name which will fix the sorting. However in this case, when the user edits through the DropDown Grid will display the Document_Category_ID value.

To avoid this you may omit the binding of the editor. The downside is that the DropDown will not have initially selected value. Also you will have to modify the Grid's record manually (the editor is not bound to the model any more).

To demonstrate the solution I created a small example.

All the best,
Alexander Valchev
the Telerik team

[Alex]

Dear Support,

The sample that you provided does not work, not even for the sorting part. Click on the Category few times will mess up the sort order.
Do you have another solution?

Thank  you
Alex

[Alexander Valchev]

Hi Alex,

I did not manage to reproduce the sorting issue which you described. Could you please check the screen cast and let me know what I am missing? Does the problem occur only in a specific browser?

Kind regards,
Alexander Valchev
the Telerik team

[Alex]

Hi
I am using Chrome Version 25.0.1364.172 m. 
I also see that you have the same issue. Try to do it slowly. Click on Category once, twice and then the third time you will see it.

Alex

 

[Alexander Valchev]

Hi Alex,

At the third click the data will be unsorted and appear in the initial order. Here is a screen cast taken with Chrome.

Kind regards,
Alexander Valchev
the Telerik team

[Alex]

Hi,

Why the data is unsorted at the third click?  It is not consistent with Kendo sorting for non-object type column sorting (i.e. string type column)

Thanks,
Alex

[Alexander Valchev]

Hi Alex,

I tested the behaviour on this demo (first column is of type string) and on my end it seems to be consistent.
If you would like to disable unsorting, please use sortable.allowUnsort option.

Kind regards,
Alexander Valchev
the Telerik team

[Alex]

Hi,

It is not consistent with your Kendo sorting demo
http://demos.kendoui.com/web/grid/sorting.html

Thanks

Alex

[Alexander Valchev]

Hi Alex,

As I explained in my previous reply, the behaviour can be configured via allowUnsort option. If you pay attention to the source of the demo, you will notice that the first Grid does not allow unsorting. The second one does. Please check the screen cast: http://screencast.com/t/hmJi7abC

All the best,
Alexander Valchev
the Telerik team

[Alex]

Thank you.

[Roatin Marth]

What about if the object bound to the column is nullable and in some rows that underlying column object is null?

When I try to sort a column that has null objects, I get the following javascript error in Kendo.min.js.

TypeError: d.Application is null (where Application is the object that represents the column).

[Alexander Valchev]

Hello Roatin,

Which Kendo UI version do you use? This sounds like an old bug which is fixed in the latest releases.
Here is a working example which uses Q2 Sp release (2013.2.918)

• http://jsbin.com/EzAbEtaL/2/edit
  
  

Please let me know in case I am missing something. Thank you in advance.

Regards,
Alexander Valchev
Telerik