Implementing the features of the control
Implementing the client component
You must store the client class in a javascript file in the project, where the view resides.
You must include the following methods:
To create the file, perform the following:
-
From the context menu of the project, click Add » New Item...
-
In the left pane, select Visual C# Items » Web.
-
Click JScript File and in the Name input field, enter DatePickerField.
-
Open the newly created file.
-
To create the namespace for the client code, paste the following code:
Type.registerNamespace("DatePicker");
-
To define the client class, paste the following code:
DatePicker.DatePickerField = function (element) {
DatePicker.DatePickerField.initializeBase(this, [element]);
this._datepicker = null;
}
-
Define the prototype for the class in the following way:
DatePicker.DatePickerField.prototype = {
initialize: function () {
DatePicker.DatePickerField.callBaseMethod(this, 'initialize');
},
dispose: function () {
DatePicker.DatePickerField.callBaseMethod(this, 'dispose');
},
// properties
get_datepicker: function () { return this._datepicker; },
set_datepicker: function (value) { this._datepicker = value; }
}
-
Register the client class and specify its base class in the following way:
DatePicker.DatePickerField.registerClass('DatePicker.DatePickerField', Telerik.Sitefinity.Web.UI.Fields.FieldControl);
-
Save the file.
-
In the Properties pane of the DatePickerField.js file, change the Build Action to Embedded Resource.
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.
You register the client class by calling the registerClass method.
Referencing the client script
To reference the client script and specify a script descriptor for the view, you must override the following methods:
-
GetScriptDescriptors
In this method, the script for the client component is referenced.
-
GetScriptReferences
In this method you can define an instance of your client class and set the desired properties to it.
To override GetScriptDescriptors and GetScriptReferences methods, add the following code to DatePickerField.cs:
public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
var descriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
var descriptor = new ScriptControlDescriptor(typeof(DatePickerField).FullName, this.ClientID);
descriptor.AddComponentProperty("datepicker", this.DatePicker.ClientID);
descriptors.Add(descriptor);
return descriptors;
}
public override IEnumerable<ScriptReference> GetScriptReferences()
{
var scripts = new List<ScriptReference>(base.GetScriptReferences())
{
new ScriptReference("DatePicker.DatePickerField.js", typeof(DatePickerField).Assembly.FullName)
};
return scripts;
}
You must reference the client component from the view class. You do this in the override for the GetScriptReference method. In it you create a script reference for your client component. When creating the 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 descriptor for the view.