1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Quicker Editing

Quicker Editing

I have a grid with checkboxes and numerical edits.  I'm currently using Inline editing mode, but I've tried Batch edit mode as well.

Say I want to change the "checked" state of a checkbox on 10 different rows.  I can edit the first row by double clicking the row to enable edit, then I can click the checkbox to change its state, then I click off that row to save it.  Then I got to the next row and do the same thing:  double click, click in checkbox, click off row.  The same idea applies to numerical edits and the whole process is too slow and cumbersome.  As I stated, I tried batch mode and it suffers from the same problems.

Is there any way to make this process quicker and eliminate some of the clicks?  It would be ideal if the rows were all in edit mode all of the time and I could change any checkbox with a single click or start editing a numerical edit simply by clicking in it and then typing, and then press a save button when I was all done.  Is there any way to achieve anything like this?

Thanks.

3 Replies
MS Madhu Sudhanan P Syncfusion Team October 4, 2018 10:57 AM UTC

Hi Jacob, 

We have checked your query and you can achieve your requirement by using startEdit() method in the rowSelected event. We have prepared a simple sample where rows are edited with single click. Please refer the below example code, sample link and documentation link. 

[Index.cshtml] 
 
<ejs-grid id="Grid" allowPaging="true" rowselected="rowselected" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
… 
</ejs-grid> 
 
<script> 
    function rowselected(e) {         
        this.editModule.startEdit(e.row); 
    } 
</script> 


Regards, 
Madhu Sudhanan P 


UN Unknown October 4, 2018 02:13 PM UTC

Thanks for the response.  I tried your suggested and while it does eliminate 1 click, it doesn't really address the issue.  Plus it has the side effect of removing the ability to highlight a row and multiselect rows.  And the "Cancel" button no longer works.  

But even if you addressed all of the issues above, this still doesn't solve the root of the problem.  Is there any way to have all rows in "edit" mode all of the time.

Thanks.

MS Madhu Sudhanan P Syncfusion Team October 8, 2018 11:18 AM UTC

Hi Jacob, 

You can achieve your requirement by using the “column.template” property of Grid component. We have prepared a simple sample based on your query in which the Grid cells are rendered in editing like state by using the column template. You can select the records and edit the cells by a single click. And You can save the changes by using grid.render.sendBulkrequest() method. Please refer to the below code example, Documentation link and sample link. 

[index.cshtml] 
 
<div id="ControlRegion"> 
    <button onclick="update()">Save</button> 
    <button onclick="cancel()">Cancel</button> 
    <ejs-grid id="Grid" queryCellInfo="queryCellInfo" dataSource=@ViewBag.datasource allowPaging="true"> 
        <e-grid-selectionsettings checkboxOnly="true" persistSelection="true"></e-grid-selectionsettings> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditOnDblClick="false" allowEditing="true" mode="Batch"></e-grid-editSettings> 
        <e-grid-columns> 
            <e-grid-column type="checkbox" width="50"></e-grid-column> 
            <e-grid-column field="OrderID" isPrimaryKey="true" headerText="OrderID" width="120"></e-grid-column> 
            <e-grid-column field="EmployeeID" isPrimaryKey="true" headerText="EmployeeID" template="#template_col1" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="CustomerID" template="#template_col2" width="150"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script id="template_col1" type="text/x-template"> 
    <input class='txtbo employeeid' /> 
</script> 
 
<script id="template_col2" type="text/x-template"> 
    <input class='e-input customerid' value="${CustomerID}"/> 
</script> 
 
 
<script>     
    function queryCellInfo(args) { 
        if (args.cell.classList.contains('e-templatecell')) { 
            if (args.column.field === 'EmployeeID') {  
                var targEle1 = args.cell.querySelector('.txtbo.employeeid'); 
                // rendering Essential JavaScript 2 NumericTextBox component in template 
                var ntextBox = new ej.inputs.NumericTextBox({ 
                    value: args.data.EmployeeID, decimals : 0, 
                    format :"N" 
}); 
                ntextBox.appendTo(targEle1); 
            } 
        } 
    } 
 
    function update() { 
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        var rows = grid.getSelectedRows(); 
        rows.forEach((row) => { 
           // getting the modified data in the selected rows 
            var EmpID = parseInt(row.getElementsByClassName('employeeid')[0].value); 
            var CustID = row.getElementsByClassName('customerid')[0].value; 
            var index = parseInt(row.getAttribute('aria-rowindex')); 
            var data = grid.currentViewData[index]; 
            changed.push(Object.assign(data, {EmployeeID:EmpID,CustomerID:CustID})); 
        }) 
          changes.changedRecords = changed; 
        grid.renderModule.sendBulkRequest({ changes, name: "bulk-save" }); 
        changed = []; 
    } 
    function cancel() { 
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        grid.refresh(); 
    } 
</script> 

 



Regards, 
Madhu Sudhanan P 


Loader.
Up arrow icon