Prevent from closing column chooser dailog

Hi there.

When I open the column chooser and simultaneously refresh the grid or change the data source in the background, the grid rerenders and the column chooser dialog closes.

-How can I prevent this?


My idea was to stop the grid refresh or data source change using the 'beforeOpenColumnChooser' event, and then, using the 'actionComplete' event, resume these actions when the user presses the 'Ok' button.


-How can I handle pressing the 'Cancel' button or closing the dialog?


Thanks,

Br Volodymyr


1 Reply

SI Santhosh Iruthayaraj Syncfusion Team February 16, 2024 02:48 PM UTC

Hi Volodymyr,


Greetings from Syncfusion support.


From your query, we understand that you want to prevent the dialog from closing on Grid refresh or data binding. However, preventing the dialog from closing while refreshing the Grid or binding data is not recommended. When performing these actions, there is a chance that the column details will be updated based on the action performed. In this case, if you prevent closing the Column Chooser Dialog, it may lead to not updating the Column Chooser list based on the updated column configuration. So instead of preventing the dialog from closing, while performing those actions, we recommend following the approach that you have shared.


Since the "actionComplete" only triggers when changing the column state actually, this does not trigger for the dialog close without a column state change. In this case, you can utilize the "close" event of the Column Chooser Dialog. We have prepared a code snippet and a sample that will help you achieve this, which you can find below:


[app.component.ts]

 

  created() {

    (this.grid.columnChooserModule as any).dlgObj.close = () => {

      // you can handle pressing cancel button or closing dialog here

    };

  }

 


Sample: https://stackblitz.com/edit/angular-abfoqc?file=src%2Fapp.component.html,src%2Fapp.component.ts


Please let us know if you have any further queries.


Regards,

Santhosh I


Loader.
Up arrow icon