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

Apply changes to multiple rows while in Batch mode

I have a data bound grid with EditMode="Batch".
An ej:Dialog (modal) is presented to the user to get a new value for one of the columns.
When an ej:Button on the dialog is pressed, the new value should be applied to the associated column for all selected records. Because we're in Batch edit mode, this should result in each cell that was changed displaying the dirty indicator in the upper left corner. We're hoping to do this using server-side code.

We're currently using Essential Studio Enterprise 17.1.0.38 release (WEB - jQuery Based ASP.NET Web Forms).

5 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 27, 2019 12:50 PM

Hi Brian,

 

Thanks for contacting Syncfusion Support.

 

Query#:- When an ej:Button on the dialog is pressed, the new value should be applied to the associated column for all selected records. Because we're in Batch edit mode, this should result in each cell that was changed displaying the dirty indicator in the upper left corner.

 

We have checked your query and while using BatchEditMode, when we edit cell by cell the edited cell values has been denoted with red indicator with left corner which is the default behavior. Do you want to save the cell immediately without displaying red indicator means you can follow the below KB link.

https://www.syncfusion.de/kb/9273/how-to-save-changes-immediately-after-editing-a-cell-in-batchediting

 

Also We need some more additional details to achieve your requirement. Please share us the following details.

 

  1. Do you want to place ejDialog externally and save the records for which of the cell value(particular cell value or any row)
  2. Exact scenario you need to achieve with Video Demo
  3. Screenshot to demonstrate your requirement.

 

The provided information will be helpful to provide you response as early as possible.

 

Regards,

Farveen sulthana T



BC Brian Cernoch May 28, 2019 09:26 AM

Here's an image illustrating what I'm trying to achieve.



MP Manivannan Padmanaban Syncfusion Team May 29, 2019 08:04 AM

Hi Brian, 

Thanks for contacting Syncfusion Support. 

Query: Apply changes to multiple rows while in Batch mode 
 
From your query, we are able to understand that you want to update the selected rows data with the entered value in dialog. We have achieved your requirement using the setCellValue method of ejGrid. Kindly refer the below link for sample, 

In the above sample, select the multiple rows and click the button then dialog will open. Enter the desired value and click the “Apply” button then you can see that the newly entered value get updated in those selected cells. 

Also, refer the below help documentation link 

If you have any queries, please get back to us. 

Regards, 
Manivannan Padmanaban. 



CO colew October 24, 2021 08:46 AM

Here's a more recent blog post around this that is a bit more dynamic:

https://www.syncfusion.com/blogs/post/bulk-edit-columns-in-javascript-datagrid.aspx



PS Pavithra Subramaniyam Syncfusion Team October 25, 2021 08:01 AM

Hi Brian, 

Based on the shared blog, we have prepared a simple sample with Essential JavaScript 2 Grid. In this sample we have shown a dialog when clicking the button. After entering a value and click the save button of the Dialog, we have updated the selected record values with a batch update.  Please refer to the below code example and sample link for more information.  

// Grid Rendering 
 
var grid = new ej.grids.Grid({ 
  dataSource: window.orderData, 
  .  .  . 
}); 
grid.appendTo('#Grid'); 
 
// Dialog Rendering 
 
editDialogInstance = new ej.popups.Dialog({ 
  target: document.getElementById('BulkEdit-dialog-container'), 
  width: '350px', 
  content: 
    '<input id="inVal" class="e-input" type="text" placeholder="Enter the value here!"/>', 
  showCloseIcon: true, 
  position: { X'center'Y'center' }, 
  visible: false, 
  buttons: [ 
    { 
      click: onClickSaveBtn, 
      buttonModel: { 
        isPrimary: true, 
        content: 'Save', 
      }, 
    }, 
    { 
      click: onClickCancelBtn, 
      buttonModel: { 
        content: 'Cancel', 
      }, 
    }, 
  ], 
}); 
editDialogInstance.appendTo('#dialogBulkEdit'); 
 
document.getElementById('change').addEventListener('click', (e) => { 
  editDialogInstance.show(); 
}); 
 
var currentEditColumn = 'CustomerID'; 
 
/** 
 * Called when click 'Save' button in Dialog 
 */ 
function onClickSaveBtn() { 
  var editableRows = grid.getSelectedRecords(); 
  var changes = { changedRecords: [], addedRecords: [], deletedRecords: [] }; 
  var inputEditor = document.getElementById('inVal'); 
  for (var k = 0; k < editableRows.length; k++) { 
    var updateObj = {}; 
    var newValue = ''; 
    newValue = inputEditor.value; 
 
    updateObj = editableRows[k]; 
    updateObj[currentEditColumn] = newValue; 
    changes.changedRecords.push(updateObj); 
  } 
 
// Save changes 
  grid.getDataModule().saveChanges(changes, grid.getPrimaryKeyFieldNames()[0]); 
  grid.refreshColumns(); 
  // Previous changes are removed and dialog is hidden 
  changes = { changedRecords: [], addedRecords: [], deletedRecords: [] }; 
  editDialogInstance.hide(); 
} 
 
/** 
 * Called when click 'Cancel' button in edit modal 
 */ 
function onClickCancelBtn() { 
  editDialogInstance.hide(); 
} 
 


                               https://ej2.syncfusion.com/documentation/api/grid/#getselectedrecords 

Sample               : https://stackblitz.com/edit/3blkib?file=index.js 

Please get back to us if you have any queries on this. 

Regards, 
Pavithra S 


Loader.
Live Chat Icon For mobile
Up arrow icon