Grouping a grid using knockout-kendo

Question

Using the knockout binding syntax in knockout-kendo, is it possible to define how the data should be grouped? Ideally I'd like to disable the user from grouping and perform the grouping via the binding (or perhaps I will need to create a binding to do this?)

Update:

This seems to work fine if I define my property as a kendo.data.DataSource

var dataSource = new kendo.data.DataSource({
    data: response,
    // group by the "category" field
    group: { field: "category" }
});

Best I can tell, it doesn't appear to me like the knockout-kendo library supplies a hook to feed additional optional parameters to the datasource that it creates for you... So there is no way to supply the "group" modifier to a non-kendo.data.DataSource that you pass in via the simplified, or options syntax.

What are you using as the data in your binding? A kendo.data.DataSource or a ko.obsrevableArray. Because default grouping can be only configured for a kendo.data.DataSource or you need to manually group your data in a format what the kendogrid expects... — nemesv
it's an ko.observable, and I'm binding via knockout-kendo. What kind of format will kendoUI interpret as grouping? Currently the javascript object is flat, but I could easily change that. — Shaun Rowan
I am taking a look at this: kendoui.com/forums/kendo-ui-framework/data-source/… looks promising... — Shaun Rowan

nemesv nemesv · Accepted Answer · 2013-10-15T05:04:45

If you don't want to use a kendo.data.DataSource directly as your data (but in this case I think you should) then one possible (altough kind of hacky) solution is to use the widget option in your binding.

When you are specifing a widget observable property KO-Kendo will set its value with the created Kendo widget.

<div data-bind="kendoGrid: { data: items, widget: widget }"> </div>

Then you can subscribe on the widget change event and set the grouping on the datasource:

this.widget = ko.observable();

this.widget.subscribe(function (value) {
   value.dataSource.group({ field: 'category' });
});

Demo JSFiddle.

Grouping a grid using knockout-kendo

1 Answers