JQXGrid with Dynamic Columns, Grouping and expandallgroups - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: autoheight, column, Dynamic Columns, expandallgroups, grid, grouping, jqxgrid, jqxTabs, tab, Tabs

This topic contains 7 replies, has 2 voices, and was last updated by panky 11 years, 2 months ago.

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

Author

JQXGrid with Dynamic Columns, Grouping and expandallgroups Posts

September 25, 2013 at 2:30 pm JQXGrid with Dynamic Columns, Grouping and expandallgroups #29568

panky

Participant

I have JQXGrid with Dynamic Columns and Grouping enabled and expandallgroups.

When I have autoheight: true for Grid and $(“#jqxGrid”).jqxGrid(‘expandallgroups’); it’s column alignment gets disturb at the bottom rows. [I am not able to attache screen shot]

if i remove autoheight: true for Grid, then it’s fine but with vertical scroll bar.

Any idea why it’s so?

Thanks

Panky

September 25, 2013 at 5:52 pm JQXGrid with Dynamic Columns, Grouping and expandallgroups #29577

panky

Participant

For now I have put a button to Expand/Collapse my Grid Groups and removed autoheight property of Grid.

But this is only temp solution.

-Panky

September 26, 2013 at 5:04 am JQXGrid with Dynamic Columns, Grouping and expandallgroups #29594

Dimitar

Participant

Hello Panky,

We were not able to reproduce the reported issue. Here is the example we tested with:

<!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,
                autoheight: true,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Country', datafield: 'Country' }
                ],
                groups: ['City'],
                ready: function () {
                    $("#jqxgrid").jqxGrid('expandallgroups');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Please check it out and make sure you use the latest version of jQWidgets (3.0.2).

Best Regards,
Dimitar

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

September 26, 2013 at 9:22 pm JQXGrid with Dynamic Columns, Grouping and expandallgroups #29638

panky

Participant

Thanks Dimitar,

I imitate your sample with my data and it’s looks gud 🙂

But… But when I put grid in JQXTab that time it’s mess up with last 4 Rows of grid. [As per my email]

$(‘#jqxTabs’).jqxTabs({ width: 1340, theme: ‘PPPPP’, showCloseButtons: false });

try putting same grid in Tab

And I have updated to jQWidgets (3.0.2)

Thanks
Panky

September 26, 2013 at 9:23 pm JQXGrid with Dynamic Columns, Grouping and expandallgroups #29639

panky

Participant

And I updated to latest version of jQWidgets (3.0.2).

September 27, 2013 at 2:42 am JQXGrid with Dynamic Columns, Grouping and expandallgroups #29645

panky

Participant

Please try with Data, where last group has more than 5 rows.

-Panky

September 27, 2013 at 5:02 am JQXGrid with Dynamic Columns, Grouping and expandallgroups #29658

Dimitar

Participant

Hi Panky,

Please make sure you initialize your grid in the jqxTabs initTabContent callback function, as shown in the demo Integration with other widgets.

Best Regards,
Dimitar

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

September 27, 2013 at 5:49 pm JQXGrid with Dynamic Columns, Grouping and expandallgroups #29735

panky

Participant

Thanks Dimitar,

Looks like my issue resolved, I load all my tab content in initTabContent.

But, with new version of jQWidgets I got messed up my all Grids layout, let me play little more with it 😉

Thanks
Panky

Author

Posts

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

You must be logged in to reply to this topic.