Grid grouping - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: column, grid, group, grouping, groupschanged, hide, hidecolumn, show, showcolumn

This topic contains 5 replies, has 3 voices, and was last updated by Dimitar 10 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Grid grouping Posts

November 7, 2013 at 12:48 pm Grid grouping #32167

Gowri

Participant

hi,
is it possible to hide the column when gird column is grouped and show when it is ungrouped?

Regrads,
Gowri.

November 8, 2013 at 8:48 am Grid grouping #32240

Dimitar

Participant

Hello Gowri,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            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,
                theme: theme,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'City', 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);
            });
            $("#jqxgrid").on("groupschanged", function (event) {
                if (event.args.groups.length > 0) {
                    $('#jqxgrid').jqxGrid('hidecolumn', 'Country');
                } else {
                    $('#jqxgrid').jqxGrid('showcolumn', 'Country');
                };
            });
        });
    </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,
Dimitar

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

November 12, 2013 at 3:55 am Grid grouping #32425

Gowri

Participant

Dimitar,
Your example shows grouping a particular column and hiding/showing the same. Whereas in our case we have to group any column, while grouping we have to hide that particular column and while ungrouping we have to show the same.

Grouping the Particular column I used below code

 $("#JQGrid").on("groupschanged", function (event)
    {
         if (event.args.groups.length > 0) {
            $.each(event.args.groups,function(data,val){
                $("#JQGrid").jqxGrid('hidecolumn', val);
            });
        } else {
            $("#JQGrid").jqxGrid('showcolumn', ??);
        };
    });

But I don’t know how to show that particular column while ungrouping.!!

Please help us Thanks in advance.

Regards,
Gowri.

November 12, 2013 at 6:42 am Grid grouping #32448

Dimitar

Participant

Hi Gowri,

Here is a suggestion:

var hiddenColumn;
$("#JQGrid").on("groupschanged", function (event) {
    if (event.args.groups.length > 0) {
        $.each(event.args.groups, function (data, val) {
            $("#JQGrid").jqxGrid('hidecolumn', val);
            hiddenColumn = val;
        });
    } else {
        $("#JQGrid").jqxGrid('showcolumn', hiddenColumn);
    };
});

Best Regards,
Dimitar

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

March 18, 2014 at 9:26 pm Grid grouping #51325

amesritter

Participant

This doesn’t seem to work for me. I’m using the exact code above but the “groupschanged” events seem to do nothing.

Using ASP.NET, not sure if that matters.

March 19, 2014 at 6:28 am Grid grouping #51349

Dimitar

Participant

Hello amesritter,

Please make sure you have changed JQGrid with the id of your grid and that you are using the latest version of jQWidgets (3.2.1).

Best Regards,
Dimitar

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

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.