Wijmo controls are created from HTML templates that define their inner structures. In most cases, we style controls using CSS. But if you want to change more than just the appearance of the control, you can change its structure by customizing the control template.
Control templates are defined by a static property called controlTemplate. This property contains an HTML fragment that creates the control. Modifications to control templates affect the class, not specific instances of the control. For example, if you modify the template for the InputNumber control, all instances of the InputNumber control created after the change are affected.
In addition to the standard HTML content, elements that play special roles within the control must have a "part" attribute to specify the role they play. For example, a button that increases a value may be marked with a part="button-inc"" attribute. This concept is similar to XAML control templates and their "TemplatePart" attributes. When overriding a control template, it is important to refer to the original template and make sure that all parts are present.
Note: You can find the original template in the source code of each control by searching for "controlTemplate".
Control templates obey the usual rules of class inheritance. For example, if you assign a custom template to the ComboBox class, the template is used for the ComboBox class and by all classes that inherit from it (AutoSearch and InputTime).
Caution: There is no method for restoring the original control templates. Changing templates is typically a one-time operation. In this sample, the controller saves the original templates before applying the customizations, and restores them when the user navigates to a new page.
By default, the InputNumber control shows spinner buttons on either side of the control. We selected this design because it makes the spinner buttons easier to use on mobile devices.
If you prefer a more traditional layout, with spinner buttons stacked one above the other on the right of the control, you can create a new HTML template and assign it to the InputNumber.controlTemplate property as follows:
wjInput.WjInputNumber.controlTemplate = '<div style="...">' + '<table style="...">' + '<tr>' + '<td style="...">' + '<input wj-part="input" style="..."/>' + '</td>' + '<td style ="...">' + '<span wj-part="btn-inc"> ▲</span><br>' + '<span wj-part="btn-dec"> ▼</span>' + '</td>' + '</tr>' + '</table>' + '</div>';
The result is that the new template applies the button layout to all InputNumber controls on the page, regardless of class or style, as you can see in these examples.
By default, the ComboBox control shows a button with a simple triangle on the right side of the control. We selected this design to keep the control appearance as simple and unobtrusive as possible. If you want to use one of the Bootstrap glyphs instead of the simple triangle, you can create a new HTML template and assign it to the ComboBox.controlTemplate property with code like this.
wjInput.WjComboBox.controlTemplate = '<div style="...">' + '<table style="...">' + '<tr>' + '<td style="...">' + '<input wj-part="input" style="..."/>' + '</td>' + '<td wj-part="btn" style="...">' + '<span class="glyphicon glyphicon-circle-arrow-down"></span>' + '</td>' + '</tr>' + '</table>' + '<div wj-part="dropdown" style="..."/>' + '</div>';
The result is that the new template changes the button glyph on all ComboBox controls on the page, regardless of class or style, as you can see in these examples.
The Calendar control looks like the one used in Google Chrome. If you prefer something that looks more like the calendar in jQueryUI, you can create a new HTML template and assign it to the Calendar.controlTemplate property with code like this.
wjInput.WjCalendar.controlTemplate = '<div style="...">' + '<table wj-part="tbl-header" style="...">' + '<tr style="...">' + '<td style="...">' + '<div wj-part="btn-prev" class="glyphicon glyphicon-circle-arrow-left"></div>' + '</td>' + '<td wj-part="btn-month" style="...">' + '<div wj-part="span-month"></div>' + '</td>' + '<td style="...">' + '<div wj-part="btn-next" class="glyphicon glyphicon-circle-arrow-right"></div>' + '</td>' + '</tr>' + '</table>' + '<table wj-part="tbl-month" style="..."/>' + '<table wj-part="tbl-year" style="..."/>' + '<button wj-part="btn-today" style="display:none"/>' + '</div>';
Notice how the template specifies a "button-today" part and hides it by giving it a "display:none" style. This is necessary because the control checks the template and throws an exception if any parts are missing.
The result is shown below: