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

Manually call toolbar update from code

We are using the data grid in react (batch editing) hooked up via a UrlAdapter.  The grid loads and the user can make changes (add/edit/delete) all on the client side.  When the user clicks the Update toolbar button the data is saved properly to the server.  Our requirement has changed in that we want to hide the Update button from the toolbar and perform the update manually from another button click event.  We are not sure how this can be accomplished.  We are also struggling to get a reference to the grid (if this is needed) using the react 18+ functional components.  All of the examples on the website seem to use the older component code style that does not easily translate.

Thanks,
- Jeff


3 Replies

PS Pavithra Subramaniyam Syncfusion Team November 24, 2022 10:38 AM UTC

Hi Jeff Voigt,


You can achieve your requirement by removing the “update” button from the grid “toolbar” property. Please refer to the below code example for getting the grid instance and hiding the “update” button dynamically.


var gridInstance;

const hide = () => {

  gridInstance.toolbar = ['Add''Delete''Cancel'];

};

const update = () => {

  gridInstance.editModule.batchSave();

};

 

 

<ButtonComponent onClick={hide}>hide</ButtonComponent>

<ButtonComponent onClick={update}>update</ButtonComponent>

 

  <GridComponent dataSource={data} ref={(grid) => (gridInstance = grid)}

            pageSettings={pageSettings} toolbar={toolbarOptions}

            allowPaging={true} editSettings={editSettings}>

    .  .  .

          </GridComponent>

 


https://stackblitz.com/edit/react-xu9wnm?file=index.js


Please get back to us if you need further assistance.


Regards,

Pavithra S


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.



JV Jeff Voigt November 25, 2022 01:39 PM UTC

This works great, however, how can we, in code, know when the method has completed and if there were any errors?  We have to perform further operations after a successful batchSave.

Thanks,

-Jeff




PS Pavithra Subramaniyam Syncfusion Team November 28, 2022 08:49 AM UTC

Jeff,


The “actionComplete” event will be triggered after the batch changes are saved successfully. Please refer to the below code example for more information.


// Grid’s actionComplete event handler

// Triggers after an action is successfully completed in the Grid

actionComplete(args) {

    if (args.requestType === "batchsave") {

      // you can perform your actions

    }

}



Loader.
Live Chat Icon For mobile
Up arrow icon