How to display json data on datagrid

2 posts, 0 answers
  1. Steven
    Steven avatar
    3 posts
    Member since:
    May 2016

    Posted 19 May Link to this post

    My first test is very simple plan, binding a remote data url like below, and then display them in my datagrid. The first row is title and below it are values. 






    When running program, only titles can display in datagrid (Total Populatoin and NAME)- see pic in attachment, all the values are missing; and the following error messages are from Chrome browser:(see the attachmentment) . 

    The following are my coding. Thanks! 

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

    queryData = new{
                type: "json",
                pageSize: 4,
                transport: {
                read: {
                    url: ",NAME&for=state:*",
                    dataType: "json",
            schema: {
            // the data, which the data source will be bound to is in the "list" field of the             response
            data: "list"
        } //schema           
        }); //queryData ends here

                  selectable: "multiple cell",
                  allowCopy: true,
                  scrollable: true,    
                  columns: [
                   { field: "P0010001", 
                     title:"Total Population"
                   { field: "NAME" }
                  dataSource: queryData,
                });//dgrid ends here


  2. Alex Gyoshev
    Alex Gyoshev avatar
    2497 posts

    Posted 23 May Link to this post

    Hello Steven,

    The DataSource expects that the incoming data contains objects for the row data:

      { "P0010001": "4779736", "NAME": "Alabama", "state": "01"},
      { "P0010001": "710231", "NAME": "Alaska", "state": "02"},
      { "P0010001": "6392017", "NAME": "Arizona", "state": "04"},
      { "P0010001": "2915918", "NAME": "Arkansas", "state": "05"}

    You can either pre-process the data before returning it from the server, or use the schema.parse configuration option to define a method that parses it on the client-side.

    Alex Gyoshev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top