This is a migrated thread and some comments may be shown as answers.

Grouping on complex type throws JS error

6 Answers 306 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sachindra
Top achievements
Rank 1
Sachindra asked on 12 Dec 2012, 09:28 AM
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

6 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 12 Dec 2012, 05:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Arne
Top achievements
Rank 1
answered on 28 Jul 2015, 01:20 PM

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

0
Alexander Valchev
Telerik team
answered on 30 Jul 2015, 09:01 AM
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:

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Licensing
Top achievements
Rank 1
answered on 22 Sep 2015, 03:10 PM
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. 
0
Boyan Dimitrov
Telerik team
answered on 24 Sep 2015, 08:49 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Licensing
Top achievements
Rank 1
answered on 24 Sep 2015, 02:07 PM

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

Tags
Grid
Asked by
Sachindra
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Arne
Top achievements
Rank 1
Licensing
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or