[Solved] How to display JSON data source in Kendo UI Grid

[Dan]

I have an existing REST service which returns JSON.  I have been instructed to use this REST service and display the returned JSON in a Kendo UI Grid.

My call to the REST service (through JavaScript) returns a JSON object, so I already have the JSON -- my understanding is that I do not have to add a "url" property to the dataSource.

My question is, if you have the JSON object how to you build/write the dataSource to populate the Kendo UI Grid? Or did I ask a question that has been already answered?

Something like this:

JSONObj // returned object from REST call
// formatted like:
/*
{
   "items": [
      {
         "employee": "John Doe",
         "team": "INFRASTRUCTURE"
      }
   ]
}
*/


// Build Kendo UI grid datasource...
var sharedDataSource = new kendo.data.DataSource({
    data: [JSONObj;]
});

$("#grid").kendoGrid({
    dataSource: sharedDataSource,
    columns: [
        {
            field: "employee",
            title: "Employee"
        },
        {   field: "team",
            title: "Team",
        }
    ]
});

I hope this makes sense.

I appreciate any help with this -- I am still learning Kendo UI.

Thanks!

[Kiril Nikolov]

Hello Dan,

You need to set schema.data property in order to tell the dataSource where to find its array of data. Here is an example I hope it helps:

http://dojo.telerik.com/izOFU

Regards,
Kiril Nikolov
Telerik

 

 

[Dan]

Thanks Kiril for the help!

I just to make sure I understand this...  Can I pass the JSON Object into the data parameter, or do I have to hardcode/explicitly write out as in your example?

What I mean is something like this:

<script>

      var myJSON = [Object from another JavaScript function];

      $("#grid").kendoGrid({
        dataSource: {
          data: {
            myJSON;
          },
          schema: {
            data: "items"
          }
        },
        columns: [
          {
            field: "employee",
            title: "Employee"
          },
          {   field: "team",
                title: "Team",
          }
        ]
      })
    </script>

Or do I need some sort of JavaScript function inside the data parameter to parse out the JSON into what is in your example:

"items" :[
  {
    "employee": "John Doe",
    "team": "INFRASTRUCTURE"
  },
  {
    "employee": "Jane Doe",
    "team": "INFRASTRUCTURE"
  }
]

I hope this makes sense (and I hope this is something I can do)...

Thanks!

[Kiril Nikolov]

Hello Dan,

If you want to parse the data before displaying it into the grid, you can use the schema.parse option that accepts a function. Here is the documentation about it:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

Regards,
Kiril Nikolov
Telerik

 

 

[Dan]

Based on the example, can I pass the JSON that has been returned from the existing JavaScript into that parse method?

So, instead of "response", can I pass the JSON object itself?

<script>

var JSONObject = [Existing JSON from another JavaScript function];

var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp"
    }
  },
  schema: {
    parse: function(JSONObject) {
      var products = [];
      for (var i = 0; i < JSONObject.length; i++) {
        var product = {
          id: JSONObject[i].ProductID,
          name: JSONObject[i].ProductName
        };
        products.push(product);
      }
      return products;
    }
  }
});
dataSource.fetch(function(){
  var data = dataSource.data();
  var product = data[0];
  console.log(product.name);
});
</script>

And for the Kendo UI grid itself, would it be built like this:

$("#resultsGrid").kendoGrid({
    dataSource: dataSource,
columns: [
                    {
                        field:"id",
                        title: "ID",
                    },
                    {
                        field: "name",
                        title: "Name"
                    }
                ]
});

I apologize if these questions aren't worded correctly and thanks for your patience on this.

Thanks!

[Alexander Valchev]

Hello Dan,

The parse function is executed before the server response is used. It receives the server response as it is send by the server and is used to process this server response before it is being passed to the DataSource. You cannot pass local JavaScript array from another JavaScript function to the parse function.

Regards,
Alexander Valchev
Telerik

 

 

[Blueprint]

I am having a vary similar problem and I don't understand the answer. In my situation (as above) I MUST get the json array from a specific source. What do plug into the dataSource: ?  Do I put the JSON string (ie "{\"d\":{\"results\":[{\"__metadata\":{\"id\":\"Web/Lists.... blah blah}}}}") or the parsed object (ie JSON.parse(myjsonstring), or the JSON.d object, or the JSON.d.results object?

It really isn't clear.

[Blueprint]

More details:  I am creating a SharePoint 2013 App and am using the SP.RequestExecutor object to return a JSON response. I then call JSON.parse to the get JSON object.

Here is my rendering code:

​

01.function successUnassignedlJSON(data) {
02.
03.    var jsonObject = JSON.parse(data.body);
04.    var jsonResults = jsonObject.d.results;
05.
06.    $('#ValueWorkItems').html(jsonResults.length);
07.
08.    $("#grid").kendoGrid({
09.        dataSource: {
10.            data: jsonObject,
11.            schema: {
12.                data: jsonObject.d.results,
13.                model: {
14.                    id: "Id",
15.                    fields: {
16.                        Title: { editable: false, type: "string" },
17.                        Question: { editable: false, type: "string" },
18.                        WorkbookSectionIDWorkItemID: { editable: false, type: "string" },
19.                        ProcessID: { editable: false, type: "string" },
20.                        RiskRanking: { editable: false, type: "string" },
21.                        DueDate: { editable: false, type: "string" },
22.                        AssignedToId: { editable: false,type: "string" }
23.                    }
24.                }
25.            },
26.            pageSize: 20
27.        },
28.        height: 550,
29.        groupable: true,
30.        sortable: true,
31.        pageable: {
32.            refresh: true,
33.            pageSizes: true,
34.            buttonCount: 5
35.        },
36.        columns: [{
37.            field: "Title",
38.            title: "Assessment",
39.        }, {
40.            field: "Question",
41.            title: "Question"
42.        }, {
43.            field: "WorkbookSectionIDWorkItemID",
44.            title: "Section (ID)"
45.        }, {
46.            field: "ProcessID",
47.            title: "Step",
48.        }, {
49.            field: "RiskRanking",
50.            title: "Risk Ranking",
51.        }, {
52.            field: "DueDate",
53.            title: "Due Date",
54.        }, {
55.            field: "AssignedToId",
56.            title: "Assigned To",
57.        }
58.        ]
59.    });
60.
61.    unassignedLoaded = true;
62.    refreshView = false;
63.
64.    showView('#unassignedGrid');
65.}

[Blueprint]

OK, I figured it out.