Currently, I have integrated the DevExtreme DataGrid widget into my Angular application.
Here is a snippet of how my DataGrid is configured:
<dx-data-grid
id="gridContainer"
[dataSource]="employees"
[allowColumnReordering]="true"
[allowColumnResizing]="true"
[columnAutoWidth]="true">
<dxo-column-chooser [enabled]="true"></dxo-column-chooser>
<dxo-column-fixing [enabled]="true"></dxo-column-fixing>
<dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000" [customSave]="tableStateSave" [customLoad]="tableStateLoad"></dxo-state-storing>
<dxi-column
caption="Employee"
[width]="230"
[fixed]="true"
[calculateCellValue]="calculateCellValue"
></dxi-column>
<dxi-column dataField="BirthDate" dataType="date"></dxi-column>
<dxi-column dataField="HireDate" dataType="date"></dxi-column>
<dxi-column dataField="Position" alignment="right"></dxi-column>
<dxi-column dataField="Address" [width]="230"></dxi-column>
<dxi-column dataField="City"></dxi-column>
<dxi-column dataField="Zipcode" [visible]="false"></dxi-column>
<dxi-column dataField="HomePhone"></dxi-column>
<dxi-column dataField="MobilePhone"></dxi-column>
<dxi-column dataField="Skype"></dxi-column>
<dxi-column dataField="Email"></dxi-column>
</dx-data-grid>
In this section:
<dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000" [customSave]="tableStateSave" [customLoad]="tableStateLoad"></dxo-state-storing>
I am utilizing custom methods (tableStateLoad and tableStateSave) to manage the state of my DataGrid (columns positions and sizes).
The current setup automatically saves the state after any changes within a 2-second timeout period.
Now, I am looking to replace this automated saving feature with a manual action triggered by a button click.
Any suggestions on achieving this?