This guide explains how to create a .control file for DatePicker user control based on Kendo UI.
The control definition file must be located under the KendoUI directory. For example, KendoUI\DatePicker.control. See Building a User Controls library based on Kendo UI.
The control definition file will look like this when finished:
<?xml version="1.0"?>
<ControlDefinition xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Id>174251e0-b433-22e0-aee2-0811200c9a55</Id>
<Name>KendoUI DatePicker</Name>
<Description>KendoUI DatePicker</Description>
<Version>1</Version>
<IsPublic>true</IsPublic>
<IncludeInControlInfo>true</IncludeInControlInfo>
<ResizeSupported>false</ResizeSupported>
<ObjClass>KendoGx.DatePicker</ObjClass>
<ShowMethod>show</ShowMethod>
<Constructor>
<Parameters />
<Name>KendoGx.DatePicker</Name>
</Constructor>
<RuntimeRender>controls\DatePicker\DatePickerRender.js</RuntimeRender>
<PropertiesDefinition>controls\DatePicker\DatePickerProperties.xml</PropertiesDefinition>
<DesignRender>controls\DatePicker\DatePickerIdeRender.xsl</DesignRender>
<ReferencedFiles>
<File>kendo/styles/kendo.common.min.css</File>
<File>kendo/styles/kendo.default.min.css</File>
<File>kendo/js/jquery.min.js</File>
<File>kendo/js/kendo.web.min.js</File>
</ReferencedFiles>
<SupportFiles>
<Directory>kendo\styles</Directory>
</SupportFiles>
</ControlDefinition>
1. Generate a new Id for the control. This Id must be unique and will identify the user control. It can be generated using an online GUID generator:
<Id>174251e0-b433-22e0-aee2-0811200c9a55</Id>
2. Give a name to the control. You can also include a short description (which will be shown on the property grid in Genexus IDE, when the control is selected):
<Name>KendoUI DatePicker</Name>
<Description>DatePicker from the KendoUI library</Description>
3. Specify the control version and if it will be visible:
<Version>1</Version>
4. Specify if the control will be a standalone control, available from the toolbox, or a control type for attributes/variables. As this control will be a DatePicker for attributes and variables, you need to set it up as a control type
<IncludeInControlInfo>true</IncludeInControlInfo>
5. Disable resizing from the webform editor, as we won’t let the user to specify dimensions for the control in the first version:
<ResizeSupported>false</ResizeSupported>
6. Specify an internal name for the control. This name will be used to reference the control from the Properties file:
<ObjClass>KendoGx.DatePicker</ObjClass>
7. Specify how a new instance of the control will be created in runtime and which instance method will be called to draw it. The Runtime render of the control will have to implement this method.
<ShowMethod>show</ShowMethod>
<Constructor>
<Parameters />
<Name>KendoGx.DatePicker</Name>
</Constructor>
8. In the control definition file, define the location of other relevant files, like the propertiles file, the design time render file and the runtime render file:
<RuntimeRender>controls\DatePicker\DatePickerRender.js</RuntimeRender>
<PropertiesDefinition>controls\DatePicker\DatePickerProperties.xml</PropertiesDefinition>
<DesignRender>controls\DatePicker\DatePickerIdeRender.xsl</DesignRender>
9. KendoUI requires some files to be included, in order to use a control in a webpage. These files, according to KendoUI documentation are, in this order:
<!-- Common Kendo UI Web CSS -->
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<!-- Default Kendo UI Web theme CSS -->
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="js/kendo.web.min.js"></script>
We need GeneXus to copy these files to the deployment directory and to reference them in the webpages that use the User Control. This is declared in the control definition file this way:
<ReferencedFiles>
<File>kendo/styles/kendo.common.min.css</File>
<File>kendo/styles/kendo.default.min.css</File>
<File>kendo/js/jquery.min.js</File>
<File>kendo/js/kendo.web.min.js</File>
</ReferencedFiles>
10. You also need to declare which static resources should be copied for the control to run properly. In this case, specify the complete styles directory, as KendoUI static resources are located under this directory:
<SupportFiles>
<Directory>kendo\styles</Directory>
</SupportFiles>