Edit Cells with DropDown List in Angular Grid

Created: 05 Feb 2019

In this article, you will learn how to apply a dropdown list as editor to edit cells in Angular Grid component. You can set the built-in editor to specific column and you can edit all cells that belong to it by simply clicking on a cell and choosing another item from the list.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

How to Apply a DropDown List to Grid Cells

To apply a dropdown list as editor to grid cells is simple. You need to set the editorType field of specific column to DropList and provide an item list in editorSettings field.

import { Component, enableProdMode, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { IntegralUIEditorType } from './integralui/components/integralui.core';

enableProdMode();

@Component({
    selector: 'iui-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;

    private listItems: Array = [
        { text: "None", value: -1 },
        { text: "Delivery Truck", value: 0 },
        { text: "Regular Air", value: 1 },
        { text: "Express Air", value: 2 }
    ];

    constructor(){
        this.columns = [
            { id: 1, headerText: "Order ID", width: 80 },
            { id: 2, headerText: "Customer", width: 200 },
            { 
                id: 3, 
                contentAlignment: "center", 
                headerText: "Ship Mode", 
                headerAlignment: "center", 
                editorType: IntegralUIEditorType.DropList,
                editorSettings: {
                    items: this.listItems
                },
                width: 150
            },
            { id: 4, headerText: "Ship Date", headerAlignment: "center", contentAlignment: "center" },
            { id: 5, headerText: "Quantity", contentAlignment: "right", width: 80 },
            { id: 6, headerText: "Price", headerAlignment: "center", contentAlignment: "right" }
        ];
    }
}
                            
<div class="app-block" #application>
    <iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="grid-celldt-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-celldt-label">{{cell.text}}</span>
        </ng-template>
    </iui-grid>
</div>
                            

Once the list is available, you can add values to the cell that belong to the column with dropdown editor. In case of a dropdown list, the cell value field accepts any object or basic value set in the list items value field. For example:

    // . . .
    this.rows = [
        { 
            id: 1,
            text: "John MacIntyre",
            cells: [{ cid: 1, text: "293" }, { cid: 2, text: "John MacIntyre" }, { cid: 3, value: 1 }, { cid: 4, value: new Date(2016, 9, 21) }, { cid: 5, text: "6" }, { cid: 6, text: "$38.94" } ]
        },
        { 
            id: 2,
            text: "Barry French",
            cells: [{ cid: 1, text: "312" }, { cid: 2, text: "Barry French" }, { cid: 3, value: 2 }, { cid: 4, value: new Date(2018, 6, 16) }, { cid: 5, text: "49" }, { cid: 6, text: "$208.16" } ]
        },
        { 
            id: 3,
            text: "Benjamin Oliver",
            cells: [{ cid: 1, text: "476" }, { cid: 2, text: "Benjamin Oliver" }, { cid: 3, value: 0 }, { cid: 4, value: new Date(2017, 2, 28) }, { cid: 5, text: "27" }, { cid: 6, text: "$8.69" } ]
        },

        // . . .
    ];

                            

As you can see, the cell value field is set to point to different items from the list. You can also set the cell value to null or not set it at all, which will result in showing a cell with blank space with only a dropdown icon.

How to Handle Cell Value Changes from a DropDown Editor

Whenever a new item is selected from the dropdown list, the cell value field changes. This change accompanies two events:

By handling these events in your code, you can change the default behavior. For example, you can set a validation in cellValueChanging event handler to check whether the chosen option from the list is acceptable by the cell that belongs to a specific row. If not, just cancel the event.

beforeValueChange(e: any){
    // In case you dont know the matching row, you can search for rows using the findRowById method
    // and check whether the customer name matches the name you are looking for

    // In this case, the row ID for the Customer 'Barry French' is set to 2
    // If a Ship Mode is set to any other value than Express Air, cancel the event
    if (e.cell && e.cell.rid == 2 && e.value != 2)
        e.cancel = true;
}
                            
<div class="app-block" #application>
    <iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" (cellValueChanging)="beforeValueChange($event)" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="grid-celldt-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-celldt-label">{{cell.text}}</span>
        </ng-template>
    </iui-grid>
</div>
                            

In case of this example, the second row with customer 'Barry French' only accepts a Ship Mode set to 'Express Air'. If a different value is chosen from the dropdown list, the change is cancelled.

How to Change DropDown Editor Appearance

In column object under editorSettings field, you can add a style object, which holds the names of CSS classes that will override the default appearance of the dropdown list. This object has the following format:

{
    list: {
        general: {
            disabled: 'disabledGeneralClassName',
            focused: 'focusedGeneralClassName',
            normal: 'normalGeneralClassName',
            hovered: 'hoveredGeneralClassName',
            selected: 'selectedGeneralClassName'
        }
    }
}
                    

Where general is a group of CSS classes that controls the appearance of the list as a whole for different state. In most cases you will use the normal state.

You can set a different class for each part of the dropdown list. For example, if you want to have a list where even/odd items appear in different color, you can do it in this way:

    // . . .

    editorSettings: {
        items: this.listItems,
        style: {
            list: {
                general: {
                    normal: 'grid-cellddlist-editor'
                }
            }
        }
    },

    // . . .
                            
.grid-cellddlist-editor li{
    background-color: #fcfcfc;
    border-color: #fcfcfc;
}
.grid-cellddlist-editor li:nth-of-type(2n){
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}
.grid-cellddlist-editor li:hover
{
    background-color: #e5e5e5;
    border-color: #e5e5e5;
    padding: 7px 0;
}
                            

Conclusion

In order to edit cells using a dropdown list, you can use the built-in editor of the Grid component for Angular. You can apply a dropdown editor to all cells that belong to a specific column, by changing the editor type and providing a list of options. Whenever a cell is clicked, a dropdown list will popup where you can choose a different option. In addition, you can change the overall appearance of the editor using custom CSS classes.

The Grid component is part of IntegralUI Web.

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.