autoFitColumn for Grid component should have more features

[Sebastien]

Hi, 

I have a grid in my app that can display content of various width depending on the page it's on. Some columns can be 100 px wide when on another page it will be 250px wide. 

In order to handle this I'm using the autoFitColumns() method to display it nicely to the user. However, I'm surprised that when running autoFitColumns(), all the columns will shrink to their optimal size and then render a grid which is not nice at all. (Just like in your stackblitz when clicking Auto-fit all columns https://z1p2hz.run.stackblitz.io) Wouldn't it be possible to actually fit all columns to their optimal size and then stretch them back to use 100% of the grid width ? 

I have to do the following to achieve that : 

container.querySelectorAll('table')[0].style.width = '100%';
container.querySelectorAll('table')[1].style.width = '100%';

Same goes for the autoFitColumn() method, the columns passed as parameter should have their size optimized but then stretched again so that the grid content doesn't end up using only 50% of the grid for example. 

My other question is, what is the best way to call the autofit method ? In angular, I feel like there is no event to subscribe for grid rendering so this is also kind of custom. I just call the autoFitColumns() when my data is received from the back-end but sometimes the grid is not rendered yet at this moment so I have to put the call to autoFitColumns() in a loop to wait for the table rendering. I had to do a custom method to check for table rendering and it is quite ugly. We should have the possibility to include the autoFitColumns feature in the grid declaration itself so it will automatically autoFit each time the grid is rendered. 

 

Thanks in advance for your answers.

 

[Svet]

Hi Sebastien,

Indeed, this is the default behavior of the autoFitColumns() method.

In case, it is not satisfactory, please submit a new feature request in our UserVoice portal. It will help us to check if there is significant demand for the suggested changes and possibly introduce them in the future. 

About the second question, yes we need to call the autoFitColumns() method once the data is received from the back-end. It should also be nested within a setTimeout() function, with 0 delay, to make sure, that the grid's rendering has finished at the time of calling the autoFitColumns() method. Check the following sample plunker demonstrating this approach:
https://plnkr.co/edit/A1D1ogSXrGZ7rgjSZNms?p=preview

The important part is the following marked in red:

constructor(private service: CategoriesService) {
    this.view = service;
    this.service.query(this.state);
    this.view.subscribe(res =>{
      if(res){
        this.data = res;
        setTimeout(()=>{
          this.grid.autoFitColumns();
        })
      }
    })

}

I hope this helps. Let me know in case I can provide any additional information on this case. 

Regards,
Svetlin
Progress Telerik