Cannot find how to enable single click editing in hierarchy grid

[Ethan Masching]

I have been trying to find a way to reliably enable single click editing in the detail rows in a hierarchy grid. From what I have been able to find you can enable single click editing by referencing the grid through Grid.ej2Instances.detailRowModule.childRefs[0].startEdit(). Though the issue with this is that I cannot find a way to find the index of the childRef that houses the selected row. I cannot find a way to shorten the reference by adding a reference to a child grid either. Is there a way to enable single click editing in detail rows?

[Joseph Christ Nithin Issack]

Hi Ethan,

  Greetings from Syncfusion support.

  Based on your query, you want to perform single click editing on the child grid. Your requirement can be achieved by using the load event of the child grid.

Please refer the below code example.

 

 

data() {

    return {

      parentData: employeeData,

      childGrid: {

        dataSource: data,

        queryString: 'EmployeeID',

        load: load(),

        columns: [

            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },

            { field: 'CustomerID', headerText: 'Customer ID', width: 150 },

            { field: 'ShipCity', headerText: 'Ship City', width: 150 },

            { field: 'ShipName', headerText: 'Ship Name', width: 150 }

        ],

       load: function (){

          this.element.addEventListener('mousedown', function (e) {

          if (e.target.parentElement.classList.contains('orderTemplate')) {

              var instance = this.ej2_instances[0];

              if (instance.isEdit)

                  instance.endEdit();

              var index = parseInt(e.target.closest('.e-rowcell').getAttribute('index'));

              instance.selectRow(index);

              instance.startEdit();

           }

         });

      }

    }

  },