Advanced User Interface Controls and Components
Created: 19 Feb 2019
When Grid displays numbers in its cells, in order to edit them during run-time you can use the built-in editor of IntegralUI Grid component for Angular. This numeric editor when enabled, displays an input box where you can change the current cell value to a different number, either by entering a new value or using the up and down buttons.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, all cells in the Quantity column are having the Numeric editor enabled. By clicking inside the cell, the editor gets the input focus and you can enter a new value. The change is two-directional, meaning when a new value is entered in the editor, the cell value changes, and vice versa.
In order to use the numeric editor in grid cells, you need to set the editorType of the column object to Numeric. This allows you to use numbers (integer or decimal), as cell value.
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, headerText: "Order ID", width: 80 },
{ id: 2, headerText: "Customer", width: 200 },
{ id: 3, headerText: "Ship Mode", width: 150 },
{ id: 4, headerText: "Ship Date", headerAlignment: "center", contentAlignment: "center" },
{
id: 5,
contentAlignment: "center",
headerText: "Quantity",
headerAlignment: "center",
editorType: IntegralUIEditorType.Numeric,
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-cellnum-label">{{column.headerText}}</span>
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span class="grid-cellnum-label">{{cell.text}}</span>
</ng-template>
</iui-grid>
</div>
Once the editor is set to Numeric, it is displayed inside the cell space showing the number that is set in cell value field. Whenever a new number is entered in the editor, the change is applied to the cell value. Also, because of two-directional binding, any change to the cell value from code, it's applied to the numeric editor.
You can modify the behavior of the editor using the editorSettings, which is part of the column object. Here you can set the minimum and maximum values that are acceptable by the editor, usually these values are set to 0 and 100 respectively.
this.columns = [
// . . .
{
id: 5,
contentAlignment: "center",
headerText: "Quantity",
headerAlignment: "center",
editorType: IntegralUIEditorType.Numeric,
editorSettings: {
min: 1,
max: 1000
},
width: 80
},
// . . .
];
Using the code above, the minimum and maximum numbers are set to 1 and 1,000.
When a new number is entered in the numeric editor, the cell value field changes accordingly. With each change the cellValueChanged event fires , which you can handle in your code. This event carries the cell object and the new value that is set.
numberChanged(e: any){
console.log("Cell value changed to: ", e.value);
}
<div class="app-block" #application>
<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" (cellValueChanged)="numberChanged($event)" #grid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
<span class="grid-cellnum-label">{{column.headerText}}</span>
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span class="grid-cellnum-label">{{cell.text}}</span>
</ng-template>
</iui-grid>
</div>
Using this event, you can add custom actions depending on the cell which value has changed.
The numeric editor is actually an input element where its appearance is controlled by a single CSS class. By changing this class, you can alter the editor appearance.
You cannot modify this class directly, because if you have other grids on the same page, the change will be applied to all editors. Instead, you can use the controlStyle property of the angular Grid and with CSS selector to modify the numeric editor indirectly. In this way, any changes to this class will apply only to selected grid.
public gridStyle: any = {
general: {
normal: 'grid-cellnum-normal'
}
}
.grid-cellnum-normal .iui-editor-numeric {
background: white;
border: thin solid #cecece;
color: #2424cc;
padding: 3px;
width: calc(100% - 6px);
}
In this example, the editor has a tiny border where numbers appear in blue color.
To edit cells with numbers you can use the built-in numeric editor that is part of IntegralUI Grid component for Angular. This editor allows you to set a range of minimum and maximum values that can be entered inside the cell. Whenever cell value changes, an event is fired, which you can handle in your code and provide custom actions. At last, you can modify the way the editor looks by setting different CSS styles to the editor class.
The Grid component is part of IntegralUI Web.