This guide explains how to create the properties file for DatePicker user control based on Kendo UI (DatePickerProperties.xml). See Building a User Controls library based on Kendo UI for more information.
The properties file is where all the control properties are defined. In the first version of this control we are defining only one property, that is required for all controls that are a control type.
This property is called AttID and will let us define which data types are supported by this control, and how the setter and getter methods are called in the Javascript control instance.
The properties file will look like this:
<?xml version='1.0' encoding='iso-8859-1'?>
<Content xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Object id='KendoGx.DatePicker'>
<Group>
<Name>General</Name>
<Type>Main</Type>
<Children>
<Prop>
<Id>AttID</Id>
<Name>Attribute</Name>
<Type>Custom</Type>
<CustomType>Artech.Genexus.Common.CustomTypes.ControlAttVarReference, Artech.Genexus.Common</CustomType>
<Metadata>
<Value name="FlagSetValueMethod">SetAttribute</Value>
<Value name="FlagGetValueMethod">GetAttribute</Value>
<Value name="FlagScope">DesignTime</Value>
<Value name="FlagDataTypeFilter">date datetime</Value>
</Metadata>
</Prop>
</Children>
</Group>
</Object>
</Content>
The first interesting thing in the properties file is how the properties definition is bound to the control definition. This is done by specifying the internal control name in the id attribute of the Object element:
<Object id='KendoGx.DatePicker'>.
The internal control name was defined in the control definition file, in the ObjClass element, as KendoGx.DatePicker.
The getter and setter of the control are defined under the Metadata element. Our control will have to implement these two methods
<Value name="FlagSetValueMethod">SetAttribute</Value>
<Value name="FlagGetValueMethod">GetAttribute</Value>
Other interesting thing is how the supported data types are declared. This is done under the Metadata element, in a whitespace separated list inside a Value element:
<Value name="FlagDataTypeFilter">date datetime</Value>
This property will be only available through the property editor in design time in Genexus. This is also defined under the Metadata element:
<Value name="FlagScope">DesignTime</Value>