jqxgrid group renderer header background color width issue

[dan123Participant]

Hi i have this jqxgrid with grouping enabled. Also i set a default width for the jqxgrid.

The issue i am facing is that i add a group renderer with background color on the group headings AS GRAY color. But for some reason when i scroll to the right on the grid, i see the the background color getting cut off at a certain width and its showing color as white.

Seems like the jqxgrid is setting a default width for the grouping headers. Is there a way to make them ‘100%’ width. I tried everything but not sure how to fix this and appreciate a workaround for this.

Here is my jsfiddle:
http://jsfiddle.net/uf6sxngy/3/

[HristoParticipant]

Hello dan123,

One possible option is to use the “.jqx-grid-group-cell” class to set this.
Please, take a look at this code:

.jqx-grid-group-cell:not(:first-child) {
  width: 100% !important;
}

Or you could directly change the background color of the mentioned class.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[dan123Participant]

Hi Hristo.

When i turned on the selectionmode to ‘checkbox’. using your css, it causes issues with the other columns and checkbox column as well.

Here is the jsfiddle:
http://jsfiddle.net/x9ncd7e6/1/

[HristoParticipant]

Hello dan123,

This is not a built-in feature that I try to suggest is one workaround.
Unfortunately, I am not able to provide you a better solution with the current API.
As an alternative, I think you could try another our product from our library Smart HTML Elements.
Please, take a look at this demo with the Smart.Grid:
https://www.htmlelements.com/demos/grid/grouping-basic/

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[dan123Participant]

Hi Hristo.

I would prefer if possible to add a fix for this in future. Because this could come across as a issue. Due to the fact that we have the group renderer function to customize the group header.

Thanks. I will keep trying to see a CSS approach.

[HristoParticipant]

Hello dan123,

It is created in that way by design.
I would like to suggest you contact the Sales Department (sales@jqwidgets.com) with a request for custom development.

Also, you could try manually to update this class on each one change.
You could try something like this:

var groupingRows = $(".grouping");
var firstGroup = groupingRows[0];
var firstParent = firstGroup.parentNode;
firstParent.style.width = "100%";

The topic below will be helpful, too:
https://www.jqwidgets.com/community/topic/scroll-event/

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts