Telerik UI for Windows 8 HTML

Binding RadScheduler to a Telerik Data Storage allows your scheduler control to work offline. The following help article will provide instructions and explanations on the specific settings you need to apply to RadScheduler's dataSource to bind it to a Telerik Data Storage.

This topic contains the following sections.

Creating a Database with Telerik Data Storage

Create a schema for the database: RadScheduler does not have a built-in logic for generating unique ids when creating new events. Usually, you will have to provide your own logic that generates ids and run it in RadScheduler's onsave event handler. However, if you are using the Telerik Data Storage for storing your events, you can use the autoIncrement logic of the database to generate the ids. In order for the autoIncrement feature to work, you need to create a database with a schema object. In Code Sample 1 you can see a sample database schema. The important thing here is to set an id field with a type of "number" and the identity and autoIncrement properties set to true.

Code Listing 1: Sample Database Schema Copy imageCopy
var schemaDB = {
    tables: [{
        name: 'Events',
        columns:
        [
            {
                name: "id",
                type: "number",
                identity: true,
                autoIncrement: true
            },
            { name: "title", type: "string" },
            { name: "start", type: "date" },
            { name: "end", type: "date" },
            { name: "isAllDay", type: "boolean" },
            { name: "recurrenceId", type: "number" },
            { name: "recurrenceRule", type: "string" },
            { name: "description", type: "string" },
            { name: "recurrenceException", type: "string" },
            { name: "startTimeZone", type: "string" },
            { name: "endTimeZone", type: "string" }
        ]
    }]
};

Create a database using the schema: To create a database programmatically, use the Telerik.Data.Database.open(databaseName, storage, schema) method. It creates the database with the given schema or opens a connection to it if it already exists. You should create or open the database before the scheduler control is initialized. When using the auto increment Data Storage feature, it is advisable to set the serializeObject property value to false. This is necessary because if the data is saved serialized, the database will not return the generated id when you request data from the database.

Code Listing 2: Initializing and Opening a Database Copy imageCopy
db = Telerik.Data.Database.open("SchedulerDB", "local", schemaDB);
db.serializeObject = false;

Connecting RadScheduler's DataSource to Data Storage

Set a dataSource type and configure the transport property: You need to configure RadScheduler's dataSource to work with Telerik Data Storage. The first step is to set the dataSource.type property to "dataStorage". Then, you need to configure the dataSource.transport settings for the CRUD operations you will need to do with your RadScheduler. Basically, you need to provide a database name and a database table to each CRUD operation. Here is a link to an article with а detailed explanation on how to configure the dataSource.transport to work with Data Storage: Using DataSource with Data Storage. Code Sample 3 provides an example configuration of the transport property that works with the database that was created in the previous section.

Code Listing 3: Configuring RadScheduler DataSource to Work with Data Storage Copy imageCopy
type: "dataStorage",
transport: {
    read: {
        data: {
            dbName: "SchedulerDB",
            tableName: "Events"
        }
    },
    create: {
        data: {
            dbName: "SchedulerDB",
            tableName: "Events"
        }
    },
    update: {
        data: {
            dbName: "SchedulerDB",
            tableName: "Events"
        }
    },
    destroy: {
        data: {
            dbName: "SchedulerDB",
            tableName: "Events"
        }
    }
}

Provide a schema and model for the RadScheduler: In order for the dataSource to work properly, you need to provide a schema with a model. The fields you provide in the model have to match the names of the event properties you have in your data. This is necessary because the event edit form's input fields' binding is done through the properties names. The other important thing is to add an id to the schema. Each event must have a unique id for the various RadScheduler features to work properly. By default, the event edit form generates an id value of 0 and you have to replace this value in the onsave event handler, so that newly generated events have unique id. In the current scenario we will use the Data Storage's auto increment id feature to generate unique ids. This feature requires an id with a value of null to be passed to the data storage. To ensure that the generated id is null, you need to specify that the field in the schema.model is nullable by setting the nullable property value to true.

Code Listing 4: Setting RadScheduler DataSource Schema Copy imageCopy
schema: {
    model: {
        id: "id",
        fields: {
            id: { from: "id", type: "number", nullable: true },
            title: { from: "title", validation: { required: true } },
            start: { from: "start", type: "date" },
            end: { from: "end", type: "date" },
            isAllDay: { from: "isAllDay", type: "boolean" },
            recurrenceId: { from: "recurrenceId", type: "number" },
            recurrenceRule: { from: "recurrenceRule", type: "string" },
            description: { from: "description", type: "string" },
            recurrenceException: { from: "recurrenceException", type: "string" },
            startTimeZone: { from: "startTimeZone", type: "string" },
            endTimeZone: { from: "endTimeZone", type: "string" }
        }
    }
}

Below you can see the whole configured dataSource object for reference. It is exposed in a namespace so you can use it in RadScheduler mark-up declaration.

Code Listing 5: Sample DataSource Object Copy imageCopy
WinJS.Namespace.define("Scheduler.Data", {
    dataSource: new Telerik.Data.SchedulerDataSource({
        type: "dataStorage",
        transport: {
            read: {
                data: {
                    dbName: "SchedulerDB",
                    tableName: "Events"
                }
            },
            create: {
                data: {
                    dbName: "SchedulerDB",
                    tableName: "Events"
                }
            },
            update: {
                data: {
                    dbName: "SchedulerDB",
                    tableName: "Events"
                }
            },
            destroy: {
                data: {
                    dbName: "SchedulerDB",
                    tableName: "Events"
                }
            }
        },
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { from: "id", type: "number", nullable: true },
                    title: { from: "title", validation: { required: true } },
                    start: { from: "start", type: "date" },
                    end: { from: "end", type: "date" },
                    isAllDay: { from: "isAllDay", type: "boolean" },
                    recurrenceId: { from: "recurrenceId", type: "number" },
                    recurrenceRule: { from: "recurrenceRule", type: "string" },
                    description: { from: "description", type: "string" },
                    recurrenceException: { from: "recurrenceException", type: "string" },
                    startTimeZone: { from: "startTimeZone", type: "string" },
                    endTimeZone: { from: "endTimeZone", type: "string" }
                }
            }
        }
    })
});

The last step is to create a RadScheduler control with the configured dataSource.

Code Listing 6: RadScheduler Mark-up Copy imageCopy
<div id="scheduler" data-win-control="Telerik.UI.RadScheduler" data-win-options="{
        dataSource: Scheduler.Data.dataSource
    }"></div>

See Also