Which events to listen to to know when inside batch edit mode

[Ryan Ngoh]

I have a batch mode grid with default toolbar options add, delete, update, cancel. I want to know when the grid is in "edit" mode and toggle local state to disable a button. So for instance, a button gets disabled when I click delete/add/edit but not yet update the changes and when the user is finished editing, re-enable the button

[Thavasianand Sankaranarayanan]

Hi Ryan, 

Greetings from Syncfusion. 

Before proceeding to your query please provide the following details for better assistance. 

1. Are you want to disable the toolbar items in Grid when edit form shown in Grid ?

1. If yes, then how you update the edited values in Grid ?

2. Else you want to disable an external button when edit form shown in Grid and enable it when values get updated ?
3. Share some more detail to your requirement.
4. Share a pictorial representation of your mentioned requirement.

Regards, 

Thavasianand S. 

[Ryan Ngoh]

I don't want to disable the toolbar items because that is how to save/cancel the edit. I want to disable an external button when the grid is in edit mode and enable it when the values get updated (includes re-enabling on cancel)

[Thavasianand Sankaranarayanan]

Hi Ryan, 

Thanks for your update.  

As per your query, we have prepared sample with external button enabled/disabled actions while we are do toolbar actions. You can achieved your requirement by using actionComplete and toolbarClick events of the EJ2 Grid in React platform. Please refer the below code example. 

[index.js] 

   actionComplete(args){         

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

       document.getElementById("externalbtn").disabled =false // Disabled external button while add and edit actions 

 

      }    

    } 

    toolBarClick(args){         

     if(args.item.text === "Add" || args.item.text === "Edit" ){ 

       document.getElementById("externalbtn").disabled =true  // Disabled external button while add and edit actions 

      } else if(args.item.text === "Cancel"){ 

        document.getElementById("externalbtn").disabled =false; // Disabled external button while add and edit actions 

 

      } 

    } 

Please find the below sample know more details about the external button enable/disable based on toolbar item actions. 

Sample link: https://stackblitz.com/edit/react-zylwjt-vhjrbn?file=index.js 

Refer the below help documentation. 

Link: https://ej2.syncfusion.com/react/documentation/api/grid/#actioncomplete 

Link: https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick 

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

Regards, 

Thavasianand S. 

[Ryan Ngoh]

Hi. This is very close to what I need but there is still one issue. When clicking delete without selecting a row, the dialog pops up that says 'No records selected for delete operation'. Then the external button is still disabled. I only want to disable the button if a row was deleted, edited, or added. Thanks.

[Thavasianand Sankaranarayanan]

Hi Ryan, 

As per your concern, we have modified the sample with external button was enabled when no records get selected for deletion. Please refer the below code example and sample for more information. 

[indx.js] 

toolBarClick(args){  

              

     if(args.item.text === "Add" || args.item.text === "Edit"  ){ 

       document.getElementById("externalbtn").disabled =true 

      } else if(args.item.text === "Cancel"){ 

        document.getElementById("externalbtn").disabled =false; 

      } else if(args.item.text === "Delete"){ 

        if(this.gridInstance.getSelectedRecords().length>0){ 

          document.getElementById("externalbtn").disabled =true 

        } 

      } 

    } 

 

Sample link: https://stackblitz.com/edit/react-zylwjt-13traj?file=index.js 

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

Regards, 

Thavasianand S. 

[Ryan Ngoh]

Thanks. This may be another issue but what event do I listen to when I delete all rows, leaving no records to show? It does not call batchsave and the external button stays disabled.

[Thavasianand Sankaranarayanan]

Hi Ryan, 

Greetings from the Syncfusion, 

As per your query provided details, we have modified the sample with external button enable/disable while EJ2 Grid editing basis. We have achieved the delete all rows then save the change to Grid  even enable the external button using “beforebatchSave” event. Please refer the below code example to know about the external button enable/disable actions based on editing. 

[index.js]   

 beforeBatchSave(args){   

       document.getElementById("externalbtn").disabled =false;   // trigger before save the changes     

    } 

        .   .    .    . 

    render() { 

        return (<div className='control-pane'> 

        <button id="externalbtn" onClick={this.onClick.bind(this)}>External Button</button> 

                <div className='control-section'> 

                    <GridComponent dataSource={this.data1} ref={grid => this.gridInstance = grid} enableHover={false} allowPaging={true} pageSettings={{ pageCount: 5 }}   toolbar={this.toolbarOptions} editSettings={this.editSettings} beforeBatchSave={this.beforeBatchSave.bind(this)} toolbarClick={this.toolBarClick.bind(this)}> 

              .    .    .    . 

                </div> 

            </div>); 

Sample link: https://stackblitz.com/edit/react-zylwjt-pjqx9f?file=index.js 

 

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

Regards, 

Thavasianand S.