We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Advice on AutoFit function in Grid control

Hi,

Autofit is a great tool and allows us to best fit a column width easily according to what data is in there. However, we have noticed an undesired effect when the user sorts columns (this is probably personal preference, so I can imagine it is desired for other people). AutoFit seems to be triggered whenever the column is sorted, which, depending on what values get pushed into view, can have a dramatic effect on column widths and the columns jump all over the place (it doesn't just autofit the column being sorted, but all columns, because we have it set to trigger on the databound action).

My first question, is there a way to disable the autofit when sorting a column? I did try adding the following code into the ActionBegin() function, but it didn't work:

if (args.requestType === 'sorting') {
this.autoFitColumns(false);
}

Is there something I am missing?

My second question is that the AutoFit function is great for loading the page the first time a user visits that page. But we have persistence enabled. From that point on we would like the persisted column widths to take priority. Is there a way that we can check to see if there are persisted values and the apply AutoFit if there are not (i.e. the first time the page is visited by a user)? The desired behaviour we are looking for is:

  • User visits page for first time, autofit all columns triggers and sets column widths accordingly
  • Column widths determined by autofit should naturally get cached in persisted storage file
  • All subsequent page visits from user will apply the persisted column widths (which may have been altered by the user from original AutoFit sizes, this is fine though)
  • Nothing from then on should alter column widths apart from:
    • user manually resizing column
    • user selecting Auto Fit Column or All Columns in the context menu

Hopefully I have explained what we're after well enough. Any help much appreciated :)

Thanks,

Rob

1 Reply

RR Rajapandi Ravi Syncfusion Team February 17, 2023 01:04 PM UTC

Hi Rob,


Greetings from Syncfusion support


Query#1: is there a way to disable the autofit when sorting a column?


From your query we could see that you like to disable the autofit while performing sorting, based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.


 

  let flag: any = true;

 

            actionBegin: function(args) { //actionBegin event of Grid

                if(args.requestType === 'sorting') {

                    flag = false;

                }

            }

 

            actionComplete: function(args) { //actionComplete event of Grid

                if(args.requestType === 'sorting') {

                    flag = true;

                }

            }

 

            dataBound: function() { //actionComplete event of Grid

                if(flag) {

                    flag = false;

                    grid.autoFitColumns();

                }

            }


Query#: My second question is that the AutoFit function is great for loading the page the first time


From your query we could see that you like to persist the column width in the Grid. So before we start providing solution to your query, we need some information for our clarification. So, please share the below details that will be helpful for us to provide better solution.


1)                Share your complete Grid rendering code, we would like to check your implementation about how you are implementing and what are the properties you are using in your Grid.


2)                Share your exact requirement with detailed description.


3)                Share the issue scenario in video demonstration format.


Regards,

Rajapandi R


Loader.
Live Chat Icon For mobile
Up arrow icon