{"id":2085,"date":"2013-12-06T16:52:07","date_gmt":"2013-12-06T13:52:07","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2085"},"modified":"2026-08-28T15:35:30","modified_gmt":"2026-08-28T12:35:30","slug":"rating-bar-feature-in-dhtmlxgrid","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/rating-bar-feature-in-dhtmlxgrid\/","title":{"rendered":"How to Add Rating Bar in dhtmlxGrid"},"content":{"rendered":"

This quick tutorial leads you through the steps of adding a simple star rating bar in a cell of dhtmlxGrid<\/a>. 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. <\/p>\n

\"DHTMLX<\/p>\n

Download the demo<\/a> with a star rating bar in a grid or read the tutorial and see how it can be done step by step.<\/p>\n

 
\nStep 1 – Creating a Custom ExCell Type<\/strong><\/p>\n

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:<\/p>\n

  function<\/span> eXcell_rating(<\/span>cell)<\/span>{<\/span>           \/\/excell name is defined here<\/span>
\n        eXcell_ro.call<\/span>(<\/span>this<\/span>,<\/span> cell)<\/span>;<\/span>
\n  }<\/span>
\n  eXcell_rating.prototype<\/span> =<\/span> new<\/span> eXcell;<\/span>    \/\/ nest all other methods from base class<\/span><\/div><\/div>\n

 
\nStep 2 – Setting Style for Custom ExCell<\/strong><\/p>\n

The content of a cell with a star rating bar will be the following:<\/p>\n

<<\/span>div class<\/span>=<\/span>\u201dstars\u201d><\/span>
\n<<\/span>a rating=<\/span>"1"<\/span> class<\/span>=<\/span>"gridRatingMarker"<\/span>><\/<\/span>a><\/span> \/\/single star icon<\/span>
\n<<\/span>a rating=<\/span>"2"<\/span> class<\/span>=<\/span>"gridRatingMarker"<\/span>><\/<\/span>a><\/span>
\n<<\/span>a rating=<\/span>"3"<\/span> class<\/span>=<\/span>"gridRatingMarker"<\/span>><\/<\/span>a><\/span>
\n<<\/span>a rating=<\/span>"4"<\/span> class<\/span>=<\/span>"gridRatingMarker"<\/span>><\/<\/span>a><\/span>
\n<<\/span>a rating=<\/span>"5"<\/span> class<\/span>=<\/span>"gridRatingMarker"<\/span>><\/<\/span>a><\/span>
\n<\/<\/span>div><\/span><\/div><\/div>\n

We also add CSS for our rating star icons:<\/p>\n

    <style><\/span>
\n        .stars<\/span> {<\/span>float<\/span>:<\/span>left<\/span>;<\/span> height<\/span>:<\/span>20px<\/span>;<\/span>}<\/span>
\n        .stars<\/span> li{<\/span>float<\/span>:<\/span>left<\/span>;<\/span>}<\/span>
\n        .stars<\/span> li a:<\/span>hover<\/span>,<\/span>.stars<\/span> .rated<\/span>{<\/span>background<\/span>:<\/span>url<\/span>(<\/span>codebase\/imgs\/rating\/star_1.png)<\/span> no-repeat<\/span>;<\/span> width<\/span>:<\/span>20px<\/span>;<\/span> height<\/span>:<\/span>20px<\/span>;<\/span>}<\/span>
\n        .stars<\/span> a{<\/span>float<\/span>:<\/span>left<\/span>;<\/span>background<\/span>:<\/span>url<\/span>(<\/span>codebase\/imgs\/rating\/star_2.png)<\/span> no-repeat<\/span>;<\/span>width<\/span>:<\/span>20px<\/span>;<\/span> height<\/span>:<\/span>20px<\/span>;<\/span>}<\/span>
\n    <\/style><\/span><\/div><\/div>\n

We set path to the images of the stars in the parameter background<\/em>. In our case:<\/p>\n