Advanced User Interface Controls and Components
IntegralUI Grid is a native Angular component that displays tabular data sets. You can load data on demand from local or remote data sources. Each grid cell has a template where you can place custom HTML elements or other Angular components and arrange them in custom layouts. This includes adding custom editors like checkbox, dropdown list, date picker, progress bar, rating, text and other editor types. In following sections, you can find details about various features available in the Grid component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
An example of Grid where data is arranged dynamically by different groups. Initially, there are two groups present, the 'Year' and 'Genre'. But you can create other groups by:
When you have more than one group present, you can reorder them by click and drag over the group title. The grid data will auto-update based on current group order. This allows you to change the Grid data on demand.
Columns are also auto-sized so that they fit the grid width in whole. This removes the horizontal scrollbar and column resize is handled within the grid size.
In order to use the Grid component in your app, you need to do the following:
public columns: Array;
public rows: Array;
constructor(){
this.columns = [
{ id: 2, headerText: "Title", allowDrag: false, allowDrop: false, allowGrouping: false, width: 300 },
{ id: 1, groupText: "True/False", contentAlignment: 'center', width: 30, fixedWidth: true },
{ id: 3, headerText: "Year", headerAlignment: "center", contentAlignment: "center", width: 70 },
{ id: 4, headerText: "Genre", headerAlignment: "center", contentAlignment: "center", width: 50, visible: false },
{ id: 5, headerText: "Ratings", headerAlignment: "center", contentAlignment: "center", width: 170, fixedWidth: true },
{ id: 6, headerText: "Released", allowGrouping: false, headerAlignment: "center", contentAlignment: "center", width: 130 }
];
this.rows = [
{
id: 1,
text: "Inception",
cells: [{ cid: 1, value: true }, { cid: 2, text: "Inception" }, { cid: 3, text: "2010" }, { cid: 4, text: "Adventure", icon: "adventure" }, { cid: 5, value: 8.8 }, { cid: 6, text: "16 Jul 2010" } ]
},
{
id: 2,
text: "Gravity",
cells: [{ cid: 1 }, { cid: 2, text: "Gravity" }, { cid: 3, text: "2013" }, { cid: 4, text: "Sci-Fi", icon: "sci-fi" }, { cid: 5, value: 7.9 }, { cid: 6, text: "04 Oct 2013" } ]
},
// . . .
//
// The full data set is available at https://stackblitz.com/edit/integralui-grid-grouping
//
];
}
<iui-grid [columns]="columns" [rows]="rows">
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
{{column.headerText}}
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
{{cell.text}}
</ng-template>
<ng-template let-column [iuiTemplate]="{ type: 'footer' }">
{{column.footerText}}
</ng-template>
</iui-grid>
If required, you can have a different content in each grid cell. By setting custom conditions (for example using the ngIf directive, a different content can be applied to a different cell.
<iui-grid [columns]="columns" [rows]="rows">
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
{{column.headerText}}
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span [ngSwitch]="cell.cid">
<span *ngSwitchCase="4"> <!-- GENRE -->
<span class="grid-grp-icons {{cell.icon}}"></span>
</span>
<span *ngSwitchCase="5"> <!-- RATING -->
<iui-rating [controlStyle]="gridOverviewRatingStyleStars" [(ngModel)]="cell.value" [max]="5" [division]="2" (valueChanged)="onRatingValueChanged($event, cell)"></iui-rating>
</span>
<span *ngSwitchDefault>
<span class="grid-grp-cell-label">{{cell.text}}</span>
</span>
</span>
</ng-template>
<ng-template let-column [iuiTemplate]="{ type: 'footer' }">
{{column.footerText}}
</ng-template>
</iui-grid>
In order for Grid to work with tour data source, the columns and rows properties must point to your data set. In this way, a change to the data like reordering during drag drop operations is reflected to the data set. During these processes, various events are fired. By handling these events in the code, you can update your data source.
Your data source can have different field names then the ones used by the Grid component. You can find more information about this in below section of data binding.
There are multiple different ways to change the appearance and behavior of the Grid component. You can find a detailed list for each property, event and method that you can use at Grid online help.
When you have a custom data source that may differ from internal data settings of the grid, you can use data binding which will match the names of data fields in your data source with those used by the grid.
By specifying the columns and rows properties to point to your data object, along with dataFields property that holds an object that maps the names of fields in the data object, you can populate the Grid using any kind of custom data source.
Grid component comes with advanced drag drop that allows you to reorder rows by simply dragging one or multiple rows from one place to another within the same or other components.
During this process, events are fired that can help you to add custom actions that may alter the default built-in drag drop functionality. In each event, you can set up custom conditions that can prevent or allow drag drop in special cases, depending on your application requirements.
Whenever a row is dragged, a dragging window will appear showing the target row and position at which row can be dropped. There are three possible positions:
A demonstration of drag and drop is available here: Drag Drop between Grid and TreeGrid in Angular.
By default, during drag and drop rows are moved from their original position to a new one. In some cases, instead of moving you may need to create a copy of dragged rows. Copy operation is already built-in, you only need to press and hold the SHIFT key, when row is dropped. The dragging window will change its icon showing a + sign. This states that copy of dragged row will drop at specified position.
An example that shows how to filter the Grid content using multiple different conditions in different combinations for each column separately is available here: Angular Grid Filter.
For filtering operations we are using the IntegralUIFilterService, which provides many ways to set string, numeric or custom filtering using multiple conditions with AND / OR combinations for each column separately.
IntegralUI Grid component for Angular comes with built-in support for sorting operations. You can either use the built-in sort functionality or create your own custom sorting. You can find detailed information about sorting here: Custom Sorting in Angular Grid.
By default, a single selection mode is active, which means that only one row can become selected at one time. You can change this by setting the selectionMode property to a different value and allow multiple rows to become selected.
You can also select multiple rows using the selectRows method. This method accepts an array of row objects. You can call this method from your app code and select rows manually without user interaction.
There is already built-in virtualization in the Grid, which allows you to display hundreds of thousands of rows at one time. The only limit here is how much data the browser can handle.
The Grid is optimized to work with large data sets. You can load your data set initially into the Grid, and update only small portion on your server when required. All work is done on the client side, which increases overall user interaction.
Each part of IntegralUI Grid component is fully customizable. There are different CSS classes for each component part. Although changing the attributes of built-in classes is possible, you can completely override them using the controlStyle property.
The controlStyle property accepts an object that holds all or partial list of CSS class names that will override the default CSS class names. For each component part, a different CSS class governs its appearance. This allows you to specify a set of different CSS classes for each component part and alter the appearance of the Grid in whole. In this way, you can make it more suitable for your application requirements.
gridStyle = {
general: {
disabled: 'iui-grid-disabled',
focused: 'iui-grid-focused',
normal: 'iui-grid',
hovered: 'iui-grid-hovered',
selected: 'iui-grid-selected'
},
column: {
header: {
cell: 'iui-grid-column-header-cell',
disabled: 'iui-grid-column-header-disabled',
normal: 'iui-grid-column-header',
hovered: 'iui-grid-column-header-hovered',
selected: 'iui-grid-column-header-selected'
},
body: {
cell: 'iui-grid-column-body-cell',
disabled: 'iui-grid-column-body-disabled',
normal: 'iui-grid-column-body',
hovered: 'iui-grid-column-body-hovered',
selected: 'iui-grid-column-body-selected'
},
footer: {
cell: 'iui-grid-column-footer-cell',
disabled: 'iui-grid-column-footer-disabled',
normal: 'iui-grid-column-footer',
hovered: 'iui-grid-column-footer-hovered',
selected: 'iui-grid-column-footer-selected'
},
sorting: {
normal: {
ascending: 'iui-sort-ascending',
descending: 'iui-sort-descending'
},
selected: {
ascending: 'iui-sort-ascending-selected',
descending: 'iui-sort-descending-selected'
}
}
},
row: {
general: {
disabled: 'iui-grid-row-disabled',
focused: 'iui-grid-row-focused',
normal: 'iui-grid-row',
hovered: 'iui-grid-row-hovered',
selected: 'iui-grid-row-selected'
},
expandBox: {
general: 'iui-grid-expand-box',
load: 'iui-grid-expand-box-load',
expanded: 'iui-grid-expand-box-open',
collapsed: 'iui-grid-expand-box-close'
},
cell: {
disabled: 'iui-grid-row-cell-disabled',
focused: 'iui-grid-row-cell-focused',
normal: 'iui-grid-row-cell',
hovered: 'iui-grid-row-cell-hovered',
selected: 'iui-grid-row-cell-selected'
}
},
gridLines: {
none: 'iui-grid-lines-none',
horizontal: 'iui-grid-lines-horizontal',
vertical: 'iui-grid-lines-vertical',
both: 'iui-grid-lines-both'
}
}
In addition, you can also choose a theme from a list of available themes and apply it to the project settings. This will alter the grid appearance and other IntegralUI components in your project.
IntegralUI Grid component allows you to display thousands of rows in multiple columns. You can populate the Grid using custom data source, locally or remotely. Supports custom drag drop operations, data grouping, pagination, filtering, sorting, selection of multiple rows and it is fully customizable.
By using templates, you can add any custom HTML elements or Angular components in column header, footer and each row cell individually. With use of conditions like ngIf directive, you can have different cells with different content.
In addition, you can provide your own custom CSS classes that will override the default grid appearance and change it so that it matches the overall look of your apps
The Grid component is part of IntegralUI Web.