Telerik UI for Windows 8 HTML

RadScheduler for Windows 8 HTML features editing capabilities for the events that it renders. The user can easily add, modify and delete events using the built-in UI or a custom editing UI that you provide. In this help article, you will find information about setting up RadScheduler to allow editing of events as well as information about enabling/disabling specific edit operations.

Prerequisites

To take advantage of the automatic editing capabilities of RadScheduler, you need to first set its dataSource properly. This includes setting its create, update and destroy options, and providing a proper model for your data. You can find more detailed instructions here: Configuring Data Editing. Note that the article references Telerik.Data.DataSource which you cannot use in RadScheduler but the API is identical to that of Telerik.Data.SchedulerDataSource.

Note that when inserting records into a RadScheduler with a model defined, you need to ensure that you assign an id to each new item. For this purpose, you can use the onsave event of the control.

Code Listing 1: Assigning an Id to New Items Copy imageCopy
var currentEventId = 0; // Keep the latest available event Id, so each item get a unique id value.
function saveEventHandler (args) {
    if (!args.event.eventId) {
        args.event.eventId = currentEventId++;
    }
}

Configuring Data Editing

Data editing is enabled by default in RadScheduler meaning that the user can add, edit and delete events from the control. If you want a read-only scheduler, you need to set the editable property to false. To disable only specific operations, you can assign the editable property an object with the settings listed below.

  • enabled: A Boolean property that determines whether the editing feature is enabled or not. The property's default value is false. If you assign an object to the editable property, you need to explicitly specify that editing is enabled.

  • create: A Boolean property that determines whether the scheduler allows the user to add new items. The property's default value is true.

  • update: A Boolean property that determines whether the scheduler allows the user to add new items. The property's default value is true.

  • destroy: A Boolean property that determines whether the scheduler allows the user to add new items. The property's default value is true.

  • resize: A Boolean property that determines whether the scheduler allows event resizing. Dragging the resize handles changes the start or end time of the event.

Once you are set with the editing behavior configuration, you can go further and customize the edit form. In most scenarios you will not need this, since the built-in form contains a section for every aspect of an event with well-targeted controls. However, if you have specific requirements for your own UI, you are free to define an edit form template through the editable.template option. For further instructions on defining a template for the scheduler edit form, go to: Custom Editor.