How to create view model for underlying JSON data in KendoUI

Question

My question is ow to create a view-model object of a JSON data (parsed from a .json file) using KendoObservable object ?

var viewModel = kendo.observable({
    dtSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "/data/SiteMaster.json",
                dataType: "json"
            }
        },
        schema: {
            model: {
                fields: {
                    siteName: { type: "string" },
                    address: { type: "string" },
                    status: { type: "string" },
                    persons: { type: "string" }
                }
            }
        }
    }),
});

I'm binding the viewmodel object to the div element at a later point of time kendo.bind($("div"), viewModel);

However, I'm not able to read the content from the JSON file I get dtSource is not defined when I try to debug on Developer Console on browser

The SiteMaster JSON file that I'm reading is below

{ 
     "siteMaster":[ 
      { 
         "siteName" : "SHG",
         "filename" : "site1.json",
         "persons": 1,
         "status": "70%",
         "address": "BergesHill Road",
      },
      {
          "siteName" : "ABC",
          "filename" : "site2.json",
          "persons": 1,
          "status": "67%",
          "address": "BergesHill Road",
      },
      {
          "siteName" : "XYZ",
          "filename" : "site3.json",
          "persons": 1,
          "status": "80%",
          "address": "BergesHill Road",
      },
      {
          "siteName" : "Scots",
          "filename" : "site4.json",
          "persons": 1,
          "status": "80%",
          "address": "BergesHill Road",
      }]
}

score 0 · Accepted Answer · answered Mar 28 '16 at 07:58

i noticed two thing from the code

your JSON still wrapped by "siteMaster", it should've be like [{},{},{}] and yours is {"siteMaster":[{},{},{}]} or you could add data: "siteMaster" after model on the datasource (take a look on my example)
persons should be number
why there is no id(doesn't matter now) ? but you cant utilize datasource.get() without it

Here is working example where implement my finding and it does work

<!DOCTYPE html>
<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
  <style>
    html {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.uniform.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.uniform.min.css" />

  <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="example">
    <div id="grid"></div>
    <div id="test"></div>
    <script>
      $(document).ready(function() {
        var json = {
          "siteMaster": [{
            "siteName": "SHG",
            "filename": "site1.json",
            "persons": 1,
            "status": "70%",
            "address": "BergesHill Road",
          }, {
            "siteName": "ABC",
            "filename": "site2.json",
            "persons": 1,
            "status": "67%",
            "address": "BergesHill Road",
          }, {
            "siteName": "XYZ",
            "filename": "site3.json",
            "persons": 1,
            "status": "80%",
            "address": "BergesHill Road",
          }, {
            "siteName": "Scots",
            "filename": "site4.json",
            "persons": 1,
            "status": "80%",
            "address": "BergesHill Road",
          }]
        }

        var viewModel = kendo.observable({
          dtSource: new kendo.data.DataSource({
            data: json,
            schema: {
              model: {
                fields: {
                  siteName: {
                    type: "string"
                  },
                  address: {
                    type: "string"
                  },
                  status: {
                    type: "string"
                  },
                  persons: {
                    type: "number"
                  }
                }
              },
              data: "siteMaster",
            }
          }),
        });

        $("#grid").kendoGrid({
          dataSource: viewModel.dtSource,
          height: 550,
          columns: [{
            field: "siteName",
            title: "Site Name"
          }, {
            field: "address",
            title: "Address"
          }, {
            field: "status",
            title: "Status"
          }, {
            field: "persons",
            title: "Persons"
          }]
        });

        kendo.bind($("#grid"), viewModel);
      });
    </script>
  </div>


</body>

</html>

How to create view model for underlying JSON data in KendoUI

1 Answers1