Advanced User Interface Controls and Components
Created: 17 April 2018
Updated: 29 April 2019
In general, column header of IntegralUI Grid component for Angular displays a plain text. In some cases, you may need to add custom elements like DropDown Button, which when clicked it will pop up a list of options with custom functionality. In this article, you will learn how to create a dropdown list with option to change column visibility.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As above demo shows, each column header has a dropdown button on right side, displayed when column is selected or mouse cursor hovers over header space. When clicked, a list of all column names pops out with a check mark stating whether column is visible or not. By clicking on column name, you can change the visibility of corresponding column
What is displayed in column header is determined by the content of the header template. You can place any custom HTML elements or Angular components inside the template. In this case, the header template will consist of a column title and a DropDownButton component.
In general, the dropdown button has a text and an arrow that show the position and direction at which the dropdown list will appear. However, for this example, the dropdown button will only have an arrow (the text is not required), because column already has a title. This is all set in CSS with custom classes that override the default ones, using the controlStyle property.
public gridStyle: any = {
general: {
normal: 'grid-coldd-normal'
}
}
public dropdownStyle: any = {
general: {
normal: 'grid-col-dropdown-normal',
selected: 'grid-col-dropdown-selected'
}
}
<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" #grid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
<div style="width:100%">
<iui-dropdown-button [controlStyle]="dropdownStyle"></iui-dropdown-button>
<span class="grid-coldd-label">{{column.headerText}}</span>
</div>
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span>{{cell.text}}</span>
</ng-template>
<ng-template let-column [iuiTemplate]="{ type: 'footer' }">
{{column.footerText}}
</ng-template>
</iui-grid>
/* Grid Settings */
.grid-coldd-normal
{
width: 625px;
height: 300px;
}
.grid-coldd-normal .iui-grid-column-header
{
padding: 0;
}
.grid-coldd-label
{
display: inline-block;
margin-top: 5px;
}
/* DropDown Button Settings */
.grid-col-dropdown-normal
{
background: transparent;
border: thin solid transparent;
border-radius: 0;
display: inline-block;
float: right;
}
As template shows, the dropdown button is placed on the right in column header space (for this to work, the template must have its width set to 100%). Using the direction property, the position and open direction of the dropdown list is set to appear below the column header and on the left from the button position.
Note To test different open directions of the DropDownButton Component, check out this sample.
import { IntegralUIDirection, IntegralUIPlacement } from '../../integralui/components/integralui.core';
. . .
public buttonPlacement: IntegralUIPlacement = IntegralUIPlacement.Right;
public openDirection: IntegralUIDirection = IntegralUIDirection.Left | IntegralUIDirection.Below;
<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" #grid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
<div style="width:100%">
<iui-dropdown-button [controlStyle]="dropdownStyle" [placement]="buttonPlacement" [direction]="openDirection" ></iui-dropdown-button>
<span class="grid-coldd-label">{{column.headerText}}</span>
</div>
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span>{{cell.text}}</span>
</ng-template>
<ng-template let-column [iuiTemplate]="{ type: 'footer' }">
{{column.footerText}}
</ng-template>
</iui-grid>
Right now, the header of grid column will display a button on the right side, but it is not yet functional. You need to apply a list of options to the dropdown button using the settings property. This property accepts an object that contains the list. Each item in this list can have an icon and label.
@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;
public dropDownSettings: any;
ngAfterViewInit(){
this.dropDownSettings = {
adjustment: { top: 0, left: 4 },
appRef: this.applicationRef,
items: this.getColumnList()
}
}
private getColumnList(){
let list: Array = [];
for (let j = 0; j < this.columns.length; j++){
list.push({
icon: this.getItemIcon(this.columns[j]),
text: this.columns[j].headerText,
key: this.columns[j].id
});
}
return list;
}
private getItemIcon(column: any){
return column.visible != false ? 'grid-col-dropdown-icons check-mark' : 'grid-col-dropdown-icons';
}
<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" #grid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
<div style="width:100%">
<iui-dropdown-button [controlStyle]="dropdownStyle" [settings]="dropDownSettings" [placement]="buttonPlacement" [direction]="openDirection"></iui-dropdown-button>
<span class="grid-coldd-label">{{column.headerText}}</span>
</div>
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span>{{cell.text}}</span>
</ng-template>
<ng-template let-column [iuiTemplate]="{ type: 'footer' }">
{{column.footerText}}
</ng-template>
</iui-grid>
/* Check Mark Icon */
.grid-col-dropdown-icons
{
background: url(app/integralui/resources/icons.png) no-repeat 0 0;
display: inline-block;
overflow: hidden;
padding: 0;
margin: 0 0 0 5px;
width: 16px;
height: 16px;
vertical-align: middle;
}
.check-mark
{
background-position: -96px -48px;
}
In addition, you need to set the appRef field to point to the top application component. This is required, because the popup window is created dynamically and added to the top component n your application. In this way it will appear above other components.
Finally, the adjustment field is used to modify the position of the dropdown list so that it appears correctly within your application. This field is not required only use it when needed.
Note Internally, the DropDownButton uses the ContextMenu component to display a dropdown list of options. Therefore, any settings for the context menu are also applicable here, via the settings property.
Now when dropdown button is clicked, a list of column names from the grid is displayed. However, it is not yet fully functional. Whenever some item from the dropdown list is clicked, you need to specify an action that will take place. For this purpose, you can add a handler for the itemClick event set in component HTML specification.
@ViewChild('grid') grid: IntegralUIGrid;
onDropDownItemClicked(e: any){
let column = this.grid.getColumnById(e.item.key);
if (column){
column.visible = column.visible == undefined ? false : true;
e.item.icon = this.getItemIcon(column);
this.grid.updateLayout();
}
}
onDropDownOpened(e: any, column: any){
this.grid.selectedColumn = column;
}
When dropdown list is created previously, each item contains three fields:
You can use the key field within the itemClick event hander, to determine to locate the column object and change its visibility. For this purpose you can use the built-in getColumnById method of the Grid component. If column is found, only change the visible field value to true or false.
In addition, to select the column from which column the dropdown list is opened, you can use the dropDownOopened event. You can create a hander for this event specifying the column as parameter. In this way, when event is fired you only change the selected column from code.
If required, you can make the dropdown button to appear only when column is hovered or selected. This is possible by modifying the CSS classes of the dropdown button using CSS classes of column header in hovered or selected state as CSS selector. Here is an example:
/* Set DropDown to Appear on Hover */
.grid-coldd-normal .grid-col-dropdown-normal
{
opacity: 0;
}
.grid-coldd-normal .iui-grid-column-header-hovered .grid-col-dropdown-normal, .grid-coldd-normal .iui-grid-column-header-selected .grid-col-dropdown-normal
{
opacity: 1;
}
The 'iui-grid-column-header-hovered' and 'iui-grid-column-header-selected' and default CSS class names for grid column in hover and selected state. By using them as selector prior CSS class name of the dropdoen button, you can alter its appearance. The 'grid-coldd-normal' class is the one used that sets the Grid overall appearance, set from controlStyle property of the Grid component.
Using the column header template of IntegralUI Grid component for Angular, you can add any custom HTML elements or Angular components to appear in header space. In case of a dropdown button you can use the IntegralUI DropDownButton component, that comes with already built-in features that shows a button and when clicked a dropdown list that can appear in multiple directions. By modifying the default CSS classes with your own custom styles and handle dropdown events, and you can attach any custom list of options to column header.
Each column header can have its own DropDown Button with different options than buttons from other columns. In this article to simplify the example, a list of common options is applied that governs the column visibility.
The Grid component is part of IntegralUI Web.