JSON data not binded to grid

8 posts, 0 answers
  1. René
    René avatar
    68 posts
    Member since:
    Aug 2011

    Posted 02 May 2014 Link to this post

    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é
  2.
  3. Faten
    Admin
    Faten avatar
    7 posts

    Posted 04 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. René
    René avatar
    68 posts
    Member since:
    Aug 2011

    Posted 05 May 2014 Link to this post

    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é
  7. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 06 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. René
    René avatar
    68 posts
    Member since:
    Aug 2011

    Posted 07 May 2014 in reply to Rosen Link to this post

    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é
  11. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 07 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. ATO
    ATO avatar
    2 posts
    Member since:
    May 2018

    Posted 27 Jun 2018 Link to this post

    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>

     

    But, I can see always the field name without the data.

    The chrome browser can get the json data from rest server(http://learnsteam.kr:5000/nodes). but It cannot display the items. (I guess there are some binding errors.)

     

    2. Checking the data with browser and postman

    You can see the browser screen, postman's query result and postman's header options with attached files.

     

    Help me to solve this problems. 

    Thanks.

     

  14.
  15. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 28 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular 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