right align currency in grid cell

[Levi]

How do I right align currency in a grid cell?

[Joel]

Use a row template as demo'ed here : http://demos.kendoui.com/web/grid/rowtemplate.html.  Then apply text-align:right CSS on the td representing the currency cell.

[Nathan]

I have done this:
columns: [
    { field: "Value", width: 20, title: "Value", template: '<div style="text-align:right;">#= kendo.toString(Value, "n2") #</div>'}
]


However, while this works on the display version of the grid, when I click the editable control, the value automatically formats to left aligned. How can I make the text right aligned when the control in the grid is in edit mode?

[OnaBai]

You might get the same effect using columns format and attributes options...
columns: [
    { field: "Value", width: 20, title: "Value", format:"n2", attributes:{style:"text-align:right;"}}
]
Or by defining a CSS:
/// CSS
.numbers {
text-align: right;
}

/// JavaScript
columns: [
    { field: "Value", width: 20, title: "Value", format:"n2", attributes:{class:"numbers"}}
]

But, of course, this does not solve your last question about alignment while editing... For getting it, you should play with editor, something like:

columns: [
    {
        field: "Value",
        width: 20,
        title: "Value",
        format:"n2", 
        attributes:{class:"numbers"},
        editor: function(container, options) {
                            $('<input type="text" ' +
                                    'name="' + options.field + '" ' +
                                    'data-type="number" ' +
                                    'data-bind="value:' + options.field + '" ' +
                                    'data-role="numerictextbox" ' +
                                    'class="k-input numbers"/>').appendTo(container);
                        }}
    }
]

This should align it right in edit mode but also validate that you do not type letters or other illegal characters.

[Roman]

Thanks

[Oren]

For aligning the data when batch editing, you can simply add css to accomplish this.

Each editable input field has a unique id when editing (it's usually the same as the column header name).

For example, if your column is called Purchase Price, the id of the editable field is probably PurchasePrice.

Add the following css to right align the Purchase Price column when editing it's value:

input#PurchasePrice {
    text-align: right;
}