Runtime render file for DatePicker User Control based on Kendo UI

This guide explains how to create a runtime time render file for DatePicker user control based on Kendo UI (DatePickerRender.js). See Building a User Controls library based on Kendo UI for more information.

The runtime render file contains the code needed to show the control, capture its value when the user selects a date, and update its value on the screen when the control value is changed programmatically.

In the control definition file, we have defined that the constructor for the User Control is KendoGx.DatePicker. This means that GeneXus will call the constructor, using the prefix, "new" like this:

var uc = new KendoGx.DatePicker();

For that reason, KendoGx.DatePicker must be a function under the KendoGx namespace. In terms of Javascript this means that the DatePicker function is a member of KendoGx object.

Given what was defined in the control definition file and in the properties file, the control must implement a certain basic interface. In the control definition file it has been defined that the User Control has a show method that is called to draw the control.
In the properties file it has been defined getter and setter methods (SetAttribute and GetAttribute), so the generated program can read and write the value of the control.

This is the basic structure of the KendoGx.DatePicker function:

if (!window.KendoGx)
window.KendoGx = {};

KendoGx.DatePicker = function () {
// Att/Var value setter
this.SetAttribute = function(value) {
};

// Att/Var value getter
this.GetAttribute = function() {
};

this.show = function() {
};
}

The show method

KendoUI provides two separate controls for date picking: DatePicker for selecting a date and DateTimePicker for selecting a date and a time. Instead of creating a User Control for each of them, in this example we wrap both controls under a single User Control. Then, it is decided which to use based on the type of the attribute/variable used.

The first time the control is rendered the show method is called. And after every user event is fired in the web page the show method is called also.

The value of the control will be updated every time the setter is called. The "this.IsPostBack" member tells if it’s the first time the show method is called (false) or if it’s being called after a user event was fired (true).

The show method looks as follows:

this.show = function() {
if (!this.IsPostBack) {
  var container = this.getContainerControl(),
      id = this.ContainerName + '_field';

  container.outerHTML = '<input id="' + id + '" value="' + cleanValue(this.value, this.hasTimePart()) + '" />';

  if (this.hasTimePart()) {
   this.datepicker = $('#' + id).kendoDateTimePicker(getConfig(this)).data("kendoDateTimePicker");
  }
  else {
   this.datepicker = $('#' + id).kendoDatePicker(getConfig(this)).data("kendoDatePicker");
  }
}
};

The SetAttribute Method

This method is called by the generated program to set the value of the control. It is always called before the show method is called.

The method is as follows:

this.SetAttribute = function(value) {
this.value = value;
if (this.datepicker) {
  var gxdate = new gx.date.gxdate(value, 'Y4MD');
  this.datepicker.value(gxdate.Value);
}
};

Its value is stored in a member called "this.value". If the control has been already rendered, its value is updated, calling "this.datepicker.value()" method. The value which is received by parameter is converted from a string containing the date in ANSI format, to a Date object, using GeneXus Javascript API.


The GetAttribute Method

This method is called by the generated program to read the value of the control. It is called before every user event is triggered.

The method is as follows:

this.GetAttribute = function() {
var value = this.datepicker.value();
if (value) {
  var gxdate = new gx.date.gxdate(value);
  gxdate.HasTimePart = this.hasTimePart();
  if (gxdate.HasTimePart) {
   return gxdate.getString('Y4MD') + " " + gxdate.getTimeString(true, true, true);
  }
  return gxdate.getString('Y4MD');
}
else {
  return "";
}
};

The returned value is converted to a string containing the date in ANSI format, using GeneXus Javascript API.