In general, the number of resources to be added to the Schedule control are pre-defined during the control creation and all the resources are rendered based on the resource data. Here, the requirement is to group the resources under another level and display it dynamically on the Schedule control, based on the group selection. To do so, follow the steps provided.
Step 2: To switch between two groups, add an additional new group Manager by modifying the existing controller page code as follows,
Step 3: Modify the View page code as follows, to add the Manager group to the resources of the Schedule control. Also, map all the appropriate resource related fields to the resourceFields property within appointmentSettings as follows.
Step 4: Create two radio-buttons to handle the selection between the groups, Room and Manager, as follows.
Step 5: You can dynamically change the group with its associated resources to be displayed on the Schedule control by clicking the required radio button. For this, you need to make use of the client-side event of the two radio-buttons as follows.
Step 6: Define the client-side method onChange under the script section with the following code example to switch between the groups dynamically on the Schedule control, when the radio button is clicked.
Step 7: Now run the sample and the Schedule control is rendered with the initial data and resources as shown in the following screenshot.
Figure 1: Schedule with initial resources defined
Step 8: Now, select the option Rooms and the Schedule control is rendered with the selected group Rooms and its associated resources as follows.
Figure 2: Selected group Rooms and its corresponding resources
Step 9: Now, select the option Managers and the Schedule control displays the Manager group and its associated resources, as shown in the following screenshot.
Figure 3: Selected group Manager and its corresponding resources
|Article ID:||Published Date:||Last Revised Date:||Platform:||Control:|
or the page will be automatically redirected to sign-in page in 10 seconds.