Dynamic Grid - How to center selected columns

4 posts, 1 answers
  1. Wynn
    Wynn avatar
    2 posts
    Member since:
    May 2013

    Posted 14 Oct 2020 Link to this post

    I am populating a grid with dynamic data. I would like to center all but the left column horizontally. The left column should be left-aligned. I've looked at some examples and have not been able to get it to work. My code follows the pattern below. Where/how can I center align all columns that are not the one with the name "LeftMostColumn?" I've mocked up a couple of places where I think this might happen. Please advise. Thanks!

     

    @(Html.Kendo().Grid<dynamic>()
        .Name("Grid")
        .Columns(columns =>
        {
            foreach (System.Data.DataColumn column in Model.MyDataData.Columns)
            {
                var c = columns.Bound(column.ColumnName);
                if (column.ColumnName != "LeftMostColumn")
                {
                    // center the contents of the column
                }
            }
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                foreach (System.Data.DataColumn column in Model.MyDataData.Columns)
                {
                       var field = model.Field(column.ColumnName, column.DataType);
                       if (column.ColumnName != "LeftMostColumn")
                       {
                         // center the contents of the field?
                       }
                }
            }).Read(read => read.Url(Url.Page("./MyData", new { handler = "GetData_Read" })).Data("forgeryToken"))
        )
    )
  2. Answer
    George Gindev
    Admin
    George Gindev avatar
    12 posts

    Posted 15 Oct 2020 Link to this post

    Hello Wynn,

    I believe a good solution is to add CSS styles for the grid, like so:

    .k-grid td:not(:first-of-type),
    .k-grid th:not(:first-of-type) {
        text-align: center;
    }

    The above CSS centers the content of all table cells which are not the first child (leftmost) of the table rows.

    I hope this helps, if you need any further assistance, do not hesitate to write back. 

    Regards,
    George Gindev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Wynn
    Wynn avatar
    2 posts
    Member since:
    May 2013

    Posted 16 Oct 2020 Link to this post

    Well that was a much simpler solution than I was thinking of. Worked like a charm!
  4. George Gindev
    Admin
    George Gindev avatar
    12 posts

    Posted 21 Oct 2020 Link to this post

    Hello Wynn,

    I am glad I could help.

    Regards,
    George Gindev
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top