JSON data not binded to grid

[René]

Hello,

I have a simple question - how to bind data to grid. I have service that returns JSON data as this one.

01.<div id="example" class="k-content">
02.    <div id="grid"></div>
03.
04.    <script>
05.      var test = [
06.        {
07.           "ID":1,
08.           "ISIN (SML)":"test"
09.        }
10.      ]
11.
12.
13.        $(document).ready(function() {
14.            $("#grid").kendoGrid({
15.                dataSource: {
16.                    data: test
17.                }
18.            });
19.        });
20.    </script>
21.</div>

Tried to bind it to grid, but it doesn't work. I know it is because of field "ISIN (SML)" name, and grid is trying to create property with this name. But how to do it? I can't change service I'm consuming. Data are dynamic and field name is the same as column name.

Regards
René

[Faten]

Hi Rene,

The problem is that your data field names contain special characters. In your case, they are space and parentheses. You can fix this problem by:

Using field names without special characters. One way is to replace special characters in field names with underscores. For example:

Code:

   <div id="example" class="k-content">
            <div id="grid"></div>

          <script>
      var test = [
                  {
                     "ID":1,
                     "ISI_SML":"test"
                  }
                 ]
        
      $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    data: test
                }
              ,
              columns: [
                         "ID",
                        { field: "ISI_SML", title: "ISIN (SML)"}
                       ]
            });
        });
    </script>
        </div>


Hope this will help!

Regards,
Faten
Telerik

 

 

[René]

Hello,

yes, you are right, I need to get rid of special characters in field names. But problem is, that all data are provided by service and this "key" in JSON is used for column name. And all data are dynamic. I don't know what exactly will service provide. So I need some "transformation" before binding. Something to auto create fields and bind data to field titles. I can't use column and field definition. No column is fixed. All I have is Url to service, or some json data object. That's all.

Regards
René

[Rosen]

Hi Raptor,

You may use the DataSource's schema parse function to process the response before it is read by the DataSource. Similar to the following:

<div id="grid"></div>

   <script>
     var test = [
       {
          "ID":1,
          "ISIN (SML)":"test"
       }
     ]


       $(document).ready(function() {
           $("#grid").kendoGrid({
               dataSource: {
                 schema: {
                   parse: function(data) {
                     return $.map(data, function(x) {
                       var result = {};
                       for (var i in x) {
                         result[i.replace(/[\|&;\$%@"<>\(\)\+,]/g, "").replace(/\s/g, "_")] = x[i];
                       }
                       return result;
                     });
                   }
                 },
                 data: test
               }
           });
       });
   </script>

Note that you may need a more complex processing depending on the structure of the data.

Regards,
Rosen
Telerik

 

 

[René]

Hello,

well, parse function is the way how to rename columns. But I need column headers as provided in JSON object. So 2nd column title must be "ISIN (SML)", not "ISIN__SML_" or other variant.

Is there any way how to generate fields and columns just from this flat data source and create valid field names with provided values as title?

Just for info, I'm using Kendo Grid with KnockoutJS, so I have full view model with some collections to display. But all data have columns with "invalid" characters, because all are returned as data table from service.

Regards
René

[Rosen]

Hello ,

As we already mentioned this is not supported out-of-the-box. As columns are created automatically from the fields of the data item, it is not possible to have separate title. However, if the data already exists before constructing the Grid and DataSource, you can convert the data and keep the original column titles. For example:

<script>
   var test = [
     {
       "ID":1,
       "ISIN (SML)":"test"
     }
   ]


   $(document).ready(function() {
     var columns = [];

     var proccessed = $.map(test, function(x) {
       var cols = [];
       var result = {};

       var fieldName;

       for (var i in x) {
         fieldName = i.replace(/[\|&;\$%@"<>\(\)\+,]/g, "").replace(/\s/g, "_");

         result[fieldName] = x[i];

         cols.push({ field: fieldName, title: i });
       }

       if (!columns.length) {
         columns = cols;
       }
       return result;
     });

     $("#grid").kendoGrid({
       columns: columns,
       dataSource: {
         data: proccessed
       }
     });
   });
 </script>

Regards,
Rosen
Telerik

 

 

[ATO]

Hello, 

I have some problem about binding data. I've tried to solve this problems for 48 hours.

 

1.code review.

<div id="example">
        <div id="grid"></div>
        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: {
                                url: "http://learnsteam.kr:5000/nodes",
                                dataType: "jsonp"
                            }
                        },
                        schema: {
                            data: 'nodes',
                            model: {
                                fields: {
                                    uuid: { type: "number" },
                                    subject: { type: "string" },
                                    filepath: { type: "string" },
                                    description: { type: "string" },
                                    count: { type: "number" }
                                }
                            }
                        },
                    },
                    height: 550,
                    filterable: true,
                    sortable: true,
                    pageable: true,
                    columns: [{
                        field: "uuid",
                        filterable: false
                    },
                        "subject",
                    {
                        field: "filepath",
                        title: "File Path"
                    }, {
                        field: "description",
                        title: "Description"
                    }, {
                        field: "count",
                        title: "Count"
                    }
                    ]
                });
            });
        </script>
    </div>

[Stefan]

Hello, 

Thank you for the code.

I made an example and if I pass the JSON data directly it is shown in the Grid:

https://dojo.telerik.com/EbuYuxOx

I can assume that the issue occurs because the "odata" type is used and the dataType is "jsonp".

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/type

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read#transport.read.dataType

If the server is not using oData format and the data is in json, please remove both of these options and check if the response will be parsed.

Regards,
Stefan
Progress Telerik