Is there a way to make these grid columns always editable with the sync fusion grid edit inputs?

Question

My Intention is to make only specific columns editable in a sync fusion grid. I'm aware of the ability to use the template field to make grid column always editable. The only downside of this is that I lose the sync fusion styles and the dropdown select option doesn't seem to work well. Below is a code example

var ordersGrid = new ej2Grids.Grid({ 
     dataSource: this.customerHeaders, 
     allowTextWrap: false, 
     selectionSettings: { type: "Multiple", persistSelection: true, checkboxOnly: true, },
     editSettings: { allowEditing: true, mode: "Normal" }, 
     columns: [ 
         { type: 'checkbox', width: 50 }, 
         { field: "customerId", name: "Customer", headerText: 'Customer', id: "customerId",
           width: "100px", allowEditing: false }, 
         { headerText: "Order Type", field: "orderType", width: "100px", 
                    template: "<select //etc...>"
                    editType: "dropdownedit", 
                    edit: { 
                        params: { 
                           query: new ej2Data.Query(), 
                           dataSource: [ { shipping: 'Standard'}, { shi[ping: 'Rush'} ], 
                           fields: { value: "orderType", text: "orderType" }, } 
                                     } 
                            }
             ] 
       });

Joseph Christ Nithin Issack · Answer

Hi Jason,  Greetings from
Syncfusion support.  Based on your query,
you want to make the grid always editable. We have already discussed the same
in the below documentation. Please refer the below documentation for more
details.  Documentation:
https://ej2.syncfusion.com/javascript/documentation/grid/editing/edit#how-to-make-a-grid-column-always-editableRegards,Joseph I.

Jason Nham · Answer

I did refer to that documentation, but the issue I'm having is I'd like for the input in the template to use the sync fusion component style.

Additionally when attempting that example into my project, it doesn't prevent the double click to edit on the grid. So Although I am adding like an input to that column to allow it to always be editable, I'd like to put an EJ2 Dropdown in that column, similar to how the inherent grid column "dropdownedit" looks / works.

Vikram Sundararajan · Answer

Hi Jason Nham,We have reviewed your query about setting a grid column
always editable with dropdown edit. This requirement has been achieved using
dropdownlist component and updating the data in the change event of the
dropdownlist component using updateRow() method of the grid. The code snippet
of the implementation and sample have been attached for your reference.

Index.ts
   
  function queryCellInfo(args) {
    if (args.column.field === 'ShipCountry') {
      var ele =
  args.cell.querySelector('input');
      ele.value = args.data.ShipCountry;
      var drop = new ej.dropdowns.DropDownList({
        popupHeight: 150,
        dataSource: countryData,
        fields: { value:
  'ShipCountry', text: 'ShipCountry' },
        change: change,
        popupWidth: 150,
      });
   
      drop.appendTo(ele);
    }
  }
  function change(args) {
    //change event of the dropdownlist
   
    var row = args.element.closest('.e-row');
    var rowIndex =
  args.element.closest('.e-row').rowIndex;
    var uid = row.getAttribute('data-uid');
    var rowData =
  grid.getRowObjectFromUID(uid).data;

rowData.ShipCountry = args.value;
    // updating the rowData in the grid
   
  grid.updateRow(rowIndex, rowData);
    console.log(grid.dataSource);
  }

Sample: https://stackblitz.com/edit/6tpbtb-gdvkra?file=index.js,index.htmlAPI Documentation: https://ej2.syncfusion.com/documentation/api/grid/#updaterowPlease let us know if you need any further assistance.Regards,Vikram S