Telerik UI for Windows 8 HTML

You can bind RadGrid to JSON or XML data from a local file. This is useful if you want the user data to be stored locally, or to cut down on the number of requests made to a service when its data is not constantly changing.

Binding to Local XML Data

To be able to bind to XML data from a local file, perform these steps.

  1. Assign the path of the local file to the transport.read.url property.

  2. In the schema options, specify the type of the read data. In this case - "xml".

  3. In the schema options, set the data property to point to the XML element, which will represent a single data record.

  4. Define the fields that you want RadGrid to display in the schema.model.fields property. Here you can also specify their data type if needed to further process data.

XML Structure Copy imageCopy
<books>
    <book title="Eloquent JavaScript">
        <author>Marijn Haverbeke</author>
        <url>
            http://www.amazon.com/Eloquent-JavaScript-Modern-Introduction-Programming/dp/1593272820
        </url>
    </book>
Binding RadGrid to XML Copy imageCopy
var grid1Ctrl = new Telerik.UI.RadGrid(document.getElementById("grid1"), {
    dataSource: {
        transport:
        {
            read: {
                url: "/Examples/DataBinding/LocalFiles/Books.xml"
            }
        },
        schema: {
            // specify the the schema is XML
            type: "xml",
            // the XML element which represents a single data record
            data: "/books/book",
            // define the model - the object which will represent a single data record
            model: {
                // configure the fields of the object
                fields: {
                    // the "title" field is mapped to the text of the "title" XML element
                    title: "@title",
                    // the "author" field is mapped to the text of the "author" XML element
                    author: "author/text()",
                    // the "url" field is mapped to the text of the "url" XML element
                    url: "url/text()",
                    // the "cover" field is mapped to the "id" attribute of the "book" XML element
                }
            }
        }
    },
    height: 300
});

Binding to Local JSON Data

To bind to JSON data residing in a local file, make sure you follow the steps below:

  1. Assign the path of the local file to the transport.read.url property.

  2. Specify the type of the data that you are going to read through transport.read.dataType. In this case - "json".

  3. In the schema options, set the type property to "json".

  4. In the schema.data property, specify the JSON object that represents a single data record.

Note

If the JSON schema contains nested objects inside the ones that are assigned as data items, make sure that you define the columns explicitly. In the field property of the specific column, point to the object value using [childObject].[propertyName].

JSON Structure Copy imageCopy
{
  "books": {
    "book": [
      {
        "title": "Eloquent JavaScript",
        "info": {
            "author": "Marijn Haverbeke",
            "url": "http://www.amazon.com/Eloquent-JavaScript-Modern-Introduction-Programming/dp/1593272820"
        }
      }
.....
Binding RadGrid to JSON Copy imageCopy
var grid2Ctrl = new Telerik.UI.RadGrid(document.getElementById("grid2"), {

    dataSource: {
        transport:
        {
            read: {
                url: "/Examples/DataBinding/LocalFiles/BooksJSON.json",
                dataType: "json"
            }
        },
        schema: {
            // specify the the schema is JSON
            type: "json",
            // the JSON object which represents a single data record
            data: "books.book"
        },
    },
    columns: [
        { field: "title" },
        { field: "info.author" },
        { field: "info.url" }
    ],
    height: 300
});