jQuery UI Widgets Forums Grid JQXGrid with Dynamic Columns, Grouping and expandallgroups

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

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

  • panky
    Participant

    Hi

    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


    panky
    Participant

    Hi

    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


    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/


    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

    • This reply was modified 10 years, 8 months ago by  panky.

    panky
    Participant

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


    panky
    Participant

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

    -Panky


    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/


    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

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

You must be logged in to reply to this topic.