Grid with inserted Combobox

[Grzegorz Golen]

Dear Sirs, 

I'm trying to get Combobox working inside of grid. 

The code below is placed in file items.component.html (not items.component.ts) what seems to have impact on possible aproach to the problem. 

I would like to have a Combobox in row 3 - column "List or Combobox" <e-column field='type' headerText='List or Combobox' textAlign='Left' width=90></e-column>

I have tried to implement it by a template, however it seems that this does not work with files .html. When I have tried to move this grid from file items.component.html to items.component.ts it generated many problems and generally does not work, so I would like to keep it in current file (html file), however with adding of Combobox to it. Is there any way to achieve this? It is not necessary to import data from existing enum in backend, I can manually provide this data to list or combobox, however there must be such list because only specified strings that match the strings in enum (backend) can be passed to DB and persisted.

If you have experience with such problems, I would be grateful for advice or hint how to overcome this. 

<h1>List of items</h1>

<div #container class='root-container'>

  <ejs-grid #grid [dataSource]='data' [enableHover]="false" [allowSelection]="true" [selectionSettings]="selectOptions" [allowPaging]="true"

            [editSettings]='editSettings' [toolbar]='toolbar' height='256px'  [showColumnChooser]='true' [allowSorting]="true"

            [pageSettings]="pageSettings" [editSettings]='editSettings'>

    <e-columns>

    <!--<e-column type='checkbox' width='30'></e-column>-->

      <e-column field='idn' headerText='Item_1' textAlign='Left' width=90></e-column>

      <e-column field='description' headerText='Item_2' textAlign='Left' width=135></e-column>

      <e-column field='type' headerText='List or Combobox' textAlign='Left' width=90></e-column>

      <e-column field='isActive' headerText='Item_3' [visible]='false' textAlign='Left' width=45></e-column>

    </e-columns>

  </ejs-grid>

  <ejs-dialog id='dialog' #ejDialog allowDragging='true' [visible]='false' header='Potwierdzenie usunięcia'

              content='Czy chcesz kontynuować?' [target]='targetElement' width='350px' [buttons]='dialogButtons'>

  </ejs-dialog>

</div>

[Hariharan J V]

Hi Grzegorz Golen, 

You can achieve your requirement by using ‘column.template’, a property which has options to display custom element instead of a field value in the column. We have prepared a simple sample in which we have appended the Essential JavaScript 2 ‘ComboBox’ to the column template in “queryCellInfo” event of Grid component. Please refer the following code example, sample link and documentation link. 

[app.component.ts] 

@Component({ 

    selector: 'app-container', 

    templateUrl: 'app.component.html' 

}) 

 

export class AppComponent implements OnInit { 

 

    public data: Object[]; 

    public country: string[] = ['France', 'Germany', 'Brazil', 'Belgium', 'Switzerland', 

    'USA', 'Austria', 'Mexico', 'Austria', 'Venezuela']; 

    @ViewChild('grid') 

    public grid: GridComponent; 

        ngOnInit(): void { 

            this.data = data; 

        } 

        queryCellInfo(args: any) { 

            if (args.column.field === 'ShipCountry') { 

                const targEle1: HTMLInputElement = args.cell.querySelector('.e-cmb'); 

                targEle1.id = 'e-cmb' + args.data[this.grid.getPrimaryKeyFieldNames()[0]]; 

               const comboBoxObj: ComboBox = new ComboBox({ 

                   dataSource: this.country, 

                   value: 'France', 

                   placeholder: 'Select a country}); 

               comboBoxObj.appendTo(targEle1); 

            } 

        } 

} 

[app.component.html] 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' allowPaging='true' (queryCellInfo)='queryCellInfo($event)'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [isPrimaryKey]='true'></e-column> 

            .  .  .  .  .  .  . 

            <e-column field='ShipCountry' headerText='ShipCountry' width='150'> 

                <ng-template #template let-data> 

                    <div class="e-combo"> 

                          <input class='e-cmb'/> 

                    </div> 

                </ng-template> 

            </e-column> 

        </e-columns>      

    </ejs-grid> 

Sample                : http://www.syncfusion.com/downloads/support/directtrac/general/ze/comboBox-109992805  

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/columns.html#column-template  

                               https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#querycellinfo  

Regards, 

Hariharan 

[Grzegorz Golen]

Dear Hariharan, 

Thank you for your help, after few days of working on the other parts of project I have returned to this problem and thanks to your guides managed to achieve the desired output. 

Kind regards. 

Grzegorz 

[Madhu Sudhanan P]

Hi Grzegorz, 

We are glad that your requirement has been achieved. 

Regards, 

Madhu Sudhanan P