Poor layout of the sorting element when the column is aligned to the right

[Alexey Kazakevich]

The sorting element is shifted to the left side, this should not be. It is expected that the sorting element remains on the right and an indent appears before the column header.

[Renjith Singh Rajendran]

Hi Alexey, 

  

Greetings from Syncfusion support. 

  

Query : It is expected that the sorting element remains on the right and an indent appears before the column header. 

By default, the TextAlign property value will be Left and the sort icon will be displayed in the right side of HeaderText. We suspect that you might have set the TextAlign property as Right for the Distance column. So at these cases, as there is no space at right side of the headertext, the sort icon will be displayed in the left side of headertext.  

  

So based on your requirement, we suggest you to set the TextAlign property as Left to make the sorting icon appear on the right of the header text. 

Reference :  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html 

https://blazor.syncfusion.com/documentation/datagrid/columns 

  

Please try the above suggestion from your side and if you are facing difficulties kindly share with us the complete Grid rendering codes or share a simple sample based on your scenario for us to proceed further. 

  

Regards, 

Renjith R 

[Alexey Kazakevich]

My requirements are that the column text should be aligned to the right. I achieved this with 'TextAlign="Text Align.Right"'.

If I needed left alignment, I wouldn't have found the error and created a thread on the forum.

Therefore, I draw your attention once again that the position of the sorting element is an absolute layout error.

[Renjith Singh Rajendran]

Hi Alexey, 

As informed in our previous update, the mentioned sorting icon position is the default architecture behavior of grid. So based on your scenario, we suggest you to apply the below style in your application to override our default style and position the sort icon in the Right side irrespective of the TextAlign provided for GridColumn. 

 

Please refer and add the below style in your application, 

 

 

<style> 

    .e-grid .e-gridheader .e-rightalign .e-sortfilterdiv{ 

        float:right; 

    } 

</style> 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith R