Enable editing in single click in EJ2 JavaScript Grid control

[Electa Baker]

I have a 3-level hierarchical grid (parent grid, child grid, an grandchild grid) and I followed the instructions found at this page: Enable editing in single click in EJ2 JavaScript Grid control. I have checked the browser's debugging window and I can confirm that the function (below) is being called when I click on a cell in a grandchild grid, but the cell does not enter the "edit-able" state. Please will you help me identify what I am doing wrong or suggest an alternative approach that will work.

var instance = document.getElementById(this.element.id).ej2_instances[0];
instance.element.addEventListener('mouseup', function (e) {
    var index = parseInt(e.target.getAttribute("index"));
    var field = parseInt(e.target.dataset.colindex);
    if (e.target.classList.contains("e-rowcell")) {
        if (instance.isEdit)
            instance.endEdit();
        instance.selectRow(index);
        instance.startEdit();
    };
});

[Aishwarya Rameshbabu]

Hi Electa Baker,

Greetings from Syncfusion support.

After examining your inquiry, it appears that you are experiencing difficulty enabling single-click editing in the Grid. We have developed a sample using the information provided and successfully edited the grandchild of the Grid with a single click. Please review the attached sample, code example, and video demonstration. Additionally, please ensure if editing has been enabled for the grandchild and if it includes a primary key column.

Code Example:

Index.js

 

            childGrid: {

                dataSource: customerData,

                queryString: 'CustomerID',

                toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },

                load: function(args) {

                    debugger

                    var instance = this.element.ej2_instances[0];

                    instance.element.addEventListener('mouseup', function(e) {

                        if (e.target.classList.contains("e-rowcell")) {

                            if (instance.isEdit)

                                instance.endEdit();

                                var index = parseInt(e.target.getAttribute("Index"));

                                instance.selectRow(index);

                                instance.startEdit(); 

                        }

                    })

                }, 

                columns: [

                    { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', isPrimaryKey:true, width: 75 },

                    { field: 'ContactName', headerText: 'Contact Name', width: 100 },

                    { field: 'Address', headerText: 'Address', width: 120 },

                    { field: 'Country', headerText: 'Country', width: 100 }

                ]

            }

 

Sample: https://stackblitz.com/edit/mjupjx-rjw8pc?file=index.js,index.html

Video Demo: Please find in attachment.

If you continue to experience difficulties, we kindly request you to provide the following information in order to assist us in further evaluating the issue:

1. Please provide the complete code for rendering the Grid, including any event handler functions.

2. Indicate whether remote or local data binding is being utilized in the Grid.

3. If remote data binding is used, please specify the type of adaptor being used.

4. Please share the Syncfusion package version you are using currently.

5. If possible, please share a simplified sample demonstrating the issue, along with a video demonstration or screenshot.

6. Alternatively, attempt to replicate the issue in the provided sample for further analysis.

Regards

Aishwarya R

Attachment: SingleClickEdit_12606aca.zip