Edit Cell with Rating Editor in Angular Grid

Created: 22 Feb 2019

In this article you will learn how to edit cells using the Rating editor, which is part of IntegralUI Grid component for Angular. In addition, you will see how to customize the CSS classes and completely change the appearance of default rating component.

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 example, the gold stars as ratings are replaced by white star on gray and red background. By clicking inside the rating space and move the cursor while you hold the left mouse button, you can change the rating value for each grid cell individually. You can also change the rating by single click or with mouse scroll.

Whenever rating changes, the console log displays a message from the event fired when cell value is changed.

How to Enable the Rating Editor in Angular Grid

In order to show a rating component inside all cells from a specific column, you need to set the editorType field of the column object to Rating. This will display a built-in rating component inside each grid cell under specified column.

Related: How to Add Rating Component to Grid Cells in Angular

By default, rating value is set to 0. The rating is already bound with the cell value field, s you only need to enter some number in cell value field, and you will see that rating will update. The binding is two-directional, whenever rating value changes by the user, the cell value also changes. And vice versa, if you set a cell value from code, the rating value will change.

import { Component, enableProdMode, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { IntegralUIEditorType, IntegralUIIncrementMode } 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: "Title", width: 300},
            { id: 3, headerText: "Year", headerAlignment: "center", contentAlignment: "center", width: 70 },
            { 
                id: 4, 
                contentAlignment: "center", 
                headerText: "Ratings", 
                headerAlignment: "center",
                editorType: IntegralUIEditorType.Rating,
                width: 150
            }
        ];
    }
}
                            
<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-cellrtg-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-cellrtg-label">{{cell.text}}</span>
        </ng-template>
    </iui-grid>
</div>
                            

To modify the behavior of the rating editor, you can apply additional settings. You can do this through editorSettings field of the column object. The following options are available:

  • division - used to display large values within small rating size
  • increment - determines how the rating value changes: Free, Partial or Full
  • max - specifies the maximum number of units
  • stepSize - determines the width of one rating image in pixels
  • style - specifies an object that contains all style settings for the component

In most cases, you may need most of the above settings, except for the style that you can use to change the overall editor appearance (see below).

this.columns = [

    // . . .

    { 
        id: 4, 
        contentAlignment: "center", 
        headerText: "Ratings", 
        headerAlignment: "center", 
        editorType: IntegralUIEditorType.Rating,
        editorSettings: {
            increment: IntegralUIIncrementMode.Partial,
            division: 5,
            max: 10,
            stepSize: 22
        },
        width: 150
    }

    // . . .

];
                            

In above code, the rating editor has 10 units (each unit is a single image). Using the division field, the unit value is set to 5, so you have a maximum rating value of 50. Next, the increments are set to partial, which means you can change the rating value in increments by half of the unit value. In this case, that is by 2.5 per change.

As you can see, you can use the division when you have a large range of values and you want to display only small number of rating units. To get this number, divide the maximum value by the number of units you want to have displayed.

The value of the stepSize field depends on the image height that is used as a rating unit.

How to Handle Changes by the Rating Editor

Whenever rating value changes, the value of corresponding grid cell also changes. This change is accompanied by firing of the cellValueChanged event. You can handle this event in your code and provide additional actions.

ratingChanged(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)="ratingChanged($event)" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="grid-cellrtg-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-cellrtg-label">{{cell.text}}</span>
        </ng-template>
    </iui-grid>
</div>
                            

The event data includes the cell object which value has changed and the new rating value.

How to Customize the Rating Appearance

Under editorSettings field of the column object, you can add a style, which holds the names of CSS classes that will override the default appearance of the rating editor. The style object has the following format:

{
    general: {
        disabled: 'disabledGeneralClassName',
        focused: 'focusedGeneralClassName',
        normal: 'normalGeneralClassName',
        hovered: 'hoveredGeneralClassName',
        selected: 'selectedGeneralClassName'
    },
    content: {
        disabled: 'disabledContentClassName',
        focused: 'focusedContentClassName',
        normal: 'normalContentClassName',
        hovered: 'hoveredContentClassName',
        selected: 'selectedContentClassName'
    },
    rating: {
        disabled: 'disabledValueClassName',
        focused: 'focusedValueClassName',
        normal: 'normalValueClassName',
        hovered: 'hoveredValueClassName',
        selected: 'selectedValueClassName'
    }
}
                    

Where general is a group of CSS classes that controls the overall appearance of the rating editor, for each state. The content part is responsible for the editor background or empty rating values. And the last rating object governs the appearance of the rating value.

You don't need to apply classes for all parts or states, you can only change one specific part or state. For example, instead of having a gold stars as rating units, you can create your own image and apply classes for general, content and value when rating editor is in normal state.

this.columns = [

    // . . .

    { 
        id: 4, 
        contentAlignment: "center", 
        headerText: "Ratings", 
        headerAlignment: "center", 
        editorType: IntegralUIEditorType.Rating,
        editorSettings: {
            stepSize: 22,
            style: {
                general: {
                    normal: 'grid-cellrtg-rating'
                },
                content: {
                    normal: 'grid-cellrtg-rating-content'
                },
                rating: {
                    normal: 'grid-cellrtg-rating-value'
                }
            }
        },
        width: 150
    }

    // . . .

];
                            
.grid-cellrtg-rating {
    background: transparent;
    border: 0;
    height: 22px;
}
.grid-cellrtg-rating-content {
    background-image: url(resources/rating/star-2-empty.png);
    height: 22px;
}
.grid-cellrtg-rating-value {
    background-image: url(resources/rating/star-2-full.png);
    height: 22px;
}
                            

In this case, a white star on gray or red background represents the rating unit. Star with gray background is when that unit is not yet filled, and the red background is when it is filled.

Conclusion

IntegralUI Grid for Angular comes with built-in rating editor that allows you to add rating in grid cells and edit their values during un-time. In addition, you can change the way ratings appear using custom images via CSS. You can also change the behavior of the rating editor, using custom settings. Finally, whenever rating value changes and event is fired, which you can handle on your side.

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.