Date picker widget: Implement the features of the view of the designer
To implement the features of the designer view, you must perform the following:
Implement the ContentViewDesignerView class
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.
Implement the client component
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:
- In the context menu of the
Designer/Views
folder, click Add » New Item...
- In the left pane, select Visual C# Items » Web.
- Click JScript File and in the Name input field, enter
DatePickerDesignerView.js
- Open the newly created file.
- Create the namespace for the client code.
- Define the client class.
- Define the prototype for the class.
- Register the client class and specify its base class.
- Save the file.
- 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.
Reference the client script
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.