Enable 'Update' button in Batch Mode without clicking on other cell

Question

Hi,I'm having a Grid in Batch Mode. When I single click on a Checkbox cell, I can trigger the single click edit successfully. Unfortunatly, I have to select another cell or row so the Grid recognizes the change and the default 'Update' button is activated. Is there a way to activate the button directly after any change without clicking on another cell? Huge thanks in advance! Here is the code I'm using: // copy paste from: https://blazor.syncfusion.com/documentation/datagrid/how-to/single-click-editing-with-batch-mode public async Task UserGridCellSelectHandler(CellSelectEventArgs args){ //get selected cell index var cellIndexes = await _userDataGrid.GetSelectedRowCellIndexes(); //get the row and cell index var currentEditRowIndex = cellIndexes[0].Item1; var currentEditCellIndex = (int)cellIndexes[0].Item2; //get the available fields var fields = await _userDataGrid.GetColumnFieldNames(); // edit the selected cell using the cell index and column name await _userDataGrid.EditCell(currentEditRowIndex, fields[currentEditCellIndex]);}// nothing special hereprivate async Task UserGridToolbarClickHandler(ClickEventArgs args){ if (args.Item.Id == $"{_userDataGrid.ID}_excelexport") { var excelProperties = new ExcelExportProperties(); excelProperties.FileName = $"{DateTime.Now:yyyyMMddHHmmss}_UserExport_{_customer.Name.Replace(" ", "-")}.xlsx"; await _userDataGrid.ExcelExport(excelProperties); }}// nothing special hereprivate async Task UserGridOnBatchSaveHandler(BeforeBatchSaveArgs args){ var changedModels = args.BatchChanges.ChangedRecords; await _userService.UpdateUsers(changedModels); _userEditModels = await _userService.RefreshUsers();}// nothing special hereprivate void UserGridCustomizeCell(QueryCellInfoEventArgs args){ if (args.Column.Field != nameof(UserEditModel.UserType)) return; switch (args.Data.UserType) { case "1": args.Cell.AddClass(new[] { "usertype-1" }); break; case "2": args.Cell.AddClass(new[] { "usertype-2" }); break; case "3": args.Cell.AddClass(new[] { "usertype-3" }); break; }}

Vignesh Natarajan · Accepted Answer

Hi Jan, Thanks for your detailed explanation. Query: “Clicking on the cell (CheckBox) bottom should be highlighted when I change the value. No click in another cell is needed.” We have analyzed your requirement and we understand that you want to Tooblar (Update button) item to be enabled when value of cell is updated / changed not while going into the Edit. Also you want to update the cell when checkbox is changed. We would like to inform you that it is default behavior of Grid control. Because we have provided support to cancel the changes in Grid edit mode. Consider the below scenario, cell goes into the edit mode and user changes a value. Before saving the changes in batch mode, he wants to cancel the change and revert to original value. At that time, Esc key can be pressed and edit operation can be cancelled. Here enabling of Update toolbar is unnecessary. So we have defined it as default behavior to save the changes [(i.e.) update the cell] only when changes are saved in batch mode in Grid. Changes will be saved in Grid only when edited cell gets focused out (i.e) while pressing outside of Grid. Also Update toolbar will be enabled once the changes were saved in Grid. Since we do not have default support to achieve your requirement, we suggest you to achieve your requirement using EditTemplate feature of Grid. Using EditTemplate feature, we can render custom component inside edit mode for particular column and value change event can be defined to them to detect the changes and update the cell value of Checkbox column. Kindly refer the below code example for your reference. @code{ SfGrid GridInstance { get; set; } public async Task OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs args) { //to save the changes in batch mode await GridInstance.SaveCellAsync(); } We have achieve your requirement to save the changes once the checkbox state directly using SaveCellAsync() method in ValueChange event of CheckBox component. Also OnCellEdit event will be triggered when column goes into the edit mode. In this event only Toolbar element can be updated. Once the Grid cell goes into edit, Grid toolbar will not be updated unless, edit operation is cancelled or saved. So we request you to enable the toolbar item in OnCellEdit event of Grid. Kindly refer the below sample prepared using above solution which we have attached for your reference Sample: https://www.syncfusion.com/downloads/support/forum/169184/ze/DataGrid_Server-1398020733.zip Please get back to us if you have further queries. Regards, Vignesh Natarajan

Vignesh Natarajan · Answer

Hi Jan,  
 
Greetings from Syncfusion support.  
 
Query: “Is there a way to activate the button directly after any change without clicking on another cell? Huge thanks in advance! ” 
 
We have analyzed your query and we would like to inform you that we can achieve your requirement using OnCellEdit event and EnableToolbarItemsAsync method of Grid. We have already discussed this topic in one of our public forums. Kindly refer the below link for your reference 
 
https://www.syncfusion.com/forums/168200/toolbar-update-item-and-batchediting?reply=SovrXd  
 
Please get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan

Jan Haugut · Answer

Hello and thank you for this hint. Unfortunately this is not why I need.When I change something, I want it directly being recognized as a change on my record with all related actions on the Grid. With the solution you provided in your link, when I click on the CheckBox, the OnCellEdit event is fired, but it should be fired when I just edited a value, not before or when activating the Edit Mode. Further, the OnCellEdit event will then be fired again when clicking on another cell. Then the changed cell is also highlighted and the Update button is activated - same behavior as without using the OnCellEdit event.

I attached the following gif for a better understanding:    Steps I made to create that scenario on the image:Click on cell (DropDown) top right, changed value from "Power" to "Light" -> nothing more happens.Click on cell (CheckBox) bottom left, changed value from "Unchecked" to Checked", not clicked on another cell yet -> cell top right gets highlighted, change is recognized, Update button is activated, CheckBox is still not highlighted, 'change is not recognized' Expected/Requested behavior:Clicking on the cell (CheckBox) bottom should be highlighted when I change the value. No click in another cell is needed. Just simply changing the value, the cell is highlighted and the Update button on the Grid is activated.As I wrote above, I cannot create a solution using OnCellEvent, because the event is triggered when clicking the cell for the first time, but not triggered when changing the value.I hope I made my problem a bit more clearly and you can provide me a feasable solution. Thank you.

Jan Haugut · Answer

Nice, that's exactly what I need. Thanks a lot for your great and super fast support!

Vignesh Natarajan · Answer

Hi Jan,  

Thanks for the update. 

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan