Kendo Grid - sort on column bound to an object

13 posts, 0 answers
  1. Michael
    Michael avatar
    6 posts
    Member since:
    May 2011

    Posted 08 Jan 2013 Link to this post

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


     
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 10 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Alex
    Alex avatar
    26 posts
    Member since:
    Jun 2011

    Posted 19 Mar 2013 Link to this post

    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
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Alex
    Alex avatar
    26 posts
    Member since:
    Jun 2011

    Posted 21 Mar 2013 Link to this post

    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

     

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Alex
    Alex avatar
    26 posts
    Member since:
    Jun 2011

    Posted 22 Mar 2013 Link to this post

    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
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 25 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Alex
    Alex avatar
    26 posts
    Member since:
    Jun 2011

    Posted 25 Mar 2013 Link to this post

    Hi,

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

    Thanks

    Alex
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 25 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Alex
    Alex avatar
    26 posts
    Member since:
    Jun 2011

    Posted 25 Mar 2013 Link to this post

    Thank you.
  13. Roatin Marth
    Roatin Marth avatar
    65 posts
    Member since:
    Nov 2007

    Posted 07 Nov 2013 Link to this post

    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).



  14. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Nov 2013 Link to this post

    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)
    Please let me know in case I am missing something. Thank you in advance.

    Regards,
    Alexander Valchev
    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