CODEWITHSUNDEEP
javascriptjqueryangularjsangular-ui-gridui-grid
Santanu Nandi
Santanu Nandi

Reputation: 177

ui-grid highlight some specific rows

I have a chart which is showing Mile(s) on Y-axis and Date in X-axis. Type of the chart is stacked column chart. Each stack is representing how much a driver, drove on that particular day in mile(s).

Below that chart, there is a ui-grid which is showing date, driver name and all the trip details(mile, time, no of riders, pickup, dropoff location etc). Now the thing is a driver can do several trips on a particular day, so there may be more than one row for a driver on a date.

Now what I want to do is if someone clicks on a particular stack in the chart, then all the rows related to that stack in the ui-grid will be highlighted.

e.g Suppose "Driver A" has done 5 trips on 1st Jan. Then there will be a stack of Driver A in chart an 5 rows in ui-grid. Now if a user clicks on that stack then I want to highlight those 5 rows in ui-grid.

(using highchart, angular-ui-grid)

Upvotes: 0

Views: 312

Answers (1)

A1t0r
A1t0r

Reputation: 489

You can add an attribute to each cell called cellClass which accepts a function to perform the logic you need:

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
                    return *your function goes here*;
                }

The function must return a css class that exists on your css files. More information can be found on the following link Customize UI-Grid with Dynamic Cell Classes

Upvotes: 1

Related Questions