right align currency in grid cell
3 Answers 2027 Views
Levi
Top achievements
Rank 1
Levi asked on 20 Feb 2012, 09:56 PM
How do I right align currency in a grid cell?

3 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 1
answered on 21 Feb 2012, 01:31 AM
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.
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?
- by
Nathan
Top achievements
Rank 1
on 29 Feb 2012, 03:43 PM
0
OnaBai
Top achievements
Rank 2
answered on 03 Sep 2012, 09:39 PM
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.
Thanks
- by
Roman
Top achievements
Rank 1
on 03 Jun 2014, 11:20 PM
0
Oren
Top achievements
Rank 1
answered on 24 Jun 2016, 03:08 AM

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;
}

Tags
Grid
Asked by
Levi
Top achievements
Rank 1
Answers by
Joel
Top achievements
Rank 1
OnaBai
Top achievements
Rank 2
Oren
Top achievements
Rank 1
Share this question
or