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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142629 Feb 12,2019 06:53 PM UTC Feb 18,2019 12:18 PM UTC React - EJ 2 7
loading
Tags: Grid
Ryan Ngoh
Asked On February 12, 2019 06:53 PM UTC

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 [Syncfusion]
Replied On February 13, 2019 01:34 PM UTC

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 ?
  1. Else you want to disable an external button when edit form shown in Grid and enable it when values get updated ?
  2. Share some more detail to your requirement.
  3. Share a pictorial representation of your mentioned requirement.

Regards, 
Thavasianand S. 


Ryan Ngoh
Replied On February 13, 2019 03:17 PM UTC

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 [Syncfusion]
Replied On February 14, 2019 06:54 AM UTC

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. 


Refer the below help documentation. 



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

Regards, 
Thavasianand S. 


Ryan Ngoh
Replied On February 14, 2019 08:54 PM UTC

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 [Syncfusion]
Replied On February 15, 2019 10:45 AM UTC

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 
        } 
      } 
    } 

 


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

Regards, 
Thavasianand S. 


Ryan Ngoh
Replied On February 15, 2019 08:01 PM UTC

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 [Syncfusion]
Replied On February 18, 2019 12:18 PM UTC

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>); 


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

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon