Grouping on complex type throws JS error

[Sachindra]

Hi,
  I have a kendo grid similar to the one in this example, with an difference that I need to have the columns groupable. I created a jsFiddle with this here http://jsfiddle.net/sachindra_nath/guN8G/ that demonstrates the problem.

When you try to group by the complex type - the Category column, this results into a js error - Uncaught SyntaxError: Unexpected identifier. Digging into the kendo code, I see that the data format for this column is a JS Object and when the framework attempts to create a sort object, it uses the object value rather than a property within the object. Is there a way to configure a property to use?

"Category": { "CategoryID": 1,  "CategoryName": "Beverages" }

In my application, I have many similar grids that use remote data binding with server filtering and sorting and I use the jsonp data. The above issue can be fixed if I define the complete path for the field attribute under columns. For eg:- Instead of using { field: "Category", title: "Category", ... I use { field: "Category.CategoryID", title: "Category", ...
This however changes the filters and the sorts behavior as well.

Please suggest a way out.
regards
Sachindra

[Alexander Valchev]

Hello Sachindra,

By design the DataSource and respectively the Grid does not support nested data structures.

It is possible to display the nested fields through templates like in the provided example, but the other functionality such as grouping, filtering and sorting will not work. Please accept my apology for the inconvenience.

Regards,
Alexander Valchev
the Telerik team

[Arne]

Hello,

Has there been any development that will allow this? We are able to get sorting working by using something similar to the code below, but we cannot find a way to get grouping or filtering to work.

sortable:
  compare: (a,b)->
    return b-a

[Alexander Valchev]

Hi Arne,

Kendo Grid's dataSource design did not changed - it still operates with flat data and does not support grouping on complex fields.

In case you want to group in a specific field of the complex item you may use the following approach:

• http://dojo.telerik.com/uLACE

Regards,
Alexander Valchev
Telerik

 

 

[Licensing]

Thanks, Alexander. Will the approach you mentioned work when you need to do a post-back to the server? Will it use the display value (foo.a) or the ID value (foo.b)? we need to send the ID not the display value back to the server on POST updates. 

[Boyan Dimitrov]

Hello Kevin,

The member field of the GroupDescriptor in this case should be "bar.a", since you are grouping by the "bar.a" field. 

For example in the Grid / Editing custom editor demo if you bind the column to the Category.CategoryName and group by this field: 

columns.Bound(p => p.Category.CategoryName).EditorTemplateName("ClientCategory").Width(160);

The member field of the GroupDescriptor will show "Category.CategoryName". 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Licensing]

Hi Boyan,

I was able to make this work in JavaScript by modifying this dojo (http://dojo.telerik.com/OKOjU). If I set the field to Category.CategoryName with a template as Category.CategoryName. For the input binding in the editor, I set the text field to CategoryName, the value field to CategoryID, then changed the data-bind value to Category. Using Category.CategoryName as the data-bind value updated the model with the CategoryID. Here is the code:

$(document).ready(function () {
  var dataSource = new kendo.data.DataSource({
     pageSize: 20,
     data: products,
     autoSync: true,
     schema: {
         model: {
           id: "ProductID",
           fields: {
              ProductID: { editable: false, nullable: true },
              ProductName: { validation: { required: true } },
              Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
              UnitPrice: { type: "number", validation: { required: true, min: 1} }
           }
         }
     },
    transport: {
            read: function(e) {
        console.log('read')
        console.log(e)
        e.success(products)
      },
      update: function (e) {
        console.log('update')
        console.log(e)
      }
    }
  });

  $("#grid").kendoGrid({
      dataSource: dataSource,
      pageable: true,
      height: 550,
      toolbar: ["create"],
      columns: [
          { field:"ProductName",title:"Product Name" },
          { field: "Category.CategoryName", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "###=Category.CategoryName#" },
          { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
          { command: "destroy", title: " ", width: "150px" },
            { command: "edit", title: " ", width: "150px" }
      ],
      editable: 'popup',
    groupable:true
  });
});

function categoryDropDownEditor(container, options) {
console.log(options);
var field = options.field.replace('.CategoryName','');
//field is Category
  $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + field + '"/>')
      .appendTo(container)
      .kendoDropDownList({
          autoBind: false,
          dataSource: {
              type: "odata",
              transport: {
                  read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"

              }
          }
      });
}