Edit Cell Label with Text Editor in Angular Grid

Created: 19 Feb 2019

In most cases, the grid cells that have a text or label are non-editable. In you need to edit the cell label you can use the Text Editor, which is part of the Grid component for Angular. In article, you will learn how to work with built-in text editor and how to customize it via CSS.

* Icons used in this sample are provided by icondrawer.com

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

In above demo, cells in Company column are editable. When you click on the cell, a textbox will popup where you can enter a new string. To confirm the change press the ENTER key, this close the editor and apply the new string to the cell. If you click outside the cell or press the ESCAPE key, the editor will close and the change is cancelled.

How to Enable the Text Editor in Angular Grid Cells

By default, grid component displays text in all cells. To enable the editing of cell text or label, you need to set the editorType of specific column to TextBox. This allows you to enter new text for cells during run-time.

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;

    constructor(){
        this.columns = [
            { 
                id: 1,
                editorType: IntegralUIEditorType.TextBox,
                headerText: "Company", 
                width: 300
            },
            { id: 2, headerText: "Price", headerAlignment: "center", contentAlignment: "right" },
            { id: 3, headerText: "Date", headerAlignment: "center", contentAlignment: "center" },
            { id: 4, headerText: "Country", headerAlignment: "center", width: 180 }
        ];
    }
}
                            
<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-celltxt-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span [ngSwitch]="cell.cid">
                <div *ngSwitchCase="4">
                    <span class="grid-celltxt-flags" [ngClass]="cell.icon"></span>
                    <span class="grid-celltxt-country">{{cell.text}}</span>
                </div>
                <span *ngSwitchDefault>
                    <span class="grid-celltxt-label">{{cell.text}}</span>
                </span>
            </span>
        </ng-template>
    </iui-grid>
</div>
                            

Note By setting the editorType, all cells in specified column will display values based on the chosen editor. If you want to display a different content in the grid cell, don't specify the editor, instead use the cell template.

Once the editor is set to Text, you can activate it by clicking inside the grid cell. A text box will popup and you can enter a new text. To confirm the change, press ENTER, to cancel it press ESCAPE key. The change is also cancelled if you click outside the cell space.

How to Handle Cell Value Changes by the Text Editor

When a new string is entered in the text editor and the change is confirmed, the cell text field changes to a new text. When this happens, the cellValueChanged event is fired. The event data includes the cell object and the new text.

You can handle this event in your code and add additional actions, like updating the server data with a new value for specified cell.

textValueChanged(e: any){
    console.log("Cell text changed to: ", e.text);
}
                            
<div class="app-block" #application>
    <iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" (cellValueChanged)="textValueChanged($event)" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="grid-celltxt-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span [ngSwitch]="cell.cid">
                <div *ngSwitchCase="4">
                    <span class="grid-celltxt-flags" [ngClass]="cell.icon"></span>
                    <span class="grid-celltxt-country">{{cell.text}}</span>
                </div>
                <span *ngSwitchDefault>
                    <span class="grid-celltxt-label">{{cell.text}}</span>
                </span>
            </span>
        </ng-template>
    </iui-grid>
</div>
                            

Customize the Appearance of Text Editor

The text editor is actually an input element where its appearance is determined by a single CSS class. By modifying this class, you can alter editor appearance.

  • iui-editor- textbox - controls the overall appearance of the text editor

You cannot modify this class directly, because changes will be applied to all text editors that are part of other grids that you may have on your page. Instead, use the controlStyle property of the angular Grid component and CSS selector to modify the text editor indirectly. In this way, any changes to this class will apply only to selected grid.

For example, let's say that when text editor appears, you want to have a border in green color, text in a larger font size with selection in light green color. You can do this by first creating a CSS class for the grid component and then using CSS selector to apply changes to the text editor class:

public gridStyle: any = {
    general: {
        normal: 'grid-celltxt-normal'
    }
}
                            
.grid-celltxt-normal .iui-editor-textbox {
    background: white;
    border: thin solid #009900;
    font-size: 1.1rem;
    padding: 3px;
    width: 96%;
}
.grid-celltxt-normal .iui-editor-textbox::-moz-selection {
    background: #24cc24;
}
.grid-celltxt-normal .iui-editor-textbox::selection {
    background: #24cc24;
}
                            

Conclusion

In general, you cannot edit the text that is displayed in the cells of the IntegralUI Grid component for Angular. You can enable editing by selecting a text editor for specific grid column. Whenever a cell is clicked, the text editor will popup where you can enter a new value. In addition, using CSS you can modify the editor appearance.

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.