Grid with Combobox that allows custom

Question

Sir, I have a simple grid with a ejs-combobox copied from your example https://ej2.syncfusion.com/angular/documentation/combo-box/getting-started/#custom-values When the combobox is inside a grid, then the custom values do not workWhat must I do to allow both the drop down and a custom value, as is the standard behaviour of a combobox

`

Rajapandiyan Settu · Answer

Hi James,Thanks for contacting Syncfusion support.Based on your requirement, you want to use ComboBox control to edit a column in the Grid. You can achieve this by using EditTemplate feature of the Grid.EditTemplate: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#using-templateBy using the ngModel property, you can save the value to the Grid. [app.component.html]

[app.componen.ts] actionBegin(args) { if (args.requestType === 'beginEdit' || args.requestType === 'add') { this.orderData = Object.assign({}, args.rowData); // store the rowData } if (args.requestType === 'save') { args.data['ShipCountry'] = this.orderData['ShipCountry']; // saved the edited value to the Grid } } Sample: https://stackblitz.com/edit/angular-u5gfkz?file=app.component.html,app.component.tsPlease get back to us if you need further assistance with this.Regards,Rajapandiyan S

Dayakar Reddy · Answer

Hi Syncfusion team,I am unable to allow the custom value in grid column of type "dropdownedit" ,How can i achieve the custom value from dropdown of below column type without ng template ?

Rajapandiyan Settu · Answer

Hi Dayakar,Thanks for contacting Syncfusion support.Query: How can i achieve the custom value from dropdown of below column type without ng template ?We 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/angular/documentation/grid/editing/edit-types/#custom-editors-using-templateThe 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 a custom component 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. [app.component.html] [app.component.ts] public ngOnInit(): void { this.editparams = { create: () => { var elem = document.createElement('input'); return elem; }, read: () => { return this.dropdownObj.value; // return the value which will be saved to the Grid }, destroy: () => { this.dropdownObj.destroy(); }, write: (args) => { // create a dropdown component to edit a column this.dropdownObj = new DropDownList({ // bind the dataSource as you want dataSource: this.dropdownData, // bind the cell value to the dropdown fields: { text: 'ShipCountry', value: 'ShipCountry' }, value: args.rowData[args.column.field], }); this.dropdownObj.appendTo(args.element); }, }; } Sample: https://stackblitz.com/edit/angular-7kakhb-er4szo?file=app.component.ts,app.component.htmlYou can also provide custom dataSource to the dropdown through the editParams. Refer to the below code documentation for more information.https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#provide-custom-data-source-and-enabling-filtering-to-dropdownlistPlease let us know if you have any concerns.Regards,Rajapandiyan S

Dayakar Reddy · Answer

HI,In the below example i can enter custom country name like '1234' on grid row edit.https://stackblitz.com/edit/angular-u5gfkz?file=app.component.html,app.component.ts but in this below example i can not enter custom country value like '1234' on grid row edit.

So can you help me to enter custom value for dropdown on the grid row edit for below example as well.https://stackblitz.com/edit/angular-7kakhb-er4szo?file=app.component.ts,app.component.html

Rajapandiyan Settu · Answer

Hi Dayakar,Thanks for your update.Query: i cannot enter custom country value like '1234'
on grid row edit. So can you help me to enter custom value for dropdown on
the grid row edit for below example as well.In the Dropdown control, the user is able to select the data
only from the popup and cannot type value on input. Since this is the behavior
of Dropdown component.If you want to type a value on the input element and also
select a value from the popup, you can use ComboBox component.ComboBox: https://ej2.syncfusion.com/documentation/combo-box/data-binding/#2-array-of-json-data

import { ComboBox } from '@syncfusion/ej2-dropdowns';
   
  export class AppComponent {
   
    public editparams: Object;
   
    public ngOnInit(): void {
      this.editparams = {
        create: () => {
          var elem = document.createElement('input');
          return elem;
        },
        read: () => {
          return this.comboBoxObj.value;
        },
        destroy: () => {
          this.comboBoxObj.destroy();
        },
        write: (args) => {
          // create a comboBox component
          this.comboBoxObj = new ComboBox({
            // bind the dataSource
            dataSource: this.dropdownData,
            fields: { text: 'ShipCountry', value: 'ShipCountry' },
            // bind the cell value to the dropdown
            value: args.rowData[args.column.field],
            query: new Query(),
          });
          this.comboBoxObj.appendTo(args.element);
        },
      };
    }
  }

Sample: https://stackblitz.com/edit/angular-7kakhb-pwuyq2?file=app.component.tsYou can also use AutoComplete component to achieve
your requirement.AutoComplete: https://ej2.syncfusion.com/documentation/auto-complete/data-binding/#array-of-objectPlease let us know if you have any concerns.Regards,Rajapandiyan S