Any way to right-align value in field for input?

[Lisa]

Hi there,

I'm using a masked text box as an incell editor for a grid.  I want to right-align the value in the editor field.  Please see the attached PNG file for how it looks currently.  I tried adding a class to the input field that right-aligned the value, but this right aligned the value+spaces to the right.  I'd like the last digit in the value to be over to the right edge of the input.

Pertinent code is:

columns: [
                  {
                      field: "accounting_category",
                      title: "CATEGORY"
                  },
                  {
                      field: "gl_code",
                      title: "GL CODE",
                      editor: glCodeMaskedTextEditor
                  }
              ]

and

function glCodeMaskedTextEditor(container, options) {

    $('<input class="gl-code-edit" data-text-field="gl_code"
               data-value-field="gl_code_id" data-bind="value:' + options.field + '"/>')

        .appendTo(container)

        .kendoMaskedTextBox({

        mask: "99999999999999999999",

        promptChar: " "

    });

}

Any way to do this?  Thanks!  :)

[Dimo]

Hi Lisa,

By design, the masked textbox works with fixed-length values, so there is no way to remove the spaces. However, it appears that in this case you can use a simple numeric textbox. The styling required to align the value to the right is shown below. The paddings below may depend on the font size.

<input type="number" id="numerictextbox" value="1" class="myTextbox" />

.myTextbox .k-numeric-wrap {
    padding-right: 28px;
}

.myTextbox .k-input {
    text-align: right;
    padding-right: 5px;
}

Regards,
Dimo
Telerik