right align currency in grid cell

6 posts, 0 answers
  1. Levi
    Levi avatar
    14 posts
    Member since:
    Mar 2011

    Posted 20 Feb 2012 Link to this post

    How do I right align currency in a grid cell?
  2.
  3. Joel
    Joel avatar
    78 posts
    Member since:
    Oct 2012

    Posted 20 Feb 2012 Link to this post

    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.
  5. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jan 2012

    Posted 29 Feb 2012 Link to this post

    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?
  7. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 03 Sep 2012 Link to this post

    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.
  8.
  9. Roman
    Roman avatar
    1 posts
    Member since:
    Sep 2013

    Posted 03 Jun 2014 in reply to OnaBai Link to this post

    Thanks
  11. Oren
    Oren avatar
    2 posts
    Member since:
    May 2016

    Posted 23 Jun 2016 Link to this post

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

Back to Top