LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Add Rating Component to Grid Cells in Angular

Created: 12 April 2018

Each cell in IntegralUI TreeGrid component for Angular has its own template where you add any HTML element or other Angular components and arrange them in custom layouts. This allows you to use custom editors in grid cells. In case where you need to display some kind of rating in specific column cells, you can use the IntegralUI Rating component.

TreeGrid 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

The Rating component allows you to display rating values using different set of images. By default, there are at two kinds of images: stars and bricks (you can change this via CSS). In above demo, you can change the rating value on the fly, by clicking on the stars in cell rating space or click-hold and moving the mouse cursor. You can also change the rating with the mouse-wheel.

How to Add a Rating Component to Angular Grid Cells

By default, the cell template is empty, and in most cases you will display the cell text, which doesn;t require any HTML element, just double brackets and cell text value, like this: {{cell.text}}. However, to present specific values in grid cells that may also require a user interaction, it is better to use a component.

In case of displaying a rating value, you can use the IntegralUI Rating component. At first, you need to determine to which column the rating is applied. Each column has an id field that is linked to grid cell object cid field. Using the ngSwitch directive in the cell template along with cell cid value, you can determine the specific column cells.

In this example, all cells with their cid value set to 4 will display a Rating component. The template that includes this component looks like this:

<div #application>
    <iui-treegrid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [expandColumnIndex]="1" [selectionMode]="treegridSelMode" [allowDrag]="false" (dragOver)="treegridDragOver($event)" [rowHeight]="22" #treegrid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span [ngSwitch]="column.id">
                <span *ngSwitchCase="1">
                    <span class="trg-rtng-cell-checkbox" [ngStyle]="{ 'background-image': getCheckValue(column) }" (mousedown)="columnCheckClicked(column)"></span>
                </span>
                <span *ngSwitchDefault>
                    <span>{{column.headerText}}</span>
                </span>
            </span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span [ngSwitch]="cell.cid">
                <span *ngSwitchCase="1">
                    <span class="trg-rtng-cell-checkbox" [ngStyle]="{ 'background-image': getCheckValue(cell) }" (mousedown)="checkBoxClicked(cell)"></span>
                </span>
                <span *ngSwitchCase="4"> <!-- RATING -->
                    <iui-rating *ngIf="groupVal=='star'"[controlStyle]="ratingStyleStars" [(ngModel)]="cell.value" [max]="5"></iui-rating>
                    <iui-rating *ngIf="groupVal=='brick'"[controlStyle]="ratingStyleBricks" [(ngModel)]="cell.value" [max]="10" [stepSize]="8" [increment]="brickIncrementMode"></iui-rating>
                </span>
                <span *ngSwitchDefault>
                    <span class="trg-rtng-cell-text">{{cell.text}}</span>
                </span>
            </span>
        </ng-template>
    </iui-treegrid>
</div>
<div class="trg-rtng-control-panel" align="center">
    <iui-radio-group [(ngModel)]="groupVal">
        <iui-radio-button [value]="'star'">Stars</iui-radio-button>
        <iui-radio-button [value]="'brick'">Bricks</iui-radio-button>
    </iui-radio-group><br/>
</div>                       
                            
.trg-rtng-control-panel
{
    float: left;
    margin-left: 20px;
    width: 170px;
}
.trg-rtng-normal
{
    float: left;
    width: 600px;
    height: 400px;
}
.trg-rtng-normal .iui-treegrid-row-cell
{
    padding: 2px 0 !important;
}
.trg-rtng-normal .iui-treegrid-row-selected
{
    color: green;
}
.trg-rtng-cell-checkbox
{
    background: url('') no-repeat 0 0;
    display: inline-block;
    padding: 0;
    margin: 0 7px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.trg-rtng-cell-rating
{
    margin: 0 15px;
    vertical-align: middle;
}
.trg-rtng-cell-text
{
    text-align: center;
    vertical-align: middle;
}
                            

Note To make sure the editor receives the input focus, you can use the iuiFocus directive. This directive sets the focus to an element to which it is applied, based on simple value: true or false.

Each Rating component, can have its own control style. This style holds a reference to an object that contains the CSS class names for all parts of the component. In this example, we don't need a border nor a background for the rating, and they are disabled via custom CSS class.

public ratingStyleStars: any = {
    general: { normal: 'trg-rtng-rating' },
    content: { normal: 'trg-rtng-rating-stars-content'}
}

public ratingStyleBricks: any = {
    general: { normal: 'trg-rtng-rating' },
    content: { normal: 'trg-rtng-rating-bricks-content' },
    rating: { normal: 'trg-rtng-rating-bricks-value' }
}
                            
<span *ngSwitchCase="4"> <!-- RATING -->
    <iui-rating *ngIf="groupVal=='star'"[controlStyle]="ratingStyleStars" [(ngModel)]="cell.value" [max]="5"></iui-rating>
    <iui-rating *ngIf="groupVal=='brick'"[controlStyle]="ratingStyleBricks" [(ngModel)]="cell.value" [max]="10" [stepSize]="8" [increment]="brickIncrementMode"></iui-rating>
</span>
                            
/* Rating Showing Stars */
.trg-rtng-rating
{
    background: transparent;
    border: 0;
    cursor: pointer;
    margin: auto;
}
.trg-rtng-rating-stars-content
{
    background-image: url(app/integralui/resources/rating/star-empty-white.png);
}

/* Rating Showing Bricks */
.trg-rtng-rating-bricks-content
{
    background-image: url(app/integralui/resources/rating/brick-empty.png);
}
.trg-rtng-rating-bricks-value
{
    background-image: url(app/integralui/resources/rating/brick-full.png);
}
                            

Apart from visual appearance, you can also change the way the rating value changes. That is whether the rating displays half, full or any decimal value. More information on different properties and events included you can find in IntegralUI Rating Component overview page.

Any change to the rating value is linked with the cell value via ngModel directive as part of the Rating component settings. In this way, when you change the cell value somewhere in the code, this change is also applied to the rating component, and vice versa, and change in the rating component via mouse clicks or left-click and hold and mouse move is also automatically applied to the grid cell value.

<span *ngSwitchCase="4"> <!-- RATING -->
    <iui-rating *ngIf="groupVal=='star'"[controlStyle]="ratingStyleStars" [(ngModel)]="cell.value" [max]="5"></iui-rating>
    <iui-rating *ngIf="groupVal=='brick'"[controlStyle]="ratingStyleBricks" [(ngModel)]="cell.value" [max]="10" [stepSize]="8" [increment]="brickIncrementMode"></iui-rating>
</span>
                            

Conclusion

IntegralUI TreeGrid component for Angular allows you to add any custom editor in its cells. In case where you need to display a rating value in the grid, you can use the IntegralUI Rating component or any other 3rd party component with similar features.

If you need to use different set of images for rating values, you can do so by modifying the CSS styles of the Rating component. This allows you to keep the existing functionality while having a completely different visual appearance.

The TreeGrid component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.