Undesired behaviour when customizing column resizing

[Alberto Levy]

Hello Syncfusion support team,

I've customized grid column resizing to not change grid width so that when a column is resized, the width offset is added/removed to/from the next column. However, I'm facing two issues:

Issue 1: I haven't found how to change AutoFit behaviour, which can make grid wider than initial size (set to auto).

Issue 2: When resizing any column for the first time, a disabled vertical scrollbar is added to the grid changing grid width. I want to avoid this scroll to appear, since it's not needed, but haven't found any way to set it up to the grid.

I'm using Syncfusion ASP.NET MVC version 17.4.0.40.

[Balaji Sekar]

Hi Alberto, 

 

Greetings from the Syncfusion support. 

 

we would like to inform that autoFitColumns feature of the Grid. This method resizes the columns to fit the widest cell’s content without wrapping. If the provided content placed within the columns width, then this feature fit the columns based on the provided width. So please once ensure with this feature. 

 

Documentation link for AutoFitColumns : https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#autofit-specific-columns 

 

When we resize the grid column, other grid columns will be adjust based resized column however the grid does not resize. 

 

We need additional information about your problem so, please share the below details to us that will help to validate further. 

 

1. Grid rendering code definition
2. Ensure with Grid has been define the width property if defined, please share the details about it
3. Share video demonstrate of the problem
4. Ensure with Syncfusion Essential Studio version.

 

Regards, 

Balaji Sekar 

[Alberto Levy]

Hello,

You can find an attached .zip files with both a video demonstration of the problems and the code of the example used for that. It's based on default Syncfusion Essential Studio example for DataGrid with sorting, paging, filtering and resizing with JS code to customize resizing events (see DataGridFeatures.cshtml).

Thanks in advance,

Alberto Levy

Attachment: EjemploGridResize_8e58228e.zip

[Balaji Sekar]

Hi Alberto 

 

Thanks for your update, 

 

Query #1: I haven't found how to change AutoFit behaviour, which can make grid wider than initial size (set to auto). 

 

As per your query, we have defined the AutoFit property to whole Grid columns using dataBound event of Grid component. we have prepared sample in that we have used the autoFitColumns feature along with maxWidth. When you set maxWidth and use autoFitColumns feature the columns were autofitted up to the maxWidth and the if the column content width is greater than maxWidth. Please refer the below code example and sample for more information. 

 

   function onGridDataBound() { 

        const columns = this.columns 

      .filter(x => x.visible) 

      .map(c => c.field) 

      .slice(0, -1); 

    this.autoFitColumns(columns); 

 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/155806/ze/EjemploGridResize1872141497.zip  

 

Query #2: When resizing any column for the first time, a disabled vertical scrollbar is added to the grid changing grid width. I want to avoid this scroll to appear, since it's not needed, but haven't found any way to set it up to the grid. 

 

We have validated your query with provided the information and we have hide that scroller appearing while Grid column resizing. In below code example, we have hide the scroller using hideScroll method in resizeStop event of the Grid. Please refer the below code example for more information.  

 

  this.resizeStop = function (args) { 

            

         .      .        .      . 

            this.hideScroll(); // Disappear the scroller 

        }; 

 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar