Make Grid header row resizable

[Gerardo]

Hello, I've tried to search online and in this forum for this, but I've not found anything useful.

 

How can the header row for Grids be made resizable?

Currently all our grids have resizable columns, but sometimes texts are very long which make the header very high, for this cases we need that users are able to resize the header vertically.

 

Thanks in advance

[Vasko]

Hi Gerardo,

Regarding your question, the Grid header (or the Grid component in general) is designed to be resizable only horizontally, not vertically. I've come up with some potential suggestions for adjusting this particular scenario: 

1. Make your columns wider, thus making their headers wider as well
2. Make the text in the headers less.
   

If this does not help, I've further delved into any potentially feasible alternatives that would also prove helpful, as I understand the importance this may have for you.

As an alternative, I would personally recommend taking advantage of the autoFitColumn() client-side method of the Grid. To utilize it,  a possible recommendation would be to attach it to a DataBound() event in your Grid component:

 .Events(e => e.DataBound("onDataBound"))

We will use the onDataBound() function to loop through all the columns and apply the auto-fit:

<script>
  function onDataBound(e) {
    var grid = e.sender;
    for (var i = 0; i < grid.columns.length; i++) {
      grid.autoFitColumn(i);
    }
  }
</script>

Here's a REPL link where you can see the implementation: REPL Grid.

I hope these suggestions help you out, if you have more questions, don't hesitate to ask us!

Kind Regards,
Vasko
Progress Telerik