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

Grid support for data in array form instead of object form

12 Answers 981 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Doron
Top achievements
Rank 1
Doron asked on 04 Jun 2013, 08:59 AM

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

12 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 06 Jun 2013, 07:23 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doron
Top achievements
Rank 1
answered on 31 Jul 2013, 10:53 AM
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
0
Atanas Korchev
Telerik team
answered on 31 Jul 2013, 12:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doron
Top achievements
Rank 1
answered on 05 Aug 2013, 08:05 AM
great thanks
0
Jarle
Top achievements
Rank 1
answered on 16 Sep 2013, 08:48 AM
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
0
Atanas Korchev
Telerik team
answered on 16 Sep 2013, 10:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bryan
Top achievements
Rank 1
answered on 18 Apr 2017, 11:33 PM

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.            }
0
Boyan Dimitrov
Telerik team
answered on 20 Apr 2017, 04:09 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Bryan
Top achievements
Rank 1
answered on 21 Apr 2017, 03:42 PM
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?
0
Bryan
Top achievements
Rank 1
answered on 21 Apr 2017, 03:48 PM
i'm really sorry for the late reply.
0
Bryan
Top achievements
Rank 1
answered on 21 Apr 2017, 03:48 PM
i'm really sorry for the late reply.
0
Boyan Dimitrov
Telerik team
answered on 25 Apr 2017, 11:47 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Doron
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Doron
Top achievements
Rank 1
Atanas Korchev
Telerik team
Jarle
Top achievements
Rank 1
Bryan
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or