jQWidgets Forums

Tagged: columngroups, display, grid, hierarchy, jqxgrid, jqxwindow, visibility, window

This topic contains 3 replies, has 2 voices, and was last updated by klien54 11 years, 1 month ago.

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

Author

Grid columngroups are missing in jqxWindow Posts

February 14, 2014 at 8:46 am Grid columngroups are missing in jqxWindow #49509

Participant

I want to make a window which contains a grid with the Columns Hierarchy.
However, when I open the window, the Column groups are all disappeared with the error, “Cannot read property ‘style’ of undefined” in [$.extend._rendercolumngroups.getwidth].
Would you tell me how to make a grid with the Columns Hierarchy in jqxWindow?

Here is my code below,

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel='stylesheet' href='../../style/jQWidgets/3.2.1/jqx.base.css'/>
    <script type='text/javascript' src='../../lib/jquery/jquery-1.10.2.js'></script>
    <script type='text/javascript' src='../../lib/AUI/AUI-0.9.0.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/jqxcore.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/grid/jqxgrid.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/grid/jqxgrid.selection.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/grid/jqxgrid.columnsresize.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/grid/jqxgrid.columnsreorder.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/grid/jqxgrid.edit.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/jqxscrollbar.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/jqxcheckbox.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/jqxbuttons.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/jqxwindow.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/jqxdata.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/jqxtooltip.js'></script>
    <script type='text/javascript' src='../../lib/common/common.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/ext/jqxgrid.ext.aui.js'></script>
    <script type='text/javascript'>
        var ENV = {
            ID_JQXWINDOW: '#testWindow',
            ID_JQXGRID: '#testGrid'
        }

        var mainView = {

            initWindow: function () {
                $(ENV.ID_JQXWINDOW).jqxWindow({
                    height: 200,
                    width: 800,
                    theme: "",
                    resizable: true,
                    isModal: true,
                    modalOpacity: 0.3,
                    autoOpen: false
                });
            },

            initGrid: function () {
                var dataAdapter = new $.jqx.dataAdapter(this._loadGridData());

                $(ENV.ID_JQXGRID).jqxGrid({
                            width: 800,
                            height: 150,
                            columnsresize: true,
                            columnsreorder: true,
                            source: dataAdapter,
                            enableHeaderTooltips: true,
                            columns: [
                                { text: '1st Column', datafield: '1stCol'},
                                { text: '2nd Column', datafield: '2ndCol', columngroup: 'ProductDetails'},
                                { text: '3rd Column', datafield: '3rdCol', columngroup: 'ProductDetails'},
                                { text: '4th Column', datafield: '4thCol', columngroup: 'OrderDetails'},
                                { text: '5th Column', datafield: '5thCol', columngroup: 'OrderDetails'},
                                { text: '6th Column', datafield: '6thCol', columngroup: 'OrderDetails'},
                                { text: '7th Column', datafield: '7thCol', columngroup: 'Location'},
                                { text: '8th Column', datafield: '8thCol', columngroup: 'Location'}
                            ],
                            columngroups: [
                                { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                                { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                                { text: 'Location', align: 'center', name: 'Location' }
                            ]
                        }
                );
            },

            _loadGridData: function () {
                var data = [
                    {
                        "1stCol": "val1",
                        "2ndCol": "val2",
                        "3rdCol": "val3",
                        "4thCol": "val4",
                        "5thCol": "val5",
                        "6thCol": "val6",
                        "7thCol": "val7",
                        "8thCol": "val8"
                    }
                ];

                var source = {
                    datatype: 'json',
                    datafields: [
                        { name: '1stCol' },
                        { name: '2ndCol' },
                        { name: '3rdCol' },
                        { name: '4thCol' },
                        { name: '5thCol' },
                        { name: '6thCol' },
                        { name: '7thCol' },
                        { name: '8thCol' }
                    ],
                    localdata: data
                }
                return source;
            }

        }

        $(document).ready(function () {
            $('#testBtn').on('click', function () {
                mainView.initWindow();
                mainView.initGrid();
                $('#testWindow').jqxWindow('open');
            })

        });
    </script>
</head>
<body>
<input type="button" id="testBtn" value="Window Test"/>
<div id='testWindow' style="display: none">
    <div>
        <div id='testGrid'></div>
    </div>
</div>
</body>
</html>

Best Regards.

February 14, 2014 at 9:11 am Grid columngroups are missing in jqxWindow #49512

klien54

Participant

please get rid of the line, [enableHeaderTooltips: true,] when you test my code.

February 14, 2014 at 11:14 am Grid columngroups are missing in jqxWindow #49522

Dimitar

Participant

Hello klien54,

The issue is because of the display: none style of your window. We recommend the following changes:

initWindow: function () {
    $(ENV.ID_JQXWINDOW).jqxWindow({
        height: 200,
        width: 800,
        theme: "",
        resizable: true,
        isModal: true,
        modalOpacity: 0.3,
        autoOpen: false
    });
    $(ENV.ID_JQXWINDOW).css("visibility", "visible");
},

...

<div id='testWindow' style="visibility: hidden;">
    <div>
        Title</div>
    <div>
        <div id='testGrid'>
        </div>
    </div>
</div>

...

Note that the window now has a title, as it should.

Best Regards,
Dimitar

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

February 15, 2014 at 5:04 am Grid columngroups are missing in jqxWindow #49554

klien54

Participant

Thank you for your quick reply!
Your advice is valuable for my code.
I also figured out that there was ‘jqxmenu.js’ was missing for the process.
For reconstructing the group header, ‘jqxmenu.js’ should be added.
Anyhow, I’ve solved the problem.
Thank you!

Author

Posts

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

You must be logged in to reply to this topic.