Grid - right justify keeps text left

[Mike]

We have been using the grid control for quite some time and we just now noticed the logic we use to right-justify the header text appears to not be styling as intended.  I have attached a screen shot to show the odd display.  The text is right-justified but the header text is still on the left of the column.  I should note it is common practice, especially for reports, to right justify both the text and the header when showing numeric values so the decimals align.

<column field="CurrentOverCount" title="Over<br />Employee Count" width="70"
        header-html-attributes='new Dictionary<string,object> { ["class"]="text-end" }' html-attributes='new Dictionary<string,object> { ["class"]="text-end" }' />

I have also tried using pure CSS for the header with the same result:

<column field="CurrentOverCount" title="Over<br />Employee Count" width="70"
        header-html-attributes='new Dictionary<string,object> { ["style"]="text-align:right;" }' html-attributes='new Dictionary<string,object> { ["class"]="text-end" }' />

[Alexander]

Hi Mike,

With our recent release, we have introduced vigorous changes to the way the Grid is rendered. I can suggest adding the "justify-content: right" property to the header attributes:

<columns>
     <column 
		  field="ShipName" 
		  title="Over<br />Employee Count"
          header-html-attributes='new Dictionary<string,object> { ["style"]="justify-content:right;" }' html-attributes='new Dictionary<string,object> { ["class"]="text-end" }' />
</columns>

An identical configuration is also demonstrated in the following demo:

• Grid Cell Alignment (Demo) - open the "View Source" to examine the Grid's configuration.

This should then produce the following result:

Here is a Telerik REPL example for you to examine further:

• Telerik REPL for ASP.NET Core Example

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

[Mike]

Thank you.