jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Hiding grouping header

Tagged: , ,

This topic contains 4 replies, has 2 voices, and was last updated by  jscoder 10 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Hiding grouping header Posts
  • March 10, 2015 at 8:18 am Hiding grouping header #68249

    jscoder
    Participant

    Hello,

    Is it possible to hide

    “Drag a column and drop it here to group by that column”

    and would there be any consequences in grouping functionality ?

    Thanks!

    March 10, 2015 at 12:40 pm Hiding grouping header #68269

    Nadezhda
    Participant

    Hello jscoder,

    You can set ‘showgroupsheader’ property to false to hide the groups header area(the above text). Here is an example: http://jsfiddle.net/jqwidgets/uFSMD/. There are not consequences in grouping functionality if the text is hidden.

    Best Regards,
    Nadezhda

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

    March 12, 2015 at 7:28 am Hiding grouping header #68397

    jscoder
    Participant

    Hi Nadezhda,

    Thanks, Is it possible to hide it when there is no grouping but show it if grouping is applied and hide it again once grouping is removed ?

    Thanks!

    March 12, 2015 at 2:03 pm Hiding grouping header #68421

    Nadezhda
    Participant

    Hi jscoder,

    In the following example you can find how to show/hide the group header when you add, insert or delete group. I hope it would be helpful.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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">
        $(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: 850,
                source: dataAdapter,
                groupable: true,
                showgroupsheader: true,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Country', datafield: 'Country' }
                ],
                groups: ['City']
            });

            $("#jqxgrid").on("groupschanged", function (event) {
                // event arguments.
                var args = event.args;
                // groups array.
                var groups = args.groups;
                if (groups == "") {
                    $('#jqxgrid').jqxGrid({ showgroupsheader: false });
                }
                else
                    $('#jqxgrid').jqxGrid({ showgroupsheader: true });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

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

    March 18, 2015 at 2:15 am Hiding grouping header #68776

    jscoder
    Participant

    Great! Thanks Nadezhda !!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.