Problem in Groupable

[Alex]

I have written below code in Kendo Grid change event.

change: function(e) {
    var item = e.items[0];
    var stockQty = item.get("columnName");

}

Now, when I try to drag any column in header for "Group By", the grid crashes. When I remove this line of code, it is working fine.

var stockQty = item.get("columnName");

Can anybody help me out on this. Thanks in advance.

Regards,
Komail Noori

[Rosen]

Hello Komail,

I suspect you are referring to DataSource change event instead of Grid's one.

The code in question will not work as when grouped the items field will contain the actual group items not the flat data. Thus, you will need to "drill" into group item items field to get to the data record.

dataSource: {
  change: function(e) {
    var item = e.items[0];
    if (this.group().length) {
      item = getFirstItem(item);
    }
    var stockQty = item.get("columnName");
    alert(stockQty);
  }
}

function getFirstItem(group) {
  if (group.hasSubgroups) {
    return getFirstItem(group.items[0]); // drill down the nested group items if grouped by multiple fields
  }
  return group.items[0]; // return the first data item
}

Regards,
Rosen
Telerik

[Alex]

Hi Rosen,

Thanks for the help. It is working now but this cause another problem. Once the grid is grouped for any column, and then I try to edit the record, it is giving following error on this line of code

Error: Uncaught TypeError: Cannot read property '0' of undefined

Code:

var item = e.items[0];

Please suggest.

Regards,
Komail Noori

[Rosen]

Hi Komail,

It will not work during editing as items argument will not contain the grouped result in this case. Thus, you may use the action argument to correct the flow. For example:

change: function(e) {
    var item = e.items[0];
    if (this.group().length && e.action !== "itemchange") {
      item = getFirstItem(item);
    }
    var stockQty = item.get("columnName");
    alert(stockQty);
  }

Regards,
Rosen
Telerik