How to Add a Set of Images to Cells in Angular Grid

Created: 13 Feb 2019

IntegralUI Grid component for Angular comes with a built-in option that allows you to add or place multiple images in a single cell. You can choose the column which cells will display one or more images from a provided list. The images can be from a local or remote source.

* Icons used in this sample are provided by Konpa

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 this demo, the developer skill is displayed using an image. If a developer has skills in different programming languages, multiple images appear in the corresponding cell.

How to Place Multiple Images in Single Cell of Angular Grid

When you want to display one or more images in grid cells, the best way is to use the built-in option for grid columns that allows you to specify the data that is displayed in the cells. In this case, you need to set the editorType of column object to Image.

Next, each cell that belongs to this column can accept an image list as a value. Each cell can have a different image list. Images are displayed based on their order in the list. For example:

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: 2, headerText: "Developer", width: 150 },
            { 
                id: 3, 
                contentAlignment: "center", 
                headerText: "Programming Skills",
                editorType: IntegralUIEditorType.Image,
                width: 180
            },
            { id: 4, headerText: "Address", width: 150 },
            { id: 5, headerText: "City", width: 120 },
            { id: 6, headerText: "Country", width: 120 }
        ];

        this.rows = [
            { 
                id: 1,
                cells: [{ cid: 2, text: "Alec Roach" }, { cid: 3, value: [{ src: 'app/resources/icons/angular.png' }, { src: 'app/resources/icons/react.png' }] }, { cid: 4, text: "8074 Neque Rd." }, { cid: 5, text: "Montereale" }, { cid: 6, text: "Italy" } ], 
            },
            { 
                id: 2,
                cells: [{ cid: 2, text: "Benjamin Oliver" }, { cid: 3, value: [{ src: 'app/resources/icons/dot-net.png' }, { src: 'app/resources/icons/cplusplus.png' }, { src: 'app/resources/icons/csharp.png' }] }, { cid: 4, text: "P.O. Box 628, 8202 Neque. Rd." }, { cid: 5, text: "Cametá" }, { cid: 6, text: "Lithuania" } ]
            },
            { 
                id: 3,
                cells: [{ cid: 2, text: "Nell Garner" }, { cid: 3, value: [{ src: 'app/resources/icons/java.png' }, { src: 'app/resources/icons/dot-net.png' }] }, { cid: 4, text: "2659 Eu, Ave" }, { cid: 5, text: "Chesapeake" }, { cid: 6, text: "France" } ]
            },

            // . . .
        
        ];
    }
}
                            
<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-cellimg-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-cellimg-label">{{cell.text}}</span>
        </ng-template>
    </iui-grid>
</div>
                            

Note You can use images from a local or remote source.

In this example, each programming skill f a developer is represented by a different image. For developers that have multiple programming skills, the cell value contains an image list of all corresponding images.

Whenever a developer acquires a new skill, you only need to update the cell value with a related image.

How to Add Font Images to Grid Cells

You can also use fonts as images, but in this case the editor type is not required. You can place the font classes inside the cell template. If you have multiple images per cell, then you can create an array with different classes for font images. For example:


        this.columns = [
            { id: 2, headerText: "Developer", width: 150 },
            { 
                id: 3, 
                contentAlignment: "center", 
                headerText: "Programming Skills",
                width: 180
            },
            { id: 4, headerText: "Address", width: 150 },
            { id: 5, headerText: "City", width: 120 },
            { id: 6, headerText: "Country", width: 120 }
        ];

        this.rows = [
            { 
                id: 1,
                cells: [{ cid: 2, text: "Alec Roach" }, { cid: 3, value: ['devicon-angularjs-plain colored', 'devicon-react-plain colored'] }, { cid: 4, text: "8074 Neque Rd." }, { cid: 5, text: "Montereale" }, { cid: 6, text: "Italy" } ], 
            },
            { 
                id: 2,
                cells: [{ cid: 2, text: "Benjamin Oliver" }, { cid: 3, value: ['devicon-dot-net-plain colored', 'devicon-cplusplus-plain colored', 'devicon-csharp-plain colored'] }, { cid: 4, text: "P.O. Box 628, 8202 Neque. Rd." }, { cid: 5, text: "Cametá" }, { cid: 6, text: "Lithuania" } ]
            },
            { 
                id: 3,
                cells: [{ cid: 2, text: "Nell Garner" }, { cid: 3, value: ['devicon-java-plain colored', 'devicon-dot-net-plain colored'] }, { cid: 4, text: "2659 Eu, Ave" }, { cid: 5, text: "Chesapeake" }, { cid: 6, text: "France" } ]
            },

            // . . .
        
        ];
    }
}
                            
<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-cellimg-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span [ngSwitch]="cell.cid">
                <span *ngSwitchCase="3" class="lang-icons">
                    <i *ngFor="let icon of cell.value" [ngClass]="icon"></i>
                </span>
                <span *ngSwitchDefault class="grid-cellimg-label">
                    {{cell.text}}
                </span>
            
        </ng-template>
    </iui-grid>
</div>
                            
.lang-icons {
    display: block;
    font-size: 1.75rem;
    margin-top: 3px;
    padding: 3px;
    text-align: left;
}
.lang-icons i {
    margin: 0 3px;
}
                            

In this example, we are using 3rd party images from Konpa. Each image is represented by a different font style. The cell value in this case is an array of classes of font styles provided by the author.

To apply a different cell template, use the cell cid field, which is related to column id, to determine the column to which cells with images belong. In this case, this column has id set to 3. For cells in other columns, just display the cell text.

How to Change Image List Appearance in the Grid Cells

In general, for keeping the grid structure you need to use images in the same format, where images have same width and height. When multiple images are placed in a single cell, you can set the space between them by modifying the corresponding CSS style.

A built-in CSS class governs the appearance of the image list in the grid cells:

  • iui-editor-image - controls the overall appearance of the image list

You can't change this CSS class directly, but you can use the controlStyle property of the angular Grid component and modify it via CSS selector. For example, when grid is in normal mode change the CSS class for the grid to grid-images-normal' and then change the image style.

public gridStyle: any = {
    general: {
        normal: 'grid-cellimg-normal'
    }
}
                            
<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-cellimg-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-cellimg-label">{{cell.text}}</span>
        </ng-template>
    </iui-grid>
</div>
                            
.grid-cellimg-normal .iui-editor-image img {
    height: 16px;
    padding: 0 1px;
    text-align: left;
    width: 16px;
}
                            

In this example, the all images are aligned on left, have the same width and height of 16x16 pixels, and the space between them is set to 2px.

Conclusion

When you want to display multiple images in a single grid cell, you can use the built-in option if IntegralUI Grid component for Angular that allows you to add images to specific column cells. Once this is set, you can apply an image list to grid cells for each cell separately. As a result one or multiple images are displayed in the cells based on their order. In addition, you can modify the alignment, space between images, their size and other settings, using CSS.

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.