Important Questions about kendoUI data methods and data conversion

[Chris]

We are considering about using kendo UI in our project. Here i came up with some problems:

$("#grid").kendoGrid({

    dataSource: {

        data:[

            {"ProductID": "1","ProductName": "name01", "UnitPrice": ['$33.55','$55.55','$23.55']},

            {"ProductID": "2","ProductName": "name02", "UnitPrice": ['xx','yy','zz']},

            {"ProductID": "3","ProductName": "name03", "UnitPrice": ['aa','bb','cc']}

        ]

    },

    selectable: "row",

    columns: ["ProductID", "ProductName", "UnitPrice"],

    dataBound: function(){

        $("#select").bind("click",function(){

            var $row = $("#grid").data("kendoGrid").select();

            var product = $("#grid").data("kendoGrid").dataItem($row).toJSON();

 

            alert(JSON.stringify(product));

             

            //what i got from alert is:

            /*           

             {"ProductID":"1",

              "ProductName":"name01",

              "UnitPrice":{

                  "0":"$33.55",

                  "1":"$55.55",

                  "2":"$23.55",

                  "_events": {"change":[null]},"length":3}}

            */

             

        });                

    }

});

As you see, from JSON.stringify(product), I get some Kendo added cruft like _events and change and length. On top of this, the value of UnitPrice has been converted to a dictionary/json object instead of its original array.  What I really need is to obtain the original data structure for that row.

Reason for such a need is because we are using CouchDB and we really need the data structure to remain the same and not have KendoUI Grid convert it to something else.

Thank you in advance!

​

[Dimo]

Hello Chris,

This problem has been fixed after the Q1 2012 release. Changes will take effect in the next official releases. Alternatively, license developershave access to internal builds that also contain the fix.

Regards,
Dimo
the Telerik team

[Chris]

Hi Dimo,

I am really desperate for the licensed version now.  But I need to be certain that we are referring to the same issue.

I realized that Arrays are being converted to Objects in the datasource.  Is there a way to obtain the original JSON with the Array instead of the ones the Kendo created with the Objects?  Does the licensed copy fix this issue?

Regards,
Chris Fan

[Dimo]

Hi Chris,

Yes, I confirm the issue is now fixed - if you call toJSON() to an observable array, you will obtain a true array.

Kind regards,
Dimo
the Telerik team

[Mark]

Hi Dimo,

I'm a Chris's colleague at work.  I wanted to double check on the implementation of toJSON().

If we have a data item that consists of arrays and objects and some other strings, if we do a toJSON() on the data item, would all the attributes of the data item be converted respectively (by means of recursion) OR do we have to loop through them one at a time and call toJSON().

Will be submitting a purchase order to our boss later in the afternoon.  Looking forward to it!! :)

Regards,
Mark Huang

[Dimo]

Hi Mark,

If you call toJSON() to a data item of various object types, its attributes will not be converted recursively, i.e. only the first (outermost) level will be. You will be able to call toJSON() to each attribute, if needed. However, if you use JSON.stringify() as in the examples above and below, you will obtain recursively converted objects to a string format. For example:

$("#grid").kendoGrid({
    dataSource: {
        data:[{
                "NumberField": 1,
                "StringField": "name01",
                "ArrayField": ['$33.55','$55.55','$23.55'],
                "ObjectField": {"a":"b1", "c":"d1"}
            },{
                "NumberField": 2,
                "StringField": "name02",
                "ArrayField": ['xx','yy','zz'],
                "ObjectField": {"a":"b2", "c":"d2"}
            }]
    },
    selectable: "row",
    columns: ["NumberField", "StringField", "ArrayField", "ObjectField"],
    dataBound: function(){
        $("#example").bind("click",function(){
            var $row = $("#grid1").data("kendoGrid").select();
            var product = $("#grid1").data("kendoGrid").dataItem($row).toJSON();

            alert(JSON.stringify(product));
        });
    }
});

The result is shown in the attached screenshot.

Regards,
Dimo
the Telerik team

[Mark]

Hi Dimo,

You mentioned previously that the toJSON thing will be fixed in the next public release.  Does the recent Q1 2012 SP1 (version 2012.1.515) - May 2012 contain this fix?  I read through the "What's new" in your blog but didn't see this getting fixed.  

Regards,
Mark Huang