Date picker widget: Implement the features of the view of the designer | WebForms

To implement the features of the designer view, you must perform the following:

To implement the ContentViewDesignerView class in your view, you must override the following members:

• GetScriptReferences
  In this method, the script for the client component is referenced.
• GetScriptDescriptors
  In this method you can define an instance of your client class and set the desired properties to it.
• ViewTitle
  This property must return the display name of the view.
• ViewName
  This property must return the programmatic name of the view.

GITHUB EXAMPLE: For more information about the content of the file, see the DatePickerDesignerView.cs file of the downloaded sample project.

You must store the client class in a JavaScript file in the project, where the view resides.

The file must include the following methods:

• initialize
  This method is called when an instance of the class is created. It calls the initialize method of the ContentViewDesignerView class.
• dispose
  This method is called when the instance of the class is no longer used. It calls the dispose method of the ContentViewDesignerViewclass.
• refreshUI
  This method is called when the view is opened. In it you must get an instance of the control and populate the UI with the values of the properties of the control.
• applyChanges
  This method is called when the changes must be applied to the control. In it you must get an instance of the control and set its properties to the new values in the UI.
• set_parentDesigner
  This method is used by the IDesignerViewControl interface for passing an instance of the designer to the view. Via this instance the view can access the data of the control.

To create the file, perform the following:

1. In the context menu of the Designer/Views folder, click Add » New Item...
2. In the left pane, select Visual C# Items » Web.
3. Click JScript File and in the Name input field, enter DatePickerDesignerView.js
4. Open the newly created file.
5. Create the namespace for the client code.
6. Define the client class.
7. Define the prototype for the class.
8. Register the client class and specify its base class.
9. Save the file.
10. In the Properties pane of the DatePickerDesignerView.js file, change the Build Action to Embedded Resource.

GITHUB EXAMPLE: For more information about the content of the file, see the DatePickerDesignerView.js file of the downloaded sample project.

To create the namespace for the client code you call the registerNamespace of the Type class.

NOTE: The same namespace must be used throughout the entire client code in this file.

In the prototype you override the methods to implement IDesignerViewControl and add properties for the RadDatePicker controls. You register the client class by calling the registerClass method.

You must reference the client component from the view class. You do this in the override of the GetScriptReference method in the DatePickerDesignerView.cs class. In it, you create a script references for your client component. When creating a reference, you must specify the name of the embedded resource that contains the client component and the assembly it resides in. In the GetScriptDescriptors method you specify a script descriptors for the view.

GITHUB EXAMPLE: For more information about the content of the file, see the DatePickerDesignerView.cs file of the downloaded sample project.

Next, you must create the multi-view designer.