How can I change the background color of rows in angular ui-grid?

I need to change the background color of an angular ui-grid row based on a condition. If the riskValue is 1, I want the row to be red, and if the value is 2, the row background color should be yellow. Is there an easy way to accomplish this task?

config.js

"columnDefs": [{
        "name": "Ticket Number",
        "field": "ticketNum",
        "width": 120
    },
    {
        "name": "Asset Id ",
        "field": "assetID",
        "width": 100
    },
    {
        "name": "Severity",
        "field": "severity",
        "width": 100
    },
    {
        "name": "Risk Index",
        "field": "riskIndex",
        "width": 100
    },
    {
        "name": "Risk Val",
        "field": "riskValue",
        "cellTemplate": "<div ng-if=\"row.entity.Comments_Col1 != 'none'\" title={{row.entity.riskValue}} \" ><div style='white-space:nowrap;border-bottom: 1px solid red !important; height:100%;width:100%;background-color:{{row.entity.riskValue == 1 ? 'red' : row.entity.riskValue == 2 ? 'yellow' : 'white'}}'>{{row.entity.riskValue}}</div></div>",
        "sort": {
            "direction": "aesc",
            "priority": 0
        },
        "width": 100,
        "visible": false
    }
],
javascriptcssangularjsangular-ui-grid

Answer №1

To customize the background color of certain columns in your grid, you can utilize the gridOptions.cellClass property.

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.entity.riskValue === 1) 
        return 'red';
    if (row.entity.riskValue === 2)
        return 'yellow';
}

Make sure to define the CSS classes for red and yellow to apply the desired styles.

This approach involves applying the function to all column definitions but gives you the flexibility to choose specific columns for the colored background effect.

Here's a sample implementation: http://plnkr.co/edit/Abc123xyz456?preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the drawbacks of relying on a dependent dependency in software development?

In a recent discussion on Stack Overflow, it was suggested that the best practice is to install packages from sub-dependencies for future use in the app, rather than directly from the dependencies node_modules folder. However, my scenario is a bit unique. ...

javascriptnpm

Reverse Row Selection Event in Kendo Grid

I'm currently working with Kendo Grid in AngularJS and struggling to prevent the change event from firing based on a certain condition. I attempted the following approach, but it doesn't seem to have any effect. change: function (e){ if(som ...

angularjskendo-uikendo-grid

The ElementNotVisibleException error was triggered because the element is currently hidden from view, making it unable to be interacted with through the command

I'm facing an issue when trying to clear the text box. The error message I am receiving is: org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with Command duration or timeout: 30.14 se ...

javascriptselenium

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

Can someone help me achieve the same effect as the website linked below, where the background image fades instead of being a slideshow? The image should be 100% in width and height without any cropping. I have managed to set this up with the codes provided ...

javascripthtmlcss

The page is not loading correctly until a refresh is done

My website seems to be displaying incorrectly on most browsers until the page is refreshed. Check it out here: I'm puzzled as to why this issue is occurring and why it resolves itself upon refresh (even without clearing the cache). The layout consis ...

htmlcsscss-float

Unable to modify the background image in CSS when hovering over

I am struggling with changing the background image of the included div when hovering over the col-lg-3 div. I have 6 col-lg-3 in my container, each containing another div with background images and various CSS properties. Despite trying to change the backg ...

htmlcssbackgroundhover

Encountering issues with loading JavaScript file in Reactjs

I'm currently working with Reactjs (Nextjs) and I am in the process of integrating the home page (index.js). I have various JavaScript files located in the "public" folder and I'm unsure of where to place them. Should I include these files in "_a ...

javascriptreactjsnext.js

Automatic playback of the next video in a video slider

Looking to upgrade my video slider functionality - switching between videos, playing automatically when one finishes. Struggling to find a solution that combines manual control with automatic playback. My attempt: function videoUrl(hmmmmmm){ ...

javascripthtmlcss

Issue arises when combining jQuery.animate() with location.hash

I created a jQuery-based sliding script that updates the location.hash to keep track of the active slide and restore it upon reloading the page. While this functionality works smoothly in Chrome, I noticed some strange behavior in Opera and Firefox during ...

javascriptjqueryfirefoxslider

Having trouble getting Node.js moment timezone conversion to work properly?

Here's the plan for the code below: creating objects that expire at midnight in different timezones. To achieve this, I need to determine the user's location and corresponding timezone first. Then, take the current date in that timezone and forma ...

javascriptnode.jsdatetimemomentjsmoment-timezone

Filtering JavaScript arrays based on a variety of property combinations

My array structure is as follows: [{ id: 1, name: 'Stephen', Team: { name: 'Lion', color: 'blue' }, skills: ['allrounder', 'middleorder'] }, { id: 2, name: 'Daniel', Team: ...

javascriptarraysreactjs

Leverage Dropzone functionality in combination with node.js

Just starting out with node.js and experimenting with file uploads using drag and drop. Initially, I created a basic uploader without drag and drop functionality: var http = require('http'); var formidable = require('formidable'); ...

javascriptnode.jsdropzone.jsformidable

Incorporating groovy script into HTML: Is it possible, akin to embedding JavaScript

Can groovy script be embedded in HTML similar to JavaScript? I am interested in creating an onclick button event that utilizes groovy script instead of JavaScript. Thank you. ...

javascripthtmlgroovy

React is unable to identify the `InputProps` prop when applied to a DOM element

https://i.sstatic.net/7fZmn.png Caution: React is not able to identify the InputProps property on a DOM element. If you intend for it to be displayed in the DOM as a custom attribute, spell it in lowercase as inputprops. If you accidentally passed it from ...

javascriptreactjsmaterial-ui

Using AngularJS ngRepeat orderBy functionality in the Chrome browser

I have developed a basic Angular app that displays rows of data. I want the rows to maintain the order in which they were added to the rows array when the controller is initially loaded with data. To achieve this, the orderBy property starts off as an empt ...

angularjsgoogle-chromeangularjs-ng-repeat

What is the best method for sending JSON data to an ASP Server through AJAX?

I'm currently working on a website built with ASP.NET that requires data retrieval from CloudKit. Utilizing CloudKit JS, I successfully retrieve a record from CloudKit and aim to send the data to the server using C# in my JavaScript code. I can conver ...

javascriptc#asp.netjsonajax

Utilizing AngularJS to make AJAX requests upon selection in order to populate another dropdown menu

Is there anyone who has experience working with AngularJS and using select dropdowns to dynamically populate another dropdown on the page based on a selection? We are currently utilizing a service to populate one Select dropdown. However, we also have ano ...

ajaxangularjs

Guarding Vue.js routes when navigating based on asynchronous authentication state requests

I have integrated Firebase for authentication in my Vue.js application. The main (main.js) Vue component handles the authentication logic as follows: created() { auth.onAuthStateChanged((user) => { this.$store.commit('user/SET_USER&apo ...

javascriptvue.jsfirebase-authenticationvue-routervuex

Verify if a value in a MongoDB field exists within an array field of the document

I need to verify if the date stored in the sessionDate field of my MongoDB document exists within the unavailableDates array. Here is the schema I am using: const adminSchema = new mongoose.Schema({ sessionDate:{ type: Date }, unavaila ...

javascriptnode.jsarraysmongodbmongoose

Exploring the concept of importing with chrome.tabs.insertCSS()

chrome.tabs.insertCSS(tabId, { code : '@import url("custom.css");' }); OR chrome.tabs.insertCSS(tabId, { file : 'importer.css' }); importer.css: @import url("custom.css"); a { color:red!important; } /* this rule applied successfully ...

cssgoogle-chrome-extension