Kendo UI grid - right align header text

[Saquib]

Tring to right align the header and data in selected columns in a grid as follows

    <kendo-grid-column field="outstandingValue" title="Outstanding Value" width="100"  [style]="{'text-align': 'right'}"  [headerStyle]="{'text-align': 'right'}" [filterable]="false">
      <ng-template kendoGridHeaderTemplate>
        Outstanding Value
      </ng-template>
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          {{dataItem.outstandingValue | currency : 'GBP'}}
      </ng-template>      
    </kendo-grid-column>  

 

The data is right aligned but the header styling does not work?

[Sergiy]

I have the same problem, here is just an example forked from the Docs page with header align style change.

https://stackblitz.com/edit/angular-9eus2w-19phva?file=src%2Fapp%2Fapp.component.ts

Doesn't work for me, due to "k-link" span injected into  the header with display: flex CSS attribute.

[Hetali]

Hi Sergei,

To right align the Kendo UI Grid header text, use the justify-content property as seen below:

<kendo-grid [data]="gridData">
  <kendo-grid-column 
    field="ProductName"
    [headerStyle]="{ justifyContent: 'right' }"
  > 
  </kendo-grid-column>
</kendo-grid>

I have updated the StackBlitz example with the justify-content property and the header text is aligned to the right.

I hope this helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Sergiy]

That works, thank you. However it is odd why header and footer should use different styles to format text alignment. Well, not odd for me because I see the display:flex is the root cause.

[Hetali]

Hi Saquib,

Upon using the code snippet, the Kendo UI Grid Header is right aligned as seen in this StackBlitz example.

To further help you resolve the issue on your end, could you please update the StackBlitz example such that it replicates the behavior observed? Additionally, could you also share a Fiddler Jam recording which will capture the developer console log?

Looking forward to hearing from you.

Regards,
Hetali
Progress Telerik

[Saquib]

Thanks for the response. I've captured the Fiddler logs, hopefully gives you what you've need? 

https://jam.getfiddler.com/spaces/ae6da66e-6071-42db-94f1-548b15960af6/1bb4e78a-201a-41ad-895d-8a719f09ccfc?pt=5633439da8c99c1db18f37c497672fd260a346fdac7dd456eb8f3a55528266cc4444eb613110574393a26486291028c4

I've not yet managed to make your example replicate my issue. 

However, I've noticed the HTML is slightly different between 2 examples in my app (in one example the text alignment right works correctly).

Broken example has an extra span element:

 

Working example does not have this extra span element

 

[Hetali]

Hi Saquib,

Could you please confirm if you have enabled sorting in the Kendo UI Grid? If so, we have a known bug as seen in our Issue Tracker page.

If the sorting feature is not enabled, could you please share the isolated Angular application? I can then investigate.

Please let me know.

Regards,
Hetali
Progress Telerik

[Saquib]

Hi @Hetali

Yes, sorting is enabled. 

I'll use to workaround suggested in the issue tracker.

Saquib