Grid support for data in array form instead of object form

[Doron]

Assuming I have the following HTML element
<div id="grid" />
the following script works:

$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});

I would like the following to work instead (and it doesn't):

$("#grid").kendoGrid({
columns: [
{ field: 0 },
{ field: 1 }
],
dataSource: [
[ "Jane Doe", 30 ],
[ "John Doe", 33 ]
]
});

I can make it work using a workaround like the sample below, but this is an ugly workaround - any chance this could be placed into the framework?
The reason is that JSON that contains array or arrays cost much less to transfer then a JSON with array of objects with named fields

function convertArrayToObjects(arrayOfArrays) {
            if (!Array.isArray(arrayOfArrays))
                return arrayOfArrays;

            var arrayOfObjects = [];
            arrayOfArrays.forEach(function (arr) {
                if (!Array.isArray(arr))
                    arrayOfObjects.push(arr);
                else { // need to convert array to object
                    var obj = {};
                    var hasOwnProp = Object.prototype.hasOwnProperty;
                    for (var k in arr) {
                        if (+k === (k & 0x7fffffff) && hasOwnProp.call(arr, k)) {
                            obj['_'+k] = arr[k];
                        }
                    }

                    arrayOfObjects.push(obj);
                }
            });

            return arrayOfObjects;
        }
$("#grid").kendoGrid({
                columns: [
                  { field: "_0" },
                  { field: "_1" }
                ],
                dataSource: convertArrayToObjects([
                  ["Jane Doe", 30],
                  ["John Doe", 33]
                ])
            });

[Alexander Valchev]

Hello Doron,

I am afraid that what you would like to achieve is not possible - the DataSource component is designed to work with array of objects with named fields. Providing support for array or arrays is not in our immediate plans. Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
Telerik

[Doron]

Too bad - from looking at my jsons - this will reduce the mount of characters traveling between the client and the server by at least 70%
supporting this can speed up work for all kendo controls that use datasource
i agree that name binding is easier to code - but if you implement this, you can use your wrappers to perform the name binding and work at the JS level with position binding and get a faster websites as a result - without any change in how your wrappers are used

[Atanas Korchev]

Hi Doron,

 After some fiddling we managed to get it to work to some extend: http://jsbin.com/utaquf/1/edit

 Some grid features will probably not work though - editing, selection.

Regards,
Atanas Korchev
Telerik

[Doron]

great thanks

[Jarle]

Your jsbin sample works fine when fetching data - but the editing feature seems to be broken:

http://jsbin.com/utaquf/7/edit?html,js,output

When binding to an array I get no editor event - you can try clicking on the grid cells. Do you have any suggestions how to get edit mode working for arrays?

Regards

[Atanas Korchev]

Hi,

 No, currently editing can't support this mode. It was one of the things which I mentioned in my original response:

 Some grid features will probably not work though - editing, selection.

 I recommend using the data source schema.data option to convert your JSON from nested arrays to objects: http://jsbin.com/utaquf/9/edit

Regards,
Atanas Korchev
Telerik

[Bryan]

first scenario: pageSize:5

1. my grid is displaying 5 rows. on the right side of grid footer it says 1-3 of 3 items. how??

2. actual result have seven data items still grid doesn't allow me to go to the next page.

second scenario: pageSize:2

1. in the right side of grid footer it says 1-2 of 3 items, as soon as I clicked on second page it says 3-4 of 7 items.

i really do not understand why grid is behaving so weird. what am I doing wrong?

i have attached docx files for both scenario and as well as in what form my data is coming. please take a look at those pictures.

the below one is my grid. please let me know what is wrong i'm doing.

001.$.ajax({
002.        type: "GET",
003.        url: "/Actionables/SearchSubmissions/",
004.        data: {
005.            filters: param,
006.            moduleToSearch: moduleID,
007.            moduleItemToSearch: moduleItemID,
008.        },
009.        success: function (result) {
010.            var defer = $.Deferred();
011.            function confirmation(result) {
012.
013.                if (result.length > 1) {
014.
015.                    $('#field' + questionID).append('<div id=dialog></div>');
016.                    $("#dialog").append('<div id=grid></div>');
017.
018.                    $("#dialog").kendoDialog({
019.                        modal: true,
020.                        visible: false,
021.                        draggable: true,
022.                        closable: false,
023.                        title: "Please Select One Submission",
024.                        maxWidth: 500,
025.                        //maxHeight:300,
026.                        animation: {
027.                            open: {
028.                                effects: "slideIn:down fadeIn",
029.                                duration: 500
030.                            },
031.                            close: {
032.                                effects: "slide:up fadeOut",
033.                                duration: 500
034.                            }
035.                        },
036.                        actions: [
037.                            { text: 'OK', primary: true, action: onOK }
038.                        ]
039.                    });
040.
041.                    $("#grid").kendoGrid({
042.                        dataSource: {
043.                           data: result,
044.                            schema: {
045.                                data: function (result) {
046.                          return $.map(result, function (item) {
047.                           return $.map(item, function (innerData) {
048.                            for (var i = 0; i < displayFields.length; i++){
049.                            if (displayFields[i] == innerData.FieldIDString)
050.                            {
051.                               return {
052.                              EntryGroupID: innerData.EntryGroupID,
053.                              FieldTextString : innerData.FieldTextString,
054.                              EntryValue: innerData.EntryValue
055.                                     }
056.                                           }
057.                             }
059.                           });
060.                       });
062.                      }
063.                     },
064.                     pageSize: 2,
065.                            group: { field: "EntryGroupID" }
066.                        },
067.                        filterable: {
068.                            mode: "row"
069.                        },
070.                        pageable: {
071.                            refresh: true,
072.                        },
073.                        noRecords: {
074.                            template: "No records to display"
075.                        },
076.                        groupable:false,
077.                        //scrollable: true,
078.                        selectable: true,
079.                        columns: [{
080.                            field: "EntryGroupID",
081.                            title: "Submissions",
082.                            filterable: {
083.                                cell: {
084.                                    operator: "contains"
085.                                }
086.                            }
087.                        }, {
088.                            field: "FieldTextString",
089.                            title: "Questions",
090.                            filterable: {
091.                                cell: {
092.                                    operator: "contains"
093.                                }
094.                            }
095.                        }, {
096.                            field: "EntryValue",
097.                            title: "Answers",
098.                            filterable: {
099.                                cell: {
100.                                    operator: "contains"
101.                                }
102.                            }
103.                        }]
104.                    });
105.
106.                    var wnd = $("#dialog").data("kendoDialog");
107.                    wnd.wrapper.find('.k-dialog-title').css('background', CIMSFields.backgroundColour).css('color', CIMSFields.textColour).css('width','100%').css('text-align','center');
108.                    wnd.open().center(true);
109.
110.                    function onOK(e) {
111.                        var data = [];
112.                        var grid = $("#grid").data("kendoGrid");
113.                        var selectedItem = grid.dataItem(grid.select());
114.                        if (selectedItem != null) {
115.                            $.map(result, function (item) {
116.                          if (selectedItem.EntryGroupID == item[0].EntryGroupID) {
117.                                    data.push(item);
118.                                    defer.resolve(data);
119.                                }
120.                            });
121.                        }
122.                        else {
123.                            defer.resolve(data);
124.                        }
125.                        wnd.close();
126.                    }
127.                }
128.                else
129.                {
130.                    defer.resolve(result);
131.                }
132.                return defer.promise();
133.            }

[Boyan Dimitrov]

Hello Bryan,

Could you please confirm that you are not initializing the Kendo UI Grid more than once on same element? This is possible if more than one request is made, because I noticed the Kendo UI Grid is initialized in the success callback of the ajax request. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Bryan]

there is only one initialization of grid in the success of Ajax request. I'm not initializing the grid outside elsewhere. so it's not a good thing to initialize grid in the success of ajax?

[Bryan]

i'm really sorry for the late reply.

[Bryan]

i'm really sorry for the late reply.

[Boyan Dimitrov]

Hello,

I guess that the success callback of the ajax request is called more than one time during the user interaction with the application. The best way we can help you out is to provide a sample dojo example that replicates the described problem. In the help section of the dojo there are some instructions on how to simulate an ajax request. 

Regards,
Boyan Dimitrov
Telerik by Progress