Multicolumn Grid Header Aligment

[Ade]

How to create Alignment of Column Text Header at Middle of merge Row

 

See Picture

[Viktor Tachev]

Hello Ade,

Centering the text in the header cells can be achieved with a bit of additional CSS. The CSS rule below would center the text in the header cells of the Grid.

.k-grid-header .k-grid-header-wrap th.k-header {
    text-align:center;
    vertical-align: middle;
}

Furthermore, you can see the CSS in action in the following dojo example:

• http://dojo.telerik.com/iNOpIw

Regards,
Viktor Tachev
Progress Telerik

[oreops]

We tried the above example but the alignment was not happening. Refer the screenshot attached. Support us to understand the issue. (we are using 2024.3.1015)

[Martin]

Hello, 

From what I can see you are using our Multi Column Headers Demo, where the columns are properly aligned. Could you please let me know if I am missing something to reproduce the issue?

 

[oreops]

I need to apply center alignment for the Column Header. So I gone through the sample provided above. But in the sample also , the column header text coming in left alignment only. It should come in center as per instruction. Kindly tell me what I am missing? (I shared the screenshot for your reference, which i taken from the sample dojo)

[Martin]

You can try the style below. Here's a small example for reference.

 <style>
      .k-table-th{
        justify-content: center !important;
      }
      </style>

 

[Ade]

Thank You ... 

I understand that Kendo UI uses css style model

 

[oreops]

We tried the above example but the alignment was not happening. Refer the screenshot attached. Support us to understand the issue. (we are using 2024.3.1015)