ejs2 grid Inline Editing without clicking on update button

[Pradnya]

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.

[Sujith Kumar Rajkumar]

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]

Thanks.

[Pradnya]

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

[Sujith Kumar Rajkumar]

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]

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]

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.