Edit Cells with Rating Editor in Grid

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

You will find sample code that shows grid cells with rating editor in in JavaScript, Angular, React and Vue, in following sections below.

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 changes.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Enable the Rating Editor in Grid Component

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.

By default, rating value is set to 0. The rating is already bound with the cell value field, you only need to enter some number in cell value field, and you will see that rating will update accordingly. 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.

• JavaScript
• Angular
• React
• Vue

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:

• editOnFocus - shows the rating editor when cell is focused
• 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
• visible - determines when editor becomes visible: always, click, hover or none

• JavaScript
• Angular
• React
• Vue

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.

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.

Handling Data 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 valueChanged event. You can handle this event in your code and provide additional actions.

• JavaScript
• Angular
• React
• Vue

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

How to Customize the Rating Appearance

To change the appearance of the Rating editor, you can modify the built-in CSS classes by providing your own style settings in a separate file. Once this file is ready, you can apply it to the Grid customStyle property. Any changes to the built-in classes related to the Rating will be applied accordingly.

You don't need to apply classes for all parts of the Rating component, only for those sections that you want to change. For example, instead of having gold stars as rating units, you can create your own image:

• JavaScript
• Angular
• React
• Vue

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 component comes with built-in Rating editor that allows you to add rating in grid cells and edit their values during run-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 editor settings. Finally, whenever rating value changes, a cell value changing events are fired, which you can handle on your side and cancel or add specific action.

A sample code is available in JavaScript, Angular, React and Vue that shows how to add a rating editor to grid cells. The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.