How to Add Rating Bar in dhtmlxGrid

This quick tutorial leads you through the steps of adding a simple star rating bar in a cell of dhtmlxGrid. You’ll learn how to create a custom exCell (“extended cell”) that allows the end users to view/set the rating of an item in our JavaScript datagrid.

Download the demo with a star rating bar in a grid or read the tutorial and see how it can be done step by step.

Step 1 – Creating a Custom ExCell Type

Let’s start the creation of a custom exCell. ExCell is a unique mechanism of dhtmlxGrid that defines the data format and the way of editing data for each column (cell) in a grid. We’ll take a standard read-only “ro” exCell as a basis of our custom exCell:

When referring to a cell value, we need to get an original rating value and not the HTML content that was placed in the cell. Therefore, before forming the HTML content of the cell, we need to save its original value and place it into the new function getValue:

this.setValue=function(val){this.cell.orig_val= val;// saving the original value of the cell
…}this.getValue=function(){// adding the getValue function which returns the original value of the cellreturnthis.cell.orig_val;}

Step 4 – Adding the Ability to Set Rating to a Selected Item

Now we need to add event listeners to our star elements to make them react on the user’s actions. We will use the dhtmlxEvent functionality to add the event handlers to the dhtmlxGrid body.

onmouseover event

Hovering over any rating star will turn on the mode, when the user can set a new rating to an item. So instead of showing the current average rating of the item we should highlight the stars according to the hovering star.
If the user hovers the mouse on the star which defines mark “4”, stars with mark “1”, “2” and “3” should also be highlighted.

dhtmlxEvent(_grid.entBox,"mouseover",function(e){var el = e.target|| e.scrElement;if((el.className||"").indexOf("gridRatingMarker")!="-1"){// check if the observable object has the class "gridRatingMarker"for(var i=1; i<=5; i++){//iterating through the star iconsif(i<=el.getAttribute("rating")){
el.parentNode.childNodes[i-1].className="rated gridRatingMarker"// highlight the star}else{
el.parentNode.childNodes[i-1].className="gridRatingMarker"// set the star as unmarked};};}});

onmouseout event

If the user leaves a star icon without clicking on it, we should put back the average rating of the item.

dhtmlxEvent(_grid.entBox,"mouseout",function(e){var el = e.target|| e.scrElement;if((el.className||"").indexOf("gridRatingMarker")!="-1"){
_grid.cells4(el.parentNode.parentNode).setValue(_grid.cells4(el.parentNode.parentNode).getValue());//set the original saved value of the cell}});

onmousedown event

If the user clicks on a star icon, then a new rating value should be applied.

dhtmlxEvent(_grid.entBox,"mousedown",function(e){var el = e.target|| e.scrElement;if((el.className||"").indexOf("gridRatingMarker")!="-1"){
_grid.cells4(el.parentNode.parentNode).setValue(el.getAttribute("rating"));// setting a new value to a cell}});

We need to place these events in our exCell function.

NOTE that the events should be attached only once but not to each row in your grid. So to avoid the events cloning, make sure that the events haven’t been already attached.
For example:

That’s all. Now we’ve got a rating control inside the grid column. You can download the demo and customize the code of this custom exCell for your needs and add necessary interactivity to the rating bar.