grouping and row details causing group not to take width

[jacobraccuiaParticipant]

I have grouping and row details, and the grouping bar doesn’t extend the full width anymore! As you can see in the image, the missing pixels are from the added dropdown arrow for the group.

I can paste code if it’s need be but I have a TON of custom stuff and it might be easier if I’m told what parts you want to see. Here’s a screenshot of the problem.

Here is my grouprenderer code:

            groupsrenderer: function(text, group, expanded, data) { console.log(data);
                if (data.subItems.length > 0 && data.groupcolumn.datafield == 'salesRegion') {
                    var a = this.getcolumnaggregateddata('amount', ['sum'], true, data.subItems);
                    var b = this.getcolumnaggregateddata('runRateFinal', ['sum'], true, data.subItems);

                    return '<div class="jqx-grid-groups-row groupRow" style="position: absolute;">' + 
                           '<strong>Sales Region: </strong>' + group +
                           '<strong class="runRateFinalAgg aggregateCell">' + b.sum + '</strong>' + '<strong class="amountAgg aggregateCell">' + a.sum + '</strong></div>';
                } else {
                    return '<div class="jqx-grid-groups-row groupRow" style="position: absolute;"><span>' + text + '</span>';
                }
            },

here is my row details code:

rowdetailstemplate: {
                rowdetails: "<div style='margin: 10px;'>Row Details</div>",
                rowdetailsheight: 80
            },
            initrowdetails: function(index, parentElement, gridElement, datarecord) {
                var details = $($(parentElement).children()[0]);
                var d = $('#opportunityGrid').jqxGrid('getrowdatabyid',index);

                var data = '';

                $.each(d, function(k, v) {
                  if(v == null) {
                    d[k] = '';
                }
            });

                data += 'Pipeline Date: <strong>' + d.pipelineDate.getMonth() + '/' + (d.pipelineDate.getDate() + 1) + '/' + d.pipelineDate.getFullYear() + '</strong></br>';
                data += 'Account: <a href="/' + d.acccountId + '" title="View ' + d.account + '"><strong>' + d.account + '</strong></a></br>';
                data += 'Edition: <strong>' + d.edition + '</strong></br>';

                details.html(data);

            },

[HristoParticipant]

Hello jacobraccuia,

I try to recreate it but it seems to work fine.
Could you provide us an example that demonstrates this issue?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[jacobraccuiaParticipant]

Here is a jsfiddle that shows the white spacing that is being created.

https://jsfiddle.net/khy6hkuy/15/

[HristoParticipant]

Hello Jacob,

Thank you for the interest.
We have a work item for this issue.
Thanks again.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[jacobraccuiaParticipant]

I was able to fix this with CSS in the interim. This SHOULD work with most setups, but it’s hard to confirm..

/* target first cell row that isn't pinned */
.jqx-grid-cell-pinned + .jqx-grid-group-cell:not(.jqx-grid-cell-pinned) { border-right:0px; width:100%!important; }

[HristoParticipant]

Hello Jacob,

We recommend using the classes described in our API.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts