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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Single click edit

Thread ID:

Created:

Updated:

Platform:

Replies:

149381 Nov 24,2019 04:26 PM UTC Nov 29,2019 09:31 AM UTC ASP.NET Core - EJ 2 9
loading
Tags: DataGrid
Stefan
Asked On November 24, 2019 04:26 PM UTC

Hi

I have multiple grids in a page, and I have enabled editing in single click .

https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/enable-editing-in-single-click/?no-cache=1

That works great but I have 3 additional requirements that I can’t figure out.

1.The cell clicked should be selected, not the first cell in the row.

2. If a checkbox is clicked the checkbox should change from checked to unchecked or from unchecked to checked on first click. Now you must click twice for it to change.

3. I have multiple grids in page. How do I loop through all grids in page and endEdit() in all of them?

Hoppe you understand what I want to do.

Regards,

/Stefan


Attachment: EJS2WebApplication_e7373815.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 25, 2019 09:12 AM UTC

Hi Stefan, 
 
Greetings from Syncfusion support 
 
Query 1 : The cell clicked should be selected, not the first cell in the row. 
 
This can be achieved by triggering Load event. Please follow the below mentioned code example and attached sample for more reference. 
 
Query 2 :  If a checkbox is clicked the checkbox should change from checked to unchecked or from unchecked to checked on first click. Now you must click twice for it to change. 
 
This could be achieved by using Load and actionComplete event. Please refer the below code snippet for more understanding. 
 
Index.cshtml 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" load="load" actionComplete="actionComplete" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
        
</ejs-grid>     
<script> 
    var isVerifiedColumn = false; 
    function load(args) { 
        var instance = document.getElementById('Grid').ej2_instances[0]; 
        instance.element.addEventListener('mousedown', function (e) { 
            isVerifiedColumn = e.target.getAttribute('aria-colindex') === "0" ? true : false;     // Verified column rowIndex = “0” 
            if (e.target.classList.contains("e-rowcell")) { 
                if (instance.isEdit) 
                    instance.endEdit(); 
                var index = parseInt(e.target.getAttribute("Index")); 
                instance.selectRow(index); 
                instance.startEdit(); 
            }; 
        }); 
    }   
 
    function actionComplete(args) { 
        if (args.requestType == "beginEdit") { 
            if (isVerifiedColumn) { 
                if (args.rowData.Verified == false) { 
                    args.form.querySelector('.e-checkbox').ej2_instances[0].checked = true; 
               } 
 
                else { 
                    args.form.querySelector('.e-checkbox').ej2_instances[0].checked = false; 
                } 
            } 
        } 
    } 
</script> 
 


We have prepared a sample for both Query 1 & 2 in the following sample.  


Query 3 : I have multiple grids in page. How do I loop through all grids in page and endEdit() in all of them? 
 
You need to call the endEdit() method by taking grid instance from the currently viewing grid ID. Grid id’s differ for different grids. 
 

Regards 
Thavasianand S. 


Stefan
Replied On November 25, 2019 10:31 AM UTC

Hi,

Thanks for quick answer. This solved 2 and 3.

1. The cell clicked should be selected. The clicked cell should have focus on single click so that you can start editing the cell immediately, see attached image.





Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 26, 2019 09:17 AM UTC

Hi Stefan, 

Thanks for your update. 

We provided the sample with when we click on a cell then it goes to edit mode and focusing on the same cell for editing. If it is not your requirement then please provide a exact details about your requirement. 

We have prepared a video demonstration of not reproducing the issue in our end. 


Regards, 
Thavasianand S. 


Stefan
Replied On November 26, 2019 09:48 AM UTC

Hi,

The video sample shows the correct behavior.
The problem seems to be that it only works in Google Chrome, NOT in Firefox or Microsoft Edge.

Regards,

/Stefan

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 27, 2019 11:49 AM UTC

Hi Stefan, 
 
We analyzed your query and we are able to reproduce the issue “Focus is not working in Firefox and IE browser” so, we suggest to use the below way to focus the respective cells which was selected for editing. Kindly refer to the code snippet and sample for more informations. 
 
Index.cshtml 
 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" load="load" actionComplete="actionComplete" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
             … 
</ejs-grid> 
<script> 
    var data; 
    var col; 
    var focuscell; 
    var isVerifiedColumn = false; 
 
    function load(args) { 
        var instance = document.getElementById('Grid').ej2_instances[0]; 
        instance.element.addEventListener('mousedown', function (e) { 
 
            data = e.target;                                                    // details of selected cell element 
            col = data.getAttribute("aria-colindex");        //  respective column of that cell 
 
            isVerifiedColumn = e.target.getAttribute('aria-colindex') === "0" ? true : false;  
            if (e.target.classList.contains("e-rowcell")) { 
                if (instance.isEdit) 
                    instance.endEdit(); 
                     
              }; 
        }); 
    }   
 
    function actionComplete(args) { 
        if (args.requestType == "beginEdit") { 
 
            focuscell = args.form.elements[col];           // get the specific cell in the grid form using cell index 
            setTimeout("foc.focus();", 10);                     // Set time for focus to enable in the cell 
               … 
    } 
</script> 
 
 

Note: The mentioned issue is not related to Syncfusion So, please get the additional details in the following link 


Regards 
Thavasianand S. 


Stefan
Replied On November 27, 2019 08:06 PM UTC

Hi,

This works with "ordinary" fields but not with numericedit. 

If I have one numericedit column it does not work in Firefox. Nothing is selected.

If I have two numericedit column it does not work in Chrome. Click any ship country field and Freight field is selected. Click freight field and CustomerID field is selected.


 

 


 

 

 

 

 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 29, 2019 08:49 AM UTC

Hi Stefan, 
 
Query 1 : If I have one numericedit column it does not work in Firefox. Nothing is selected.  If I have two numericedit column it does not work in Chrome. 
 
In the previous response, we have taken the index of selected column. By using that index, we have focused the column in form element. But here we taken the field name using the index and then we focused that in grid component. 
 
Query 2 : Click any ship country field and Freight field is selected. Click freight field and CustomerID field is selected. 
 
This is because, we are using OrderID column as primary key column. Due to this, orderID creates a hidden column next to it. So the column index will differ for previous condition. That is why the focus is setted to the previous columns. 
 
Please refer the below code snippet and sample for more reference 
 
Index.cshtml 
 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" load="load" actionComplete="actionComplete" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
</ejs-grid> 
<script> 
 
    function actionComplete(args) { 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        if (args.requestType == "beginEdit") { 
            foc = args.form.querySelector("#Grid" + grid.columns[col].field);     // get the field using the column index in a grid instance  
            setTimeout("foc.focus()", 10); 
            if (isVerifiedColumn) { 
                if (args.rowData.Verified == false) { 
                    args.form.querySelector('.e-checkbox').ej2_instances[0].checked = true; 
                } 
                else { 
                    args.form.querySelector('.e-checkbox').ej2_instances[0].checked = false; 
             } 
   } 
</script> 
 
 
 
Regards 
Thavasianand S. 


Stefan
Replied On November 29, 2019 09:27 AM UTC

Works perfectly! 

Thanks 

Stefan

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 29, 2019 09:31 AM UTC

Hi Stefan, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon