jQWidgets Forums

Tagged: datagrid control, javascript table, jquery table, jqwidgets

This topic contains 8 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 10 months ago.

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

Author

Remove empty rows when grouping and paging is on Posts

May 7, 2013 at 3:12 pm Remove empty rows when grouping and paging is on #20679

jgaris

Participant

When grouping and paging are turned on, and there is less records than the page size, the grid creates an empty group with the remainder rows in it. For example if grouping and paging is turned on, and the page size is 10, and there are only 6 records, it shows a blank group with 4 blank rows.

Is it possible to remove (or hide) those?

Thank you.

May 7, 2013 at 4:29 pm Remove empty rows when grouping and paging is on #20684

Peter Stoev

Keymaster

Hi,

Which version of jQWidgets do you use?

Best regards,
Peter Stoev

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

May 7, 2013 at 8:45 pm Remove empty rows when grouping and paging is on #20698

jgaris

Participant

I am currently using 2.8.1. I tried 2.8.3 but the expand/collapse of groups was not working so I reverted back to 2.8.1.

May 9, 2013 at 2:54 pm Remove empty rows when grouping and paging is on #20852

jgaris

Participant

I came up with the following solution, which works in removing the empty groups…

control.jqxGrid(settings); control.jqxGrid('exportInitialize', exportFileName);

control.on("bindingcomplete", function (event) { var $emptygroup = $('.jqx-grid-groups-row-details:empty'); var $emptycell = $('.jqx-grid-empty-cell'); if ($emptygroup.length) { $emptygroup.parent().parent().parent().nextAll().remove(); if ($emptycell.length == 0) { $emptygroup.parent().parent().parent().remove(); } $(".jqx-grid-content").css("border-bottom", "1px solid #aaa"); } control.jqxGrid('expandallgroups'); });

The only issue remaining, is that the height of the grid does not change, it just shows white space. Is there a way to recalculate the height after a change like this?

May 9, 2013 at 3:29 pm Remove empty rows when grouping and paging is on #20855

Peter Stoev

Keymaster

Hi,

1. The following sample shows that Groups are expanding correctly in the current version: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/grouping.htm?web. If you have an issue with that behavior, then you may send a sample which demonstrates it.
2. I really do not suggest you to Remove HTML Elements from the Grid. That will bring to errors for sure.
3. The Grid do not show empty groups when Paging and Grouping are Enabled. At least that is the behavior in the current version.

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.8.3.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            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,
                pageable: true,
                theme: theme,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Country', datafield: 'Country' }
                ],
                groups: ['City']
            });
            $("#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/

May 13, 2013 at 5:43 pm Remove empty rows when grouping and paging is on #21058

jgaris

Participant

I used your example which worked fine our site, and I was able to determine that the original issue I mentioned (blank rows/groups) happens only when “virtualmode” is used. I turned virtualmode off on my site, and the issue went away, however paging stopped working. Any thoughts?

May 13, 2013 at 6:11 pm Remove empty rows when grouping and paging is on #21064

Peter Stoev

Keymaster

Hi jqaris,

I do not know how you implemented paging. If you implemented Virtual Paging and turned it off, then it will not work. If you use the normal paging where all rows are loaded in the Grid, it will work.

Best regards,
Peter Stoev

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

May 13, 2013 at 6:18 pm Remove empty rows when grouping and paging is on #21066

jgaris

Participant

I found another post with the same issue here: http://www.jqwidgets.com/community/topic/virtual-paging-and-groups/

May 13, 2013 at 6:28 pm Remove empty rows when grouping and paging is on #21068

Peter Stoev

Keymaster

Hi jqaris,

Virtual Paging means that all rows are loaded on demand i.e the Grid knows only about the Rows that are displayed and nothing more. Grouping in Virtual Grid will work only for the displayed(loaded) records because you cannot group something which is not loaded. If you want to use Grouping, then you can do it in the way demonstrated in our Grouping samples.

Best regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.