Ways to emphasize a distinct cell within a UI Grid by utilizing the cellClass feature

I am struggling with a requirement where I need to highlight a specific cell in a grid using its row and column numbers. However, in the current setup, when I scroll through the grid, other cells are also getting highlighted. It seems like I am not grasping the concept of the UI grid cellClass method correctly. Can someone please provide some insight? If my understanding is wrong, how can I achieve the functionality where only the specified cell will be highlighted based on its row and column number?

Here is the key part of my code along with the plunker link:

var uniqueCellInfoArr = [{"row":2,"col":1},{"row":4,"col":1} ]
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) 
        {
          for (var i = 0; i < uniqueCellInfoArr.length; i++)
          {
            if ( uniqueCellInfoArr[i].row == rowRenderIndex &&  uniqueCellInfoArr[i].col == colRenderIndex)
            {
              return "red"
            }
          }

http://plnkr.co/edit/5xQoKiKIL8vY8EeLsJG5?p=preview

javascriptangularjsangularjs-directiveangular-ui-grid

Answer №1

As you scroll through the table, the rowRenderIndex and colRenderIndex indicate the index of the cell being rendered. When scrolling down, the cells are re-rendered, causing the indexes to reset.

An alternative approach is to highlight cells based on their values, which can be achieved with the following code:

var uniqueCellInfoArr = ['Velity','Suretech'];

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) 
    {
      var cellValue = grid.getCellValue(row, col);
      if(uniqueCellInfoArr.indexOf(cellValue) > -1) return 'red';
    }

Check out how this works in action on Plunker: http://plnkr.co/edit/g2QoWcWdP5FYKOwMOUm8?p=preview

Answer №2

After much effort, I finally managed to figure this out. I made modifications to my plunker and implemented my solution.

http://plnkr.co/edit/UQu94rC5jxzYDZQQa5P4?p=preview

The currentTopRow property below played a crucial role in resolving the issue for me.

rowRenderIndex = rowRenderIndex+grid.renderContainers.body.currentTopRow;

Previously, the rowRenderIndex was being reset whenever it was scrolled. By introducing this variable, I was able to determine the exact location number, enabling me to highlight specific cells with their corresponding row and column details.

Answer №3

Although this post was written more than a year ago, it contains some misleading information. Adding !important to a CSS rule should be reserved for situations when it is absolutely necessary. Instead, consider increasing the specificity of your selectors to override default styles:

.container .grid .row .red { color: red; background-color: yellow; }
.container .grid .row .blue { color: blue; }

For more information on styling dynamic cells in ui-grid, check out: Styling Dynamic Cells in ui-grid

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

Filtering JSON data in AngularJS is simple and effective

I am working with JSON data and I want to display it filtered by genre. The solution provided in the previous question How to filter JSON-Data with AngularJs? did not work for me. Here is myapp.js: var myApp = angular.module('myApp', []); myAp ...

javascriptjsonangularjs

Developing an Angular application that triggers a nested request in a Node/Express backend

Currently, I am working on a project that involves AngularJS and NodeJS/Express. Everything is functioning properly with the AngularJS resources, except for a custom action I added. This custom action seems to be causing an issue where req.params and req.b ...

node.jsangularjsexpressangular-resource

Ways to verify the existence of a particular word within a nested array of objects

I have implemented a text input field and a send button for submitting the entered text. Utilizing the react-mention library, I am able to handle hashtags in the text. As the user types, if they include "#" it displays available hashtags from the data set. ...

javascriptreactjs

Implementing a DataTable filter functionality using external buttons or links

I want to enhance the search functionality of my table by incorporating a treeview style set of buttons or links next to it. This is how I envision it: Take a look at this design: https://i.sstatic.net/LAJXf.png Here's where it gets tricky. When I c ...

javascriptphpjquerydatatable

Retrieving User Input for Column Filters in AG-Grid-React

After the user enters input in the column filter, I am attempting to update the Redux mode, but it does not seem to be working properly. <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} animateRows={ ...

javascriptreactjsfilterag-gridag-grid-react

Is there a way to automatically remove a document in MongoDB and Node.js once its expiration date has passed?

I'm working on an appointment booking app and I need to automatically delete booking details after the booked date has passed. How can I make this happen? I attempted to use node-scheduler for this task, but it wasn't successful. The app itself ...

javascriptnode.jsmongodb

BS Modal was improperly invoked, leading to an illegal instantiation

Currently, I am attempting to trigger a bootstrap Modal in Angular by utilizing the component instead of its HTML attribute. However, I am encountering an error (specifically, illegal invocation). Here is the code snippet from the component: @ViewChild(&a ...

javascriptangulartypescripttwitter-bootstrap

Prevent a link from loading twice in jQuery's load() function if the parent page already

I am currently working on a page where data will be loaded into a lightbox using jquery. //index.php <script type="text/javascript" src="/jquery-1.11.0.min.js"></script> <a href='login.php'></a> //this will load ...

javascriptjquery

Is there a way to ensure my React navigation screen fills the entire screen?

I am currently facing an issue where my map screen is not covering the whole screen, leaving a blank space at the bottom where the custom bottom navigator should be displayed. How can I adjust my code so that the map covers this blank space at the bottom? ...

javascriptcssreactjsreact-nativereact-navigation

Angular toggles visibility with nested iterations

I am trying to figure out the best way to show/hide a second repeat list when clicked on at a specific index. I have two repeat lists - an initial one and then a second one for expanding details. They are separated by class names but Angular's Jquery ...

javascriptjqueryangularjs

Understanding DefinitelyTyped: Deciphering the explanation behind 'export = _;'

Having trouble integrating angular-material with an ng-metadata project and encountering some issues. Utilizing DefinitelyTyped for angular material, the initial lines are as follows: declare module 'angular-material' { var _: string; expo ...

angularjstypescripttypescript1.8definitelytyped

When using Vue.js, binding may not function properly if it is updated using jQuery

Link to JsFiddle Below is the HTML code: <div id="testVue"> <input id="test" v-model="testModel"/> <button @click="clickMe()">Click me</button> <button @click="showValue()">Show value</button> </div& ...

javascriptjqueryhtmlvue.jsvuejs2

Guide on creating windows, openings, or cutting shapes in three.js

I'm new to working with three.js and I have a project where I need to create a "room" with doors and windows. It seems like a simple task, but all the answers I've found so far are not up-to-date. Similar questions can be found here: - subtra ...

javascriptthree.js

The Vue/Vuetify wrapper component does not automatically pass on the `hide-details` parameter to the input component

I recently crafted a custom wrapper for the v-select input using Vuetify. Along with custom properties, I utilized the v-bind="$props"attribute to inherit all props. Upon testing, I observed that while this method applies to most props, it doesn ...

javascripthtmlvue.jsvuetify.js

Why aren't variables showing up on the right when using writeFileSync in Node.js?

I'm attempting to insert a variable as ${Y} but instead of getting the actual data in Y, my output is showing (how can I write variable ${Y}). Does anyone have a solution for this? const fs = require('fs'); const Y = fs.readFileSync('./ ...

javascriptnode.js

showing the chosen item in a Bootstrap dropdown [limited to the first menu option and using the attr() method]

Is there a way to dynamically display the selected menu option using the bootstrap drop down? Initially, I was able to select the first menu option and apply it to the bootstrap drop-down button. However, I encountered an issue where I cannot change the ...

javascriptjquerybootstrap-4

When using DataTables ajax.reload with pagination enabled, the table content jumps to the bottom of the page

I am currently using jQuery DataTables with ajax sourced data. To ensure that the data remains up to date every 30 seconds without requiring a page refresh, I have been utilizing the ajax.reload() function. To achieve this, I have placed the ajax.reload() ...

javascriptjqueryajaxdatatables

Determine the Javascript code needed to identify the button change that was implemented

As a beginner in the world of Javascript, I've been experimenting with incorporating Javascript into my ASP.NET MVC project. Within my project, I have multiple buttons that toggle between different states, such as from ON to OFF. Each button correspo ...

javascriptasp.net

Using the Promise function with callback to map the JSON payload object into an object

I received a JSON payload with the following structure: { "name": "Reports", "subject": "Monthly Reports", "attachments":[ { "attachment":{ "name": "Month1.pdf", "type": "application/pdf", "path": "h ...

javascriptnode.jstypescript

Ways to conceal a div using jQuery when the video source is missing

If there is no source in the video, I want to hide the video_wrapper class <div class="video_wrapper" style="width: 100%; height: 100%; display: none;"> <video id="df-video" playsinline="" webkit-playsinline="" style="height: 100%; width: 100%; ...

javascriptjquery