Telerik UI for Windows 8 HTML
Contents

This help article explains how to use the Data Storage component in a project with Telerik UI for Windows 8 HTML. Make sure that before you follow the instructions from this article you have prepared your project to use the Data Storage component. See instructions here: Getting Started.

How to Bind Telerik Controls to Data Fetched From Telerik Data Storage

All databound Telerik controls use the Telerik.Data.DataSource component as a data layer. That is why it is very easy to bind these controls to data fetched from the Data Storage component. When you fetch data from the Data Storage database, it is returned as a JavaScript array and the DataSource can be bound directly to this result, thus populating the Telerik control it belongs to. This procedure is described in the following steps.

  1. Create and populate the database. Before populating a table in the database, you should check its state. This is needed for you to know whether the database table(s) needs to be populated or it can be used directly. If the table(s) exists, based on your requirements, either delete the old records and add new or do nothing (this is the default scenario when the data isn't dynamic). If the table(s) does not exist, populate it with data using the insert() method described in the Getting Started article.

    In the following code snippet you can see a method called ensureDataBase(). It checks if the database table of interest exists and creates new records only in case the table is not yet created.

    Ensure Database Existence Copy imageCopy
    function ensureDataBase() {
    //Make a connection to the DB. If it does not exist, it will be created.
    var db = Telerik.Data.Database.open("SalesDB");
    //Make a query to the table of interest to see if it exists. If it doesn't, the error function will be entered.
    db.query("select * from Sales as x").done(function (result) {
        //DB is OK
        db.close();
    }, function (error) {
        if (error && error.message && error.message.indexOf("no such table:") != -1) {
            //DB is new
            db.close();
            createDb();
        }
    });
}

    The error function calls the createDb() method that is shown below. The method creates a table and populates it.

    Create New Table Copy imageCopy
    function createDb() {
    var db = Telerik.Data.Database.open("SalesDB");
    for (var i = 0; i < salesData.length; i++) {
        var item = salesData[i];
        //the first call to insert() creates the DB table
        db.insert("Sales", { name: item.name, salesYTD: item.salesYTD, salesQuota: item.salesQuota, bonus: item.bonus });
    }
    db.sync().then(function () {
        db.close();
    });
}

    salesData is a simple JavaScript array. Its records are structured as shown in the snippet below.

    Data Entry Sample Copy imageCopy
    {
    id: 275,
    name: "Michael Blythe",
    salesLastYear: 1750406.4785,
    salesYTD: 3763178.1787,
    salesQuota: 300000,
    bonus: 4100
}

  2. Query the database. In this step you need to build your SQL query. It can be a static one or it can be built depending on user actions. The syntax of the query should conform to the SQLite synax. See reference here: SQL As Understood By SQLite. For queries with more complex filtering and sorting scenarios, you can use the Data Storage API described here: Read Operations.

    This example uses a static query with a WHERE and ORDER BY clauses.

    SQL Query Copy imageCopy
    var sql = "SELECT * FROM Sales WHERE bonus > 0 ORDER BY bonus DESC";

    The result of a successful query will be a JavaScript array. You can see how it is consumed in the next step.

  3. Populate a DataSource and bind Telerik controls. If you are going to bind multiple Telerik controls to the result, you can define one common DataSource and assign it to the controls. This is shown in the example below where a RadGrid and a RadChart controls are defined unbound in markup and are then bound when the query to the Data Storage succeeds.

    Controls Markup Copy imageCopy
    <div id="grid1" data-win-control="Telerik.UI.RadGrid" data-win-options="{
    columns: [
        {field: 'name'},
        {field: 'salesYTD', title: 'Sales This Year', format: '{0:c2}'},
        {field: 'salesQuota', title: 'Sales Quota', format: '{0:c0}'},
        {field: 'bonus', format: '{0:c0}'}
    ],
    height: 300
}">
</div>
<div id="chart1" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [
        {
            type: 'column',
            field: 'salesYTD'
        },
        {
            type: 'line',
            field: 'salesQuota',
            missingValues: 'zero'
        }
    ],
    categoryAxis: {
        field: 'name',
        labels: {
            rotation: 30
        }
    },
    valueAxis: {
        max: 4500000
    },
    width: 800,
    theme: 'light'
}">
</div>
    Populate Telerik controls Copy imageCopy
    queryDb(sql).done(function (result) {
    var ds = new Telerik.Data.DataSource({
        data: result,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    name: { type: "string" },
                    salesYTD: { type: "number" },
                    salesQuota: { type: "number" },
                    bonus: { type: "number" }
                }
            }
        }
    });
    var grid = Telerik.UI.to.Grid(document.getElementById("grid1").winControl);
    var chart = Telerik.UI.to.Chart(document.getElementById("chart1").winControl);
    grid.dataSource = ds;
    grid.refresh();
    chart.dataSource = ds;
    chart.refresh();
}, function (err) {
    //handle error
    //information about the error is available in err.message
});

    If you want to populate a single control, you can directly create this control in JavaScript and assign the resulting array to its dataSource.data property.

    The RadGrid and RadChart controls from the above definition are shown in the following image:

    datastorage-radcontrols

See Also