groupable: false is not working.

[ajayetw2009Participant]

Hi Sir,

groupable: false is not working in JqxGrid.

[Peter StoevKeymaster]

Hi ajayetw2009,

The default value of jqxGrid is groupable: false. It works. Otherwise, all Grids demos on our website would be with enabled grouping. If you experience some issue, then please provide a sample and we will test it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ajayetw2009Participant]

/
Thanks sir for reply

Its not working for this.

/ Create jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
autoheight: true,
altrows: true,
source: dataAdapter,
pagesize: 20,
pageable: true,
filterable: true,
groupable: true,
enabletooltips: true,
autoshowfiltericon: true,
columnsreorder: true,
pagesizeoptions: [’10’, ’20’, ’50’, ‘100’],
columnsresize: true,
sortable: true,
scrollmode: ‘none’,
editable: true,
selectionmode: ‘single’,
columns: [
{
text: ”, datafield: ‘IS_DELETED’, columntype: ‘checkbox’, width: ‘4%’, autoshowcolumnsmenubutton: false, filterable: false, sortable: false, menu: false, groupable: false,
renderer: function () {
return ‘

‘;
},
rendered: function (element) {
$(element).jqxCheckBox({ width: 30, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
columnCheckBox = $(element);
$(element).bind(‘change’, function (event) {
var rowscount;
var checked = event.args.checked;
var paginginformation = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pagescount = paginginformation.pagescount;
var pageArray = new Array();
var k = 1;
var IndexesArray = new Array();
// var rowscount = $(“#jqxgrid”).jqxGrid(‘getrows’).length;
// var rowscount = pagesize;
var rowscount1 = $(“#jqxgrid”).jqxGrid(‘getrows’).length;
if (rowscount1 < pagesize) {
rowscount = rowscount1;
}
else {
rowscount = pagesize;
}

for (var l = 0; l 0) {
GetCkeckAllData(l);
}

};
for (var i = 0; i = pagenum * pagesize && IndexesArray[i].visible 0) {
$(‘#action_Item1’).attr(‘style’, ‘display:Block’);
$(‘#div_action_Item1’).attr(‘style’, ‘display:Block’);
$(‘#action_Item’).attr(‘style’, ‘display:Block’);
$(‘#div_action_Item’).attr(‘style’, ‘display:Block’);

}
else {
$(‘#action_Item1’).attr(‘style’, ‘display:none’);
$(‘#div_action_Item1’).attr(‘style’, ‘display:none’);
$(‘#action_Item’).attr(‘style’, ‘display:none’);
$(‘#div_action_Item’).attr(‘style’, ‘display:none’);
$(‘#actionItem’).attr(‘style’, ‘display:none’);
$(‘#errorControl’).attr(‘style’, ‘display:none’);
objectArray = [];
objectArrayForDeleteRid = [];
objectArrayForLock = [];
objectarrayForUnlock = [];
arrForclickPAR_FLDR_RID = [];
arrForclickFile_Sz=[];
}
if (checked == null || updatingCheckState) return;

var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
$(“#jqxgrid”).jqxGrid(‘beginupdate’);
if (checked) {
$(“#jqxgrid”).jqxGrid({ selectedrowindexes: pageArray });
}
else if (checked == false) {

$(“#jqxgrid”).jqxGrid(‘clearselection’);

}
// $(“#jqxgrid”).bind(“pagechanged”, function (event) {
// for (var r = 0; r = pagenum * pagesize && IndexesArray[r].visible < (pagenum + 1) * pagesize) {
// var value = $("#jqxgrid").jqxGrid('getcellvalue', IndexesArray[r].bound, 'IS_DELETED');
// if (value != null) {
// $("#jqxgrid").jqxGrid({ selectedrowindex: IndexesArray[r].bound });
// } else {
// $('#jqxgrid').jqxGrid('unselectrow', IndexesArray[r].bound);
// };
// };
// };
// });
$("#jqxgrid").jqxGrid('endupdate');

});
}
},

{ text: 'Type', datafield: 'IconText', width: '4%', editable: false, cellsrenderer: IconRender, filterable: false },
{ text: 'RID', datafield: 'OBJ_RID', width: '6%', cellsrenderer: linkrenderer, editable: false, groupable: false },
{ text: 'Identifier', datafield: 'ID_NMBR', width: '8%', editable: false, cellsrenderer: LifeCycleRender },
{ text: 'Version', datafield: 'OBJ_VER', width: '5%', editable: false, cellsrenderer: versionlinkrenderer },
{ text: 'Change Info', datafield: 'CHG_INFO', width: '7%', editable: false, cellsrenderer: LifeCycleRender },
{ text: 'Title', datafield: 'TYT_1', width: '18%', editable: false, cellsrenderer: LifeCycleRender },
{ text: 'Status', datafield: 'STS_COD', width: '5%', editable: false, cellsrenderer: LifeCycleRender },
{ text: 'Lifecycle State', datafield: 'STT_NM', width: '6%', editable: false, cellsrenderer: LifeCycleRender },
{ text: 'Category', datafield: 'CLS_LBL', width: '8%', editable: false, cellsrenderer: LifeCycleRender },
//{ text: 'Effective Timestamp', datafield: 'EFF_TS', width: '10%', editable: false, formatstring: "ddd" },
{text: 'Modified By', datafield: 'MBY_NM', width: '6%', editable: false, cellsrenderer: LifeCycleRender },
{ text: 'Last Modified Date & Time (UTC)', datafield: 'MBY_TS', width: '10%', editable: false, cellsrenderer: LifeCycleRender, formatstring: "ddd" },
{ text: 'Locked By', datafield: 'OWNR_NM', width: '6%', editable: false, cellsrenderer: LifeCycleRender },
{ text: 'Menu', datafield: 'Menu', width: '7%', editable: false, cellsrenderer: MenuRender, filterable: false, sortable: false, groupable: false, menu: false },
{ text: 'Share', datafield: 'Share', width: '7%', editable: false, cellsrenderer: ShareRender, filterable: false, sortable: false, groupable: false, Share: false }
]
});

GetCheckBoxStaus();

}

[Peter StoevKeymaster]

Hi ajayetw2009,

I suggest you to check whether you use the latest version. In addition, you have enabled Columns Reorder. That means that your column Headers would be draggable, but not all of them would be Groupable i.e those column headers with groupable: false would not be groupable.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Basic grouping Grid showing collapsible data groups that can
        be customized via the 'Group By' header menu option or via drag and drop of grid
        column headers.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/customers.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 600,
                source: dataAdapter,
                groupable: true,
                columnsreorder: true,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'City', groupable: false, datafield: 'City', width: 120 },
                  { text: 'Country', datafield: 'Country' }
                ]
            });
            $("#expand").jqxButton({ theme: theme });
            $("#collapse").jqxButton({ theme: theme });
            $("#expandall").jqxButton({ theme: theme });
            $("#collapseall").jqxButton({ theme: theme });
            // expand group.
            $("#expand").on('click', function () {      
                var groupnum = parseInt($("#groupnum").val());
                if (!isNaN(groupnum)) {
                    $("#jqxgrid").jqxGrid('expandgroup', groupnum);
                }
            });
            // collapse group.
            $("#collapse").on('click', function () {
                var groupnum = parseInt($("#groupnum").val());
                if (!isNaN(groupnum)) {
                    $("#jqxgrid").jqxGrid('collapsegroup', groupnum);
                }
            });
            // expand all groups.
            $("#expandall").on('click', function () {
                $("#jqxgrid").jqxGrid('expandallgroups');
            });
            // collapse all groups.
            $("#collapseall").on('click', function () {
                $("#jqxgrid").jqxGrid('collapseallgroups');
            });
            // trigger expand and collapse events.
            $("#jqxgrid").on('groupexpand', function (event) {
                var args = event.args;
                $("#expandedgroup").text("Group: " + args.group + ", Level: " + args.level);
            });
            $("#jqxgrid").on('groupcollapse', function (event) {
                var args = event.args;
                $("#collapsedgroup").text("Group: " + args.group + ", Level: " + args.level);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <div style="float: left; margin-left: 20px;">
                <input value="Expand Group" type="button" id='expand' />
                <br />
                <input style="margin-top: 10px;" value="Collapse Group" type="button" id='collapse' />
                <br />
                <span style="margin-top: 10px;">Group:</span>
                <input value="1" id="groupnum" style="margin-top: 10px; width: 20px;" type="text" />
            </div>
            <div style="float: left; margin-left: 20px;">
                <input value="Expand All Groups" type="button" id='expandall' />
                <br />
                <input style="margin-top: 10px; margin-bottom: 10px;" value="Collapse All Groups"
                    type="button" id='collapseall' />
                <br />
            </div>
            <div style="float: left; margin-left: 20px;">
                <div style="font-weight: bold;">
                    <span>Event Log:</span>
                </div>
                <div style="margin-top: 10px;">
                    <span>Expanded Group:</span> <span id="expandedgroup"></span>
                </div>
                <div style="margin-top: 10px;">
                    <span>Collapsed Group:</span> <span id="collapsedgroup"></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ajayetw2009Participant]

Thanks sir for giving solution.

[Author]

Posts