Is it possible to have edit type for Combo box?

[Thin Sapal Yu]

Hi,

Is it possible to have edit type for Combo box?

I would like to have a cell with combo box which display, edit, delete  data from Jason data.

Thanks

Thin

[Rajapandiyan Settu]

Hi Thin,

Thanks for contacting Syncfusion support.

Based on your requirement, you want to edit a column with the Combo-box component.  You can achieve your requirement by using cellEditTemplate feature of Grid. In which you can customize the edit component as per our need.

CellEditTemplate: https://ej2.syncfusion.com/documentation/grid/editing/edit-types/#custom-editors-using-template

The cell edit template is used to add a custom component for a particular column by invoking the following functions:

• create - It is used to create the element at the time of initialization.
• write - It is used to create custom components or assign default value at the time of editing.
• read - It is used to read the value from the component at the time of save.
• destroy - It is used to destroy the component.

 

[index.js]

 

export class NormalEdit extends SampleBase {

  comboboxObj;

  shipCountryEditTemplate = {

    create: () => {

      var elem = document.createElement('input');

      return elem;

    },

    destroy: () => {

      this.comboboxObj.destroy();

    },

    read: () => {

      return this.comboboxObj.value;  // return the value which will be saved to the Grid

    },

    write: (args) => {

      this.comboboxObj = new ComboBox({

        // bind the Data to datasource property

        dataSource: hierarchyOrderdata,

        floatLabelType: 'Always',

        // bind the cell value

        value: args.rowData[args.column.field],

        // maps the appropriate column to fields property

        fields: { text: 'ShipCountry', value: 'ShipCountry' },

      });

      this.comboboxObj.appendTo(args.element);

    },

  };

 

  render() {

    return (

      <GridComponent

        dataSource={hierarchyOrderdata}

        ref={(grid) => (this.gridInstance = grid)}

        toolbar={this.toolbarOptions}

        allowPaging={true}

        editSettings={this.editSettings}

      >

        <ColumnsDirective>

          <ColumnDirective

            field="ShipCountry"

            headerText="Ship Country"

            width="150"

            edit={this.shipCountryEditTemplate}

          ></ColumnDirective>

        </ColumnsDirective>

        <Inject services={[Page, Toolbar, Edit]} />

      </GridComponent>

    );

  }

}

 

Sample: https://stackblitz.com/edit/react-a9kykh?file=index.js

Please let us know if you have any concerns.

Regards,

Rajapandiyan S