Alignment and width of a Grid Cell

21 posts, 0 answers
  1. mvbaffa
    mvbaffa avatar
    102 posts
    Member since:
    Dec 2006

    Posted 29 Oct 2011 Link to this post

    Hi, 

    How can I align, center and define the width of a grid cell

    Thanks in advance
  2. mvbaffa
    mvbaffa avatar
    102 posts
    Member since:
    Dec 2006

    Posted 29 Oct 2011 Link to this post

    I have found it.

    Just include a <div align=center>your data</div> in the template of the cell.

    Thanks anyway
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 31 Oct 2011 Link to this post

    Hello Marcus,

    align="center" is an obsolete and not standard-compliant approach. I recommend you to define column widths via the KendoGrid configuration and use the text-align CSS property. No additional <div>s are required.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Gema
    Gema avatar
    6 posts
    Member since:
    Sep 2011

    Posted 03 Dec 2011 Link to this post

    Hi Dimo, 

    do you have an example of "kendo-way" to align data in a kendo grid cell ? Thank you,

    Best regards,
    Gema Pratama
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 05 Dec 2011 Link to this post

    Hi Gema,

    Content in the Kendo Grid is aligned in exactly the same way as in an ordinary <table> - by using the text-align CSS property. If you want to apply alignment to a given column only, you should use Javascript and iterate through all cells from this column (you can use cellIndex), after the Grid has been databound.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Igor
    Igor avatar
    18 posts
    Member since:
    Oct 2011

    Posted 11 Dec 2011 Link to this post

    Hi Dimo,

    I don't think that using Javascript and iterating through all cells in a column is professional. I need a simple way to right-align all my columns that have numbers as values. If I change the order (or the number) of the columns, I would have to change the Javascript code.

    I would appreciate a code sample and an info if there will be a bult-in feature for aligning text using configuration in future.

    Thanks,

    Igor
  8. Gema
    Gema avatar
    6 posts
    Member since:
    Sep 2011

    Posted 11 Dec 2011 Link to this post

    Hi Dimo,

    Yes, i agree with Igor. I think there should be a simple way, an api function to do that. Other than that, this is a great framework. i really love it and can;t wait for further enhancement/development. 

    Regards,
    Gema Pratama
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Dec 2011 Link to this post

    Hello all,

    The problem is that currently the Grid does not preserve HTML attributes when being instantiated from a <table>. We will address this limitation in the future. At this moment an alternative option to setting custom styles per column with Javascript is to use a row template:

    http://demos.kendoui.com/web/grid/rowtemplate.html

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. PB1971
    PB1971 avatar
    1 posts
    Member since:
    Mar 2006

    Posted 27 Dec 2011 Link to this post

    To align the column in a grid use the following:

    Sample Column Definition:
                                        {
                                            field: "price",
                                            title: "Price ($)",
                                            width: "80px",
                                            template: '<span style="float:right">#= price #</span>'
                                        }
  11. Paul
    Paul avatar
    9 posts
    Member since:
    Jan 2011

    Posted 02 Jun 2012 Link to this post

    This was supported in the Teleriik MVC Extensions. It should also be supported with Kendo now that the Telerik MVC Extensions users are almost forced to migrate.
  12. Jeffrey
    Jeffrey avatar
    15 posts
    Member since:
    Dec 2010

    Posted 05 Jun 2012 Link to this post

    For your reference.  Here is my way to add custom css feature for Kendo UI grid. 
    Modify kendo.web.js as below:

    for (idx = 0; idx < length; idx++) {
    column = that.columns[idx];
    template = column.template;
    type = typeof template;
    //2012-06-04 by Jeffrey, Add support to custom css
    rowTemplate += "<td " + (column.css ? "class='" + column.css + "'" : "") + ">";
    rowTemplate += that._cellTmpl(column, state);
    rowTemplate += "</td>";
    }

    Then I can assign custom css name in column configuration: 

    $("#dvGrid").kendoGrid({
        dataSource: dataSrc,
        columns: [
                { field: "FieldName", title: "Column Title", css: "my-custom-css-name" },
  13. Jeffrey
    Jeffrey avatar
    15 posts
    Member since:
    Dec 2010

    Posted 14 Aug 2012 Link to this post

    Just found that Kendo UI v2012.2.710 had enhanced the customization ability of default column template: (which not included in online document)

    for (idx = 0; idx < length; idx++) {
        column = that.columns[idx];
        template = column.template;
        type = typeof template;
      
        rowTemplate += "<td" + stringifyAttributes(column.attributes) + ">";
        rowTemplate += that._cellTmpl(column, state);
      
        rowTemplate += "</td>";
    }

    Now you can use column.attributes to assign CSS style or other attribute:

    { field: "UserName", title: "User Name", width: 70, attributes: { "class": "my-css-name", "data-boo": "foo" } },
  14. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 29 Aug 2012 Link to this post

    Thanks Jeffrey, this is very helpful for controlling the <td> (CSS class and custom attributes like style).  I'd like to know if there's a way to control the header of the column...if you're centering a column, you usually want to center the header too.

    -Dean
  15. Jeffrey
    Jeffrey avatar
    15 posts
    Member since:
    Dec 2010

    Posted 30 Aug 2012 Link to this post

    to Todd, 

    The header text should be center-aligned in most of my scenarios, so I add a CSS rule like this:

    #dvGrid th.k-header { text-align: center }

    For your reference.

    Jeffrey
  16. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 31 Aug 2012 Link to this post

    Jeffrey, thanks but I know how to center every column in a grid (just use the CSS you posted).  What is needed is a way to put a CSS class on the grid's column definition that applies to the header...that way you can easily control one header/column.  With the "attributes" property you discovered, you can add a class to the cells in the table body, but that won't affect the <th> header.
  17. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 16 Oct 2012 Link to this post

    Hi,
    I had a requirement to right-align currency columns and encountered the same issue trying to align the column headers for [only] the specific columns involved.

    It's not an ideal solution but if you know that your users are running CSS3-capable browsers, you can use the nth-child selector to apply alignment to only the required columns. For example, the rule below right-aligns the header for the third column only.

    #grid th.k-header:nth-child(3) { text-align:right; }

    Regards, Ian
  18. Bob
    Bob avatar
    4 posts
    Member since:
    Jul 2011

    Posted 03 Mar 2014 Link to this post

    This should do the trick for anyone looking to change the alignment on any single column. Add .Width() to that line and declare the width you would like the column to be.
    @(Html.Kendo().Grid(Model).Name(blahGrid).Columns(columns =>
    {
    columns.Bound(c => c.Price).Format("{0:C}").HtmlAttributes(new { style = "text-align:right" });
    })
  19. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 09 Apr 2014 in reply to Bob Link to this post

    Thanks for posting that code Bob, it helped me.  I was scared for a second I'd have to ask the admins how to do it and get the normal incomplete answer.
  20. AMIT
    AMIT avatar
    1 posts
    Member since:
    Feb 2015

    Posted 22 May 2015 in reply to Dimo Link to this post

    How to align "Export to Excel" button in the right side of the grid instead of left aligned on Kendo Grid?
  21. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 27 May 2015 Link to this post

    Hello AMIT,

    You could set the text-align property of the Grid toolbar in order to achieve the desired behavior. Here is an example that demonstrates this.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  22. Kent
    Kent avatar
    1 posts
    Member since:
    Jul 2016

    Posted 10 Nov Link to this post

    Inside of Column definitions you can do something like this:

    attributes:{ class:"text-right" },

    headerAttributes: {
    "style": "text-align: right !important; padding-right:10px;"
    },

    So a field definition in full may look like this:

    {
    field: "InvoiceTotalAmount",
    title: "Invoice Amount",
    filterable: {
    cell: {
    showOperators: false,
    operator: "contains"
    }
    },
    attributes:{ class:"text-right" },
    headerAttributes: {
    "style": "text-align: right !important; padding-right:10px;"
    },
    template:"<span> {{dataItem.InvoiceTotalAmount | currency : '$' : 2}} </span>"
    }

Back to Top
Kendo UI is VS 2017 Ready