Improve column space usage / reduce icon space usage

[Christoph]

Hi,

using a grid with excel filter results in a lot of empty space between column text and icons ( filter, sort ).

Is it possible to use all available space if the sort icon is not shown ? or at least to reduce the spacing between icons ( as well as between icons and text ) ?

currently the reserved space for the sort icon cause the text to overflow ( the text could be fully displayed )

without excel filter:

with excel filter:

 

with excel filter and sorting ( for first column ):

 

what we expect would be something like:

[Prathap Senthil]

Hi Christoph,

We understand that you are facing an issue where the reserved space for the sort icon is causing the text to overflow, and you want to fully display the text. To achieve your requirement , we recommend using CSS styles. We have created a code snippet and sample for your reference.

<style>

 

  

    .e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv{

        margin-right: 0px;

    }

 

</style>

Without Modify CSS Style

With Modify CSS Style:

Regards,
Prathap s

Attachment: DataGridSample_6693709e.zip

[Christoph]

Hi,

thanks for fast response - this is exactly what i was looking for.

the last thing is to combine it with sorting - so that this rule is only applied if sorting is not active ?

with your fix, it overlap with the text

[Santhiya Narayanan]

Thanks for the update!

Based on the details you have provided, it seems that you are facing an issue with sorting and applying a specific CSS style. We have customized the CSS style to resolve the issue and ensure that it doesn't overlap with the text. Please refer to the code snippet and sample we have provided below for your reference.

style>

 

  

    .e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv{

        margin-right: 2px;

    }

 

    .e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv{

        margin-right :12px;

    }

 

</style>

We hope that this solution meets your requirements. If you have any further concerns or queries, please do not hesitate to contact us.

Attachment: DataGridSample._42608c38.zip

[Christoph]

thanks, It's not the perfect solution, but it's the best you can achieve with pure CSS.

[Prathap Senthil]

Thank you for letting us know that the provided solution was helpful.  We will now close this thread.

Please get back to us if you have any other issues.