KendoUI styling input fields


When I compare Kendo UI with jQueryUI there is one thing that I do prefer in Kendo UI: documentation. I’m not saying that jQueryUI has bad documentation, just the opposite. The question is that there are many widget not available in jQueryUI and you have to use one of the extensions and the the documentation does not use to be that good.
Nevertheless, there is still a lot of work to do since there are a lot (A LOT) of configuration, methods and events not well documented or not even not listes. In those cases you have to go through forum questions and blogs (like this one) in order to find those tricks
This post is about one of those not documented tricks regarding how to get an HTML input field aligned to the right.

Right align a Kendo UI NumericTextBox

You may not be interested in knowing what is behind the scenes, so let’s start by explaining what you have to do and then if you want you can continue reading to find out why.

Method 1

Define a style for aligning text to the right.

.ob-right { text-align: right; }

Define your HTML input field.

<div><input id="method1" type="text" /></div>

And finally invoke kendoNumericTextBox.

$("#method1").addClass("ob-right").kendoNumericTextBox({
    value:543.21,
    format:"n4"
}).data("kendoNumericTextBox");

Here the trick is invoke the addClass(“ob-right”) before kendoNumericTextBox. This might seem pretty stupid but you have to do it in this order. If you do this:

$("#method1").kendoNumericTextBox({
    value:543.21,
    format:"n4"
}).data("kendoNumericTextBox");
$("#method1").addClass("ob-right");

You end-up having the number aligned to the right only while editing the field (Not kidding!).

Method 2

Define a style for aligning text to the right.

.ob-right { text-align: right; }

Define your HTML input field.

<div><input id="method2" class="ob-right" type="text" /></div>

And finally invoke kendoNumericTextBox.

$("#method2").kendoNumericTextBox({
    value:543.21,
    format:"n4"
}).data("kendoNumericTextBox");

Here I avoid the question of invoking addClass before kendoNumericTextField by defining the class into the HTML.

Method 3

Define a style for aligning text to the right.

.ob-right { text-align: right; }

Define your HTML input field.

<div><input id="method3"
            class="ob-right"
            value="543.21"
            data-format="n4"
            data-role="numerictextbox"
            name="field"
            type="number"/></div>

And finally invoke kendo.init() method.

kendo.init($("#method3"));

Here, as well as in Method 2, we define the CSS class in the HTML avoiding the question about the order.

The theory

When you define a kendoNumericTextBox, using:
NOTE: I’m using this way for creating it but you can also use kendoNumericTextBox: the result is the same.

<div><input id="method3"
            class="ob-right"
            value="543.21"
            data-format="n4"
            data-role="numerictextbox"
            name="field"
            type="number"/></div>

You actually get:

<span style="" class="k-widget k-numerictextbox">
    <span class="k-numeric-wrap k-state-default">
        <input class="k-formatted-value ob-right k-input"
               type="text"
               style="display: inline-block; "
               readonly="readonly"/>
        <input id="method3"
               class="ob-right k-input"
               value="543.21"
               data-format="n4"
               data-role="numerictextbox"
               name="field"
               type="text"
               style="display: none; "/>
        <span class="k-select">
            <span unselectable="on"
                  class="k-link">
                <span unselectable="on"
                      class="k-icon k-i-arrow-n"
                      title="Increase value">Increase value</span>
            </span>
            <span unselectable="on"
                  class="k-link">
                <span unselectable="on"
                      class="k-icon k-i-arrow-s"
                      title="Decrease value">Decrease value</span>
            </span>
        </span>
    </span>
</span>

Basically:

  • two inputs: one for displaying the value (with readonly attribute) and the other for editing. NOTE: the editable one is the one identified by the id that you used.
  • The spans implement the spinners.

And the fact of rendering the input as two inputs is what produces the question of the dependency on the order of addClass.
So, if kendoNumericTextBox uses some class definitions, they are propagated to the two input elements. BUT if you use a jQuery selector for accessing the element after invoking kendoNumericTextBox then you are actually only selecting the second input and then only gets right aligned while editing.
Probably Kendo UI people decided to render the input as two as some sort of optimization (!?) but it has some side effects.
One personal complain might be the lack of orthogonality of KendoUI where not all methods accept the same configuration parameters. Example: kendoNumericTextBox does not accept attributes while kendoGrid accepts it as well as kendoDatePicker; also the fact that kendoDatePicker is rendered as one single input field.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s