Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and override the getColStyle method as mentioned on StackOverflow.

The challenge I face with this solution is that I prefer to directly manipulate the cell's style instead of using CSS classes, especially since the desired background colors are only determined at runtime.

My initial thought was to try something like grid.getView().getCell(rowIndex, colIndex).getStyle().setBackgroundColor(...) within getColStyle, but it seems that the returned cell is always null in this scenario.

Answer №1

After much trial and error, I managed to find a workaround:

I needed to modify the

com.sencha.gxt.widget.core.client.grid.GridView#doRender
method to include custom SafeStyles based on the model. To ensure flexibility, I also implemented an inheritance of the GridViewConfig to handle this task.

Although I had hoped for a simpler solution, this approach ultimately resolved the issue.

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

Trouble with background image displaying on meteor platform

Hey there! I'm in the process of replicating the HBO login page without functional links, but for some reason, the background image isn't loading properly. I suspect it might be an issue with resizing the image, but I can't pinpoint the exac ...

Is it possible to trigger a reflow prior to initiating a lengthy JavaScript operation?

Ready to face the criticism, I understand that this question has been asked many times before, and I am aware that there are likely more efficient ways to achieve what I'm trying to do... In a JavaScript function, I have a process that can take up to ...

Issue with setting a background image to a div in Next.js: not functioning as expected

I haven't used Next.js before and I'm having trouble setting a background image for a specific div. I have a folder named public in the root directory where I've placed the file art-thing.jpg. My styles.css is also in the root directory, whi ...

Eliminate the excess padding from the Material UI textbox

I've been struggling to eliminate the padding from a textbox, but I'm facing an issue with Material UI. Even after setting padding to 0 for all classes, the padding persists. Could someone provide guidance on how to successfully remove this pad ...

Having trouble tackling whitespace removal in the DIV? Usual methods seem ineffective?

I am currently working on a vertical-align "3 block" design and trying to eliminate the white space between the divs. I have experimented with setting the font-size of the body to 0px and then assigning individual font sizes to each child, but this approac ...

The input box refuses to accept any typed characters

I encountered a strange issue where the input box in the HTML was not allowing me to type anything. const para = document.createElement('p') const innerCard = document.getElementsByClassName('attach') for(let i = 0; i < innerCard.l ...

Omit the tag from the submission section

Currently, I am utilizing a <p> tag as a submit button/area by setting a specific id in jquery. <p id="xyz"></p> My requirement is to insert an input field inside this <p> tag to include a particular value that will be submitted u ...

CSS3 rotation animation - begins to rotate and then halts at a specific angle

I attempted to develop a function that initiates a spin, replaces an image, and then stops the spin. However, when I remove the spin class, it jerks abruptly. How can I halt the spinning smoothly at a specific frame? setTimeout(function() { $('. ...

What is the reason behind causing the overflow to become visible on the parent anchor when a child anchor is added?

I've been facing a puzzling issue for the past day. I am working on creating a website that resembles Windows 8, where each box represents a list item. The code is more complex than what I have shared here, but the problem seems to be isolated... &l ...

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

Is there a way to adjust the height of a DIV based on the background image and keep the text centered at the same time?

Currently in the process of designing a landing page for my website, and I am interested in incorporating a Jumbotron to provide a more modern and tech-savvy touch. Successfully managed to center my text both horizontally and vertically, now looking into s ...

Is the height of the element determined by the parent rather than the content?

I need help with a layout featuring three containers - Total (with a red border), Left (yellow border containing an image), and Right (blue border containing text). Left is set to approximately 30% width with float: left, while Right is set to 70% width w ...

Lose yourself in the horizontal beauty of the CSS menu

Currently, I am working on an application using ASP.Net MVC4, jquery 1.9, and CSS 2.1. However, I have encountered an issue with the horizontal menu display. Whenever a form with a jquery component is shown, some buttons seem to disappear behind the menu, ...

The div content is aligning at the baseline rather than the middle

The social icons on my website are currently displaying at 40x40, with the text appearing below them. I am looking to center the text within the icons themselves. Any tips on how I can achieve this? Your help is much appreciated! Check out the fiddle here ...

Boxes that expand to full width and appear to float on

I am dealing with a situation where I have a container that holds multiple child elements such as boxes or sections. <section> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <div>Box 4< ...

Full width display without any scrollbars

I need some help with adjusting the width of a section on my webpage to fit the browser size. Currently, I am using width: 100%, but this is causing scrollbars to appear. Unfortunately, I can't use overflow-x: hidden; as it will hide some of the conte ...

Steps to insert a logo into a Bootstrap navbar

Hey there, I'm having trouble fitting my logo into a Bootstrap navbar. The issue is that the logo appears larger than the navbar itself, and I've tried various solutions without success. Can someone please assist me with this problem? Below is th ...

Issue with the Ajax auto-complete feature in Internet Explorer

I am facing an issue with my "ajax suggestion list" getting hidden behind the "select menu" located right below the text box that triggers the ajax function. This problem only occurs in IE 6.0, while it works fine in other browsers. I have already disabled ...

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

Mastering VueTify: Customizing CSS like a Pro

Is there a way to modify the CSS of a child vuetify component? .filterOPV > div > div { min-height: 30px !important; } .filterOPV > div > div > div { background: #f5f5f5 !important; } <v-flex md2 class="filterOPV&quo ...