ejs2 grid Inline Editing without clicking on update button

Question

Hi , I have a ejs-grid . I want to do inline editing of rows and rather than clicking on Update , I want to call jquery to update grid elements. Is it possible? or any other way say on clicking outside grid if its going to update the datagrid.

Pradnya · Accepted Answer

Thanks.

Sujith Kumar Rajkumar · Answer

Hi Pradnya, 
 
Greetings from Syncfusion support. 
 
Based on the query we suspect that your requirement is to cancel the default Grid edit and perform your own update action without clicking the ‘update’ button. If so, we would like to let you know that on clicking out of the current edit row(inside the Grid), the Grid’s save action will be triggered and the actionBegin event will be triggered where the updated row data will be returned as shown in the below image, 
 
  
 
From here you can cancel the default ‘save’ action by setting the event arguments ‘cancel’ property to ’true’ as demonstrated in the below code snippet, 
 




// Grid’s actionBegin event handler 
function actionBegin(args) { 
    if (args.requestType === 'save') { 
        // The default save action will be cancelled. Here you can perform your own update action with the modified data 
        args.cancel = true; 
    } 
} 
 
Also for saving the record on clicking outside the Grid, you can achieve it by binding click event to the document where you can save the edited record by calling the Grid’s endEdit method. This is demonstrated in the below code snippet, 
 




document.addEventListener('click', function (args) { 
         var grid = document.getElementById('Grid').ej2_instances[0]; 
        // Check if any row is in edit mode 
        if (grid.isEdit) { 
                // Saves the edited record 
                grid.endEdit(); 
        } 
}); 
 
API links: https://ej2.syncfusion.com/documentation/api/grid/#actionbegin 
                  https://ej2.syncfusion.com/documentation/api/grid/#endedit 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R

Pradnya · Answer

Can we get the grid (all cells editable ) on page load?

Sujith Kumar Rajkumar · Answer

Hi Pradnya, 
 
You’re welcome. 
 
As for this query – “Can we get the grid (all cells editable ) on page load?”, we are not able to clearly understand your requirement. Do you wish to get the Grid’s data source values on page load? If so, you can retrieve it by using the data source property as demonstrated below, 
 




// Grid’s load event handler 
function onLoad(){ 
    var gridData = this.dataSource; 
} 
 
If this is not your requirement then please elaborate on it with pictorial representation(if possible) based on which we will validate from our end and provide the further details. 
 
Regards, 
Sujith R

Pradnya · Answer

https://plnkr.co/edit/XbGLPZmD7pWnhd9O20iY?p=preview&preview

I need cell editing like ag-grid. Is it possible to get all cells of grid in editable mode? like in above link we can start editing and stop editing all cells

Ajith Govarthan · Answer

Hi Pradnya, 

Thanks for the update. 

Query: I need cell editing like ag-grid. Is it possible to get all cells of grid in editable mode? like in above link we can start editing and stop editing all cells 
 
By default, in EJ2 Grid it is not feasible to render all the rows in the edit mode. However, in Batch edit mode you can edit all the required cells one by one and save the modified cell values at the same time in the Grid’s dataSource, which is the default behavior of our Batch edit mode.   
  
For your convenience we have attached the video demonstration and the documentation so please refer them for your reference.  
  
Video Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UN4ADB~11344525689.zip   
  
UG-Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#batch 

Demo Link: https://ej2.syncfusion.com/aspnetcore/Grid/BatchEditing#/material 

Please share the purpose of need to render all the rows in edit mode which will help us to provide the proper solution at our end.  
  
Regards,  
Ajith G.