Grid support for data in array form instead of object form

13 posts, 0 answers
  1. Doron
    Doron avatar
    8 posts
    Member since:
    Apr 2013

    Posted 04 Jun 2013 Link to this post

    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]
                    ])
                });
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 06 Jun 2013 Link to this post

    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!
  3. Doron
    Doron avatar
    8 posts
    Member since:
    Apr 2013

    Posted 31 Jul 2013 Link to this post

    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
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 31 Jul 2013 Link to this post

    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!
  5. Doron
    Doron avatar
    8 posts
    Member since:
    Apr 2013

    Posted 05 Aug 2013 Link to this post

    great thanks
  6. Jarle
    Jarle avatar
    4 posts
    Member since:
    Jun 2012

    Posted 16 Sep 2013 Link to this post

    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
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 16 Sep 2013 Link to this post

    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!
  8. Bryan
    Bryan avatar
    8 posts
    Member since:
    Jul 2014

    Posted 18 Apr 2017 in reply to Atanas Korchev Link to this post

    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.            }
  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 20 Apr 2017 Link to this post

    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.
  10. Bryan
    Bryan avatar
    8 posts
    Member since:
    Jul 2014

    Posted 21 Apr 2017 in reply to Boyan Dimitrov Link to this post

    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?
  11. Bryan
    Bryan avatar
    8 posts
    Member since:
    Jul 2014

    Posted 21 Apr 2017 in reply to Boyan Dimitrov Link to this post

    i'm really sorry for the late reply.
  12. Bryan
    Bryan avatar
    8 posts
    Member since:
    Jul 2014

    Posted 21 Apr 2017 in reply to Boyan Dimitrov Link to this post

    i'm really sorry for the late reply.
  13. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 25 Apr 2017 Link to this post

    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.
Back to Top