ComboBox in Aggrid Cell

[lgowrinadh]

Hi,

Please help us in integrating Angular 6 Combo-box or Kendo-Combo-box in Ng-Grid cell with List of Elements. We have tried a lot but didnt got enough results in google. Please help on this.

[jiangyh1024]

@lgowrinadh
Hi do you mean this?

import { Component, ViewChild } from '@angular/core';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
import { ICellEditorAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-select-cell-editor',
  template: `<kendo-combobox #kendoCombobox (valueChange)="onValueChange()"
  [clearButton]="clearButton" style="width:100%" [data]="dropdownData"
  textField="text" [popupSettings]="{'width': '150px'}" valueField="value" [valuePrimitive]="true" [(ngModel)]="value"></kendo-combobox>`
})
export class SelectEditorComponent implements ICellEditorAngularComp {

  //#region Properties

  public dropdownData: any;
  public value: any;
  public clearButton: boolean;

  @ViewChild('kendoCombobox')
  private kendoCombobox: ComboBoxComponent;

  private params: any;

  //#endregion

  //#region Events

  public agInit(params: any): void {
    this.params = params;
    this.value = params.value;
    this.dropdownData = params.values;
    this.clearButton = !!params.clearButton;

    // open it
    this.kendoCombobox.toggle(true);
  }

  public onValueChange(): void {
    this.params.api.stopEditing();
  }

  public getValue(): any {
    return this.value;
  }

  //#endregion
}

and use it in aggrid

[jiangyh1024]

you mean Viewchild did not get the instance of kendo combobox？？ that's weird.

[jiangyh1024]

can u post your code？

[jiangyh1024]

I am confused. why u use kendogridedittemplate directive？ if you want to pass rowindex to the select editor. pass it through params. see cellEditorSelector,

[jiangyh1024]

return {component: 'selectEditorComponent',
params:{
rowIndex: this can be get from CellEditorSelecor
}}

[jiangyh1024]

yes, just add rowindex below values property and get it from params you can console.log(params) to find the rowindex

[jiangyh1024]

and in your selectEditorComponent, in agInit function ， you can get rowindex by calling params.rowindex

[jiangyh1024]

or you even do not need to pass rowindex. because you can get it directly from params in aginit function, just print it and see

[madhukudala]

@jiangyh1024
When I use kendo combo box as you suggested above it's rendering. But I am facing below issues

Let's say you have 4 columns and you have combo box in coulmn 3 and rest are inputs
Entered value in col 1 and clicked tab it moved col 2 and I am able to enter value directly
Entered value in col 2 and clicked tab it moved col 3 it's focused but
I am unable to enter value directly and when click tab it's not moving to col 4

And I am not getting the custom value entered. But the same code working independently out side of the grid.

<kendo-combobox tabindex="-1" #kendoCombobox [clearButton]="true" [data]="dropDownData" [allowCustom]="true" [filterable]="true" (filterChange)="onFilterChange($event)" (valueChange)="onValueChange(dropDownValue)" [(ngModel)] = "dropDownValue"> </kendo-combobox>

Do you have any solution for this?

[jiangyh1024]

@madhuinwiter use cell editor

call focus methods

pressing tab key to the next cell does not work for me only when I put the grid in a dialog (primeng dialog). when I debug it, the next cell is actually focused

But after exiting debug mode, the focus is lost. I don't know why.

you can try to add a breakpoint here to see if the next cell is focused after pressing tab key

[jiangyh1024]

I found that it is something related to tabindex on others component

[madhukudala]

@jiangyh1024
What about the value that enter in combo box is getting erased when I press TAB?

[jiangyh1024]

@madhuinwiter if u want to keep the custom select value, then put it to your dropdown datasource
when exiting edit mode 'getValue()' method will be called, just add it to you dropdown datasource and return the value you input

[MalleswaraoBandi]

Here I have given custom value in kendo combo box and pressed tab the custom entered data got erased.

Here the custom entered value got erased.

After selecting the value with arrow keys and press tab also loosing the selected value.

[jiangyh1024]

...Your dropdown data source is not updated.

[MalleswaraoBandi]

How to updated the data source with custom value and I am loosing the selected value on tab click.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[biels]

What is the standard way of putting a combobox / dropdown / typeahead cell editor in ag-grid in 2020? Not even the enterprise version of the select cell editor has search functionality at the moment.

[gportela85]

@biels The agRichSelect will search for values as you type, but it doesn't have a textfield with the typeahead functionality built-in. If you need something more elaborate for your project the advice is to go with your own custom components.

You can check the agRichSelect by going to the main demo: https://www.ag-grid.com/example.php and editing a cell in the country column.

[biels]

Okay, thanks for your reply. Do you have have any reference to an implementation or how to implement such custom control?