Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jeff Kelso
610
Embedded igx-combo within a cell of an igx-grid control
posted

Is it possible to have an embedded igx-combo within and igx-grid control.  My users want a grid where they can edit data but have drop downs in certain cells to select from.

Thanks,

JK

  • 20255
    Offline posted in reply to Steven Johnson

    Yes, there is. I've updated the drop-down sample to show how to navigate through dropdown items with (keydown.ArrowDown) click when the cell is in edit mode. 

    Steps:

    1.Enter edit mode either directly with "Reorder Level" column, or from any other column (and use tab to navigate to Reorder LeveL)

    2. Press Arrow Down Keyboard button

    3. The dropdown is opened

    4. Use Arrow Down/Up to navigate through the items

    5. Use enter to select and submit the selected item

    All of the above is achievable by adding a small amount of custom code, along with igxFocus directive usage in the input element.

    Code (ts):

      public select(evt, cell) {
        const val = this.dropDownData[evt.newSelection.index].amount;
        cell.update(val);
      }

      public openDropDown() {
        if (this.dropDown.collapsed) {
          this.dropDown.open({
            modal: false,
            positionStrategy: new ConnectedPositioningStrategy({
              target: this.inputGroup.element.nativeElement
            })
          });
        }
      }
    Code (HTML):
    <igx-column field="ReorderLevel" header="Reorder Level" [dataType]="'number'" width="19%" [editable]="true">
            <ng-template igxCellEditor let-cell="cell" let-value>
              <igx-input-group #inputGroup (keydown.ArrowDown)="openDropDown()" [igxToggleAction]="dropDown">
                <input igxInput [igxDropDownItemNavigation]="dropDown" 
                    name="drop-down-target" 
                    type="text" 
                    [igxFocus]="true" 
                    [(ngModel)]="cell.value" />
                <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
                    <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
                </igx-suffix>
              </igx-input-group>
              <igx-drop-down #dropDown (onSelection)="select($event, cell)">
                <igx-drop-down-item *ngFor="let item of dropDownData">{{item.amount}}</igx-drop-down-item>  
              </igx-drop-down> 
            </ng-template>
        </igx-column>
  • 20255
    Verified Answer
    Offline posted

    Hello JK,

    The scenario that you have described could be achieved with both igxCombo and igxDropDown. My personal favorite is the igxDropDown approach, it is easy to implement and it won't need so much additional configurations for value submission.

    Below you will find samples for both implementations:

    - igxGrid with igxCombo editor

    - igxGrid with igxDropDown editor