cellclassname styles being overridden

[matthew.j.colonParticipant]

I am not able to get the column’s cellclassname to change certain styles in my cells because they are being overridden by jqxGrid itself. For example, here is the code I am using:

In my definition of my jqxGrid wrapper, I’m using:

var jqxColumn = {
		text: column.label,
		datafield: column.name
};

jqxColumn.cellclassname = "blueText";

jqxColumn.width = column.width ? column.width : 150; //default to 150

if(column.align){
	jqxColumn.cellsalign = column.align;
}

In my CSS file:

.blueText {
	color: blue;
}

However, the font color remains #333333 even though the “blueText” class is in the <div> element:
<div role="gridcell" style="left: 25px; z-index: 798; width:150px;" class="jqx-grid-cell jqx-item blueText"><div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">Column1</div></div>

In the computed styles, I see that the “jqx-item” style’s font color is overriding the font color in “blueText” (the “blueText” class is struck out in the Chrome debugger while the “jqx-item” is not and is at the top):

color: rgb(51, 51, 51);
.jqx-item - inherit
.blueText - blue
.blueText - blue

I played around with this demo and was able to set my own font colors for the grid successfully, but I don’t see why it wouldn’t be working in my own project. I know about cellsrenderer, but I’ve been asked not to use that so that we can make use of the built-in selection, etc. style changes rather than having to replicate them ourselves. Is there anything that would cause cellclassname’s classes to not be fully used for cell styles and would allow “jqx-item” or other classes to override it?

[Peter StoevKeymaster]

Hi matthew.j.colon,

jqxGrid does not override cell styles. When you set the cellclassname, the CSS Class will be applied to the cells. This is a fact and works 100% in all scenarios. If you want to learn how to use the feature, then I suggest you to look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridcellclass.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jlarueParticipant]

I’m having the same issue as the original poster. It’s not that I’m wondering if the background color is being overridden – I’m stating that it is in fact being overridden by the jqx-grid-cell class’s background-color style. This is clearly seen in the degugging tools of both chrome and IE 11. The class is added to the markup, but ignored.

This is happening with both a bootstrap background color class, as well as a custom background color class.

looking at http://www.jqwidgets.com/community/topic/cellclassname-works-with-font-size-but-not-background-color/ i see that background-color usually is not ignored unless the cell already have background or background-image applied.

it seems like the jqx-grid-cell class is doing just that. Could this be related to the order I’m declaring my style sheets or something?

jq widgets version 4.4.0
jquery version 2.2.0
jqueryUI version 1.11.4

[jlarueParticipant]

After some testing, I have discovered that this behavior exists when jqx.base.css is referenced after the stylesheet containing the style being set in the cellclassname callback.

In my case, needed to reference jqx.base.css before bootstrap so I could add the ‘bg-info’ class to a cell

[Author]

Posts