Sort icon overlaps column header when using auto fit

[Michael Evans]

Hi, I'm using the Angular Grid control to display data in a grid. After binding the data, we are using the autoFitColumns() method to adjust the column widths to their appropriate size. Which works great for the data in them, but after the user sorts the grid, the sort icon overlaps the column header slightly. See image below for an example:

Is there a way I can continue to use the auto fit but have it leave some extra space for the sort icon? I am able to hook into the actionComplete event and inspect the values of the widths of each column. I tried to change the width of the sorted column in this method, but it doesn't seem to stick (I can see the column get bigger for a fraction of a second, but it reverts back to the original width). Please advise if you have any suggestions for how to solve this issue.

Thanks,

Michael

[Shalini Maragathavel]

Hi Michael, 

Thanks for contacting Syncfusion support.

Based on your query we suspect that you are facing an issue while perform Sorting with autofit in the Grid. So we have prepared a sample and performed sorting with autofit in the Grid but we did not face the mentioned issue at our end.

For your convenience we have attached the sample and please find the sample for your reference 

Sample : https://stackblitz.com/edit/angular-vjyg32-intsvm?file=index.html

If you are still facing the issue, kindly share the following details that will be helpful for us to provide better solution. 

 

1)   Share your complete Grid rendering code. 

2)   If possible please replicate the issue in the attached sample.  

3)  Syncfusion package version 

Regards,
Shalini M. 

[Michael Evans]

Thanks for looking into this. Yes, I am using auto fit and sorting. And I could not reproduce the issue in your StackBlitz.

I tried a few more things to resize the columns that didn't work.

Ultimately I was able to make things look correct by changing the padding on the e-sortfilterdiv class.

We are using a customized color scheme that we built using your style generator. I am wondering if that influenced things at all.

For reference, I just added the following to the scss file for the affected component:

.e-grid .e-sortfilterdiv {

  padding: 15px 7px;

}

(It was 15px 0px)

Now the sort indicator appears further to the right in the column but still within its bounds and does not overlap the text. 

You can consider this item closed.

[Shalini Maragathavel]

Hi Michael, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Shalini M.