In a DevExtreme (grouped) dxList can I change the "items" to "elements" of the input array?

Question

I have a grouped DevExtreme dxList. My input data array coming from the server looks like this:

inputArray = [{
            label: "group1",
            elements: [{ text: "a" }, { text: "b" }]
        },
        {
            label: "group2",
            elements: [{ text: "a" }, { text: "b" }]
        }];

So I have "elements" instead of "items" and this won't work:

<div data-bind="dxList: { dataSource: inputArray, grouped: true }"></div>

Is there a configuration way to tell the dxList to use "elements" instead of "items"?

Answer 1

Use DataSource map function. http://js.devexpress.com/Documentation/ApiReference/Data_Library/DataSource/Configuration/?version=14_2#map

dataSource = new DevExpress.data.DataSource({
        store: inputArray,
        map: function (item) {
            return {
                key: item.label,
                items: item.elements
            };
        }
    });

See following fiddle http://jsfiddle.net/tabalinas/bjqmbume/