checkBox doesn't appear inside the grid with group when autorowheight = true

[taramanMember]

I have a check box column inside a grid, which has group by column
when make autorowheight = true, the check box column disappear
when removing group the check box appear again

$("#gridScanedItems").jqxGrid({
        source: dataAdapterScanedItems,
        theme: theme,
        width: 1050,
        autoheight: true,
        autorowheight: true, //get issue with checkbox & groupable
        altrows: false,
        groupable: true,
        groups: ["ProcedureAndManufacturer"],
        groupsexpandedbydefault: true,
        showgroupsheader: false,
        editable: true,
        columns: [
 	    { text: "Procedure / Manufacturer", dataField: "ProcedureAndManufacturer", hidden: false },
            { text: 'Scanned Lot', dataField: 'LotNumber', width: 120, cellsalign: 'center', align: 'center', groupable: false, editable: false },
            { text: 'Quantity', dataField: 'Quantity', width: 75, cellsalign: 'center', align: 'center', groupable: false, editable: false },
            {text: 'LOT', dataField: 'LOT', width: 75, cellsalign: 'center', align: 'center', groupable: false, editable: false },
            { text: 'SN', dataField: 'SN', width: 75, cellsalign: 'center', align: 'center', groupable: false, editable: false },
            { text: 'Expiry Date', dataField: 'ExpiryDate', width: 75, cellsalign: 'center', align: 'center', groupable: false, editable: false },
            { text: 'Replace', dataField: 'IsReplaced', columntype: 'checkbox', groupable: false, editable: true }
	]
    });

[DimitarParticipant]

Hello taraman,

Here is a workaround on the matter:

    <style type="text/css">
        #jqxgrid .jqx-checkbox
        {
            top: 0% !important;
        }
    </style>

where jqxgrid is the id of your grid.

Best Regards,
Dimitar

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

[DimitarParticipant]

Hi taraman,

An update on the matter: there is no such issue in the latest version of jQWidgets (2.7). For earlier versions, please use the provided workaround.

Best Regards,
Dimitar

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

[taramanMember]

Dimitar,
I tried your fix but the problem is that with these settings enabled, the jqx-checkbox is never even rendered into the DOM so there are no elements to apply that style to. I’ve verified with firebug’s DOM inspector that it isn’t there it’s just as the following:

<div class=" jqx-grid-group-cell jqx-grid-group-cell-black" style="overflow: hidden; position: absolute; height: 100%; left: 955px; z-index: 778; width:75px;"></div>

but when remove grouping or make rowautoheight = false the jqx-checkbox div appears in Dom:

<div class="jqx-widget jqx-widget-black jqx-checkbox jqx-checkbox-black" id="jqxWidget72f15a1d8c78" tabindex="0" style="opacity: 0.99; position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px; cursor: auto;"><div><div style="width: 13px; height: 13px;" class="jqx-checkbox-default jqx-checkbox-default-black jqx-fill-state-normal jqx-fill-state-normal-black jqx-rc-all jqx-rc-all-black"><span class="jqx-checkbox-check-checked jqx-checkbox-check-checked-black" style="width: 13px; height: 13px; opacity: 1;"></span></div></div><div style="clear: both;"></div></div>

thanks
Taraman

[taramanMember]

this is the cell with jqx-checkbox

<div class="jqx-grid-cell jqx-grid-cell-black jqx-grid-cell-wrap" style="overflow: hidden; position: absolute; height: 100%; left: 975px; z-index: 790; width:75px;"><div style="opacity: 0.99; position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px; cursor: auto;" tabindex="0" id="jqxWidget72f15a1d8c78" class="jqx-widget jqx-widget-black jqx-checkbox jqx-checkbox-black"><div><div class="jqx-checkbox-default jqx-checkbox-default-black jqx-fill-state-normal jqx-fill-state-normal-black jqx-rc-all jqx-rc-all-black" style="width: 13px; height: 13px;"><span style="width: 13px; height: 13px; opacity: 1;" class="jqx-checkbox-check-checked jqx-checkbox-check-checked-black"></span></div></div><div style="clear: both;"></div></div></div>

[taramanMember]

Hi,
the issue related to the last column not the check box column:

if u have a grid with this setting:
autorowheight: true
groupable: true

then:
the DOM of last column will not exist

[DimitarParticipant]

Hi taraman,

We were able to reproduce the reported issue. We have created a work item and will fix it as soon as possible. However, if you remove the autorowheight: true setting, there is no issue.

Best Regards,
Dimitar

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

[taramanMember]

I applied a workaround by adding a dummy hidden column to be the last column

{ groupable: false, editable: false,hidden: true }

thanks,
Taraman

[Author]

Posts