jQuery UI Widgets Forums Grid Problem with Grid and Layout

This topic contains 5 replies, has 3 voices, and was last updated by  Dimitar 3 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Problem with Grid and Layout #84909

    TomArcher
    Participant

    I’m attempting to place a grid in a panel of a layout control. The data displays, but the grid is not responding to row selection.

    * I placed an alert() in the rowselect function and it doesn’t get called when the grid is inside the layout.
    * Developer Tools displays no error messages

    What am I doing wrong?

            <script type="text/javascript">
                $(document).ready(function () {
                    // Set up grid
                    var data = '[{ "AccountName": "Checking Account #1", "AccountBalance": "$4,096.42"}, { "AccountName": "Savings Account #2", "AccountBalance": "$8,192.00"}]';
    
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'AccountName', type: 'string' },
                            { name: 'AccountBalance', type: 'string' }
                        ],
                        localdata: data,
                        updaterow: function (rowid, rowdata, commit) {
                            commit(true);
                        }
                    };
    
                    var dataAdapter = new $.jqx.dataAdapter(source);
    
                    $("#jqxgrid").jqxGrid(
                    {
                        width: '100%',
                        height: '100%',
                        source: dataAdapter,
                        columnsresize: true,
                        columns: [
                            { text: 'Account', datafield: 'AccountName', width: 250 },
                            { text: 'Balance', datafield: 'AccountBalance', width: 150 }
                        ]
                    });
    
                    $("#AccountName").jqxInput({height: 23});
                    $("#AccountBalance").jqxInput({ height: 23});
                
                    $('#jqxgrid').on('rowselect', function (event) {
                        alert('hi')
                        // event arguments.
                        var args = event.args;
                        // selected row.
                        var row = event.args.row;
                        // update inputs.
                        $("#AccountName").val(row.AccountName);
                        $("#AccountBalance").val(row.AccountBalance);
                    });
    
                    $("#Save").jqxButton({  width: 70, height: 23 });
    
                    $("#Save").click(function () {
                        var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
                        var rowid = $("#jqxgrid").jqxGrid('getrowid', row);
                        var data = { AccountName: $("#AccountName").val(), AccountBalance: $("#AccountBalance").val() };
                        $("#jqxgrid").jqxGrid('updaterow', rowid, data);
                    });
    
                    // the 'layout' JSON array defines the internal structure of the layout
                    var layout = [{
                        type: 'layoutGroup',
                        orientation: 'horizontal',
                        items: [
                        {
                            type: 'tabbedGroup',
                            width: '25%',
                            items: [{
                                type: 'layoutPanel',
                                title: 'Account List',
                                contentContainer: 'SolutionExplorerPanel'
                            }, {
                                type: 'layoutPanel',
                                title: 'Properties',
                                contentContainer: 'PropertiesPanel'
                            }]
                        },
                        {
                            type: 'layoutGroup',
                            orientation: 'vertical',
                            width: '75%',
                            items: [{
                                type: 'documentGroup',
                                height: '50%',
                                minHeight: '25%',
                                items: [{
                                    type: 'documentPanel',
                                    title: 'Register',
                                    contentContainer: 'Document1Panel'
                                }, {
                                    type: 'documentPanel',
                                    title: 'Document 2',
                                    contentContainer: 'Document2Panel'
                                }]
                            }, {
                                type: 'tabbedGroup',
                                height: '50%',
                                pinnedHeight: '10%',
                                items: [{
                                    type: 'layoutPanel',
                                    title: 'Error List',
                                    contentContainer: 'ErrorListPanel'
                                }, {
                                    type: 'layoutPanel',
                                    title: 'Output',
                                    contentContainer: 'OutputPanel',
                                    selected: true
                                }]
                            }]
                        } 
                        ]
                    }];
    
                    $('#jqxLayout').jqxLayout({ width: '100%', height: '100%', layout: layout });
    
                });
    
                var loadPage = function (url) {
                    $.get(url, function (data) {
                        $('#Test').html('<div style="overflow: auto; width: 100%; height: 100%;">' + data + '</div>');
                    });
                }
    
                loadPage('main.js');
            </script>
        </head>
        <body>
            <div id="jqxLayout">
                    <!--The panel content divs can have a flat structure-->
                    <!--documentGroup-->
                    <div data-container="Document1Panel">
                        <div id="Test">
                            <img src='jqwidgets/images/ajax-loader.gif' />
                        </div>
                    </div>
                    <div id="ContentPanel" data-container="Document2Panel">
                        <form id="Form">
                            <table style="margin-top: 20px; width: 100%;">
                                <tr><td style="text-align:right;">Company Name:</td><td style="text-align:left;"><input type="text" id="AccountName" /></td></tr>
                                <tr><td style="text-align:right;">Contact Name:</td><td style="text-align:left;"><input type="text" id="AccountBalance" /></td></tr>
                                <tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr>
                            </table>
                        </form>
                    </div>
                    <!--bottom tabbedGroup-->
                    <div data-container="ErrorListPanel">
                        List of errors</div>
                    <div data-container="OutputPanel">
                        Output</div>
                    <!--right tabbedGroup-->
                    <div id='jqxgrid' data-container="SolutionExplorerPanel"></div>
                    <div data-container="PropertiesPanel">
                        List of properties</div>
                </div>
            </body>
    </html>
    Problem with Grid and Layout #84911

    TomArcher
    Participant

    I should add that when I move the following out of the jqxLayout div, the grid works, but of course, the layout is gone:

    
    <div id='jqxgrid' data-container="SolutionExplorerPanel">This is no working</div>
    
    Problem with Grid and Layout #84912

    Dimitar
    Participant

    Hello TomArcher,

    Widgets inside jqxLayout/jqxDockingLayout have to be initialized inside the panel initContent callback function. Here is an updated version of your code that works as expected:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <style type="text/css">
            html, body {
                height: 100%;
            }
        </style>
        <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.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlayout.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdockinglayout.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // the 'layout' JSON array defines the internal structure of the layout
                var layout = [{
                    type: 'layoutGroup',
                    orientation: 'horizontal',
                    items: [
                    {
                        type: 'tabbedGroup',
                        width: '25%',
                        items: [{
                            type: 'layoutPanel',
                            title: 'Account List',
                            contentContainer: 'SolutionExplorerPanel',
                            initContent: function () {
                                // Set up grid
                                var data = '[{ "AccountName": "Checking Account #1", "AccountBalance": "$4,096.42"}, { "AccountName": "Savings Account #2", "AccountBalance": "$8,192.00"}]';
    
                                // prepare the data
                                var source =
                                {
                                    datatype: "json",
                                    datafields: [
                                        { name: 'AccountName', type: 'string' },
                                        { name: 'AccountBalance', type: 'string' }
                                    ],
                                    localdata: data,
                                    updaterow: function (rowid, rowdata, commit) {
                                        commit(true);
                                    }
                                };
    
                                var dataAdapter = new $.jqx.dataAdapter(source);
    
                                $("#jqxgrid").jqxGrid(
                                {
                                    width: '100%',
                                    height: '100%',
                                    source: dataAdapter,
                                    columnsresize: true,
                                    columns: [
                                        { text: 'Account', datafield: 'AccountName', width: 250 },
                                        { text: 'Balance', datafield: 'AccountBalance', width: 150 }
                                    ]
                                });
    
                                $('#jqxgrid').on('rowselect', function (event) {
                                    alert('hi')
                                    // event arguments.
                                    var args = event.args;
                                    // selected row.
                                    var row = event.args.row;
                                    // update inputs.
                                    $("#AccountName").val(row.AccountName);
                                    $("#AccountBalance").val(row.AccountBalance);
                                });
                            }
                        }, {
                            type: 'layoutPanel',
                            title: 'Properties',
                            contentContainer: 'PropertiesPanel'
                        }]
                    },
                    {
                        type: 'layoutGroup',
                        orientation: 'vertical',
                        width: '75%',
                        items: [{
                            type: 'documentGroup',
                            height: '50%',
                            minHeight: '25%',
                            items: [{
                                type: 'documentPanel',
                                title: 'Register',
                                contentContainer: 'Document1Panel',
                                initContent: function () {
                                    loadPage('main.js');
                                }
                            }, {
                                type: 'documentPanel',
                                title: 'Document 2',
                                contentContainer: 'Document2Panel',
                                initContent: function () {
                                    $("#AccountName").jqxInput({ height: 23 });
                                    $("#AccountBalance").jqxInput({ height: 23 });
    
                                    $("#Save").jqxButton({ width: 70, height: 23 });
    
                                    $("#Save").click(function () {
                                        var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
                                        var rowid = $("#jqxgrid").jqxGrid('getrowid', row);
                                        var data = { AccountName: $("#AccountName").val(), AccountBalance: $("#AccountBalance").val() };
                                        $("#jqxgrid").jqxGrid('updaterow', rowid, data);
                                    });
                                }
                            }]
                        }, {
                            type: 'tabbedGroup',
                            height: '50%',
                            pinnedHeight: '10%',
                            items: [{
                                type: 'layoutPanel',
                                title: 'Error List',
                                contentContainer: 'ErrorListPanel'
                            }, {
                                type: 'layoutPanel',
                                title: 'Output',
                                contentContainer: 'OutputPanel',
                                selected: true
                            }]
                        }]
                    }
                    ]
                }];
    
                $('#jqxLayout').jqxLayout({ width: '100%', height: '100%', layout: layout });
    
            });
    
            var loadPage = function (url) {
                $.get(url, function (data) {
                    $('#Test').html('<div style="overflow: auto; width: 100%; height: 100%;">' + data + '</div>');
                });
            }
    
        </script>
    </head>
    <body>
        <div id="jqxLayout">
            <!--The panel content divs can have a flat structure-->
            <!--documentGroup-->
            <div data-container="Document1Panel">
                <div id="Test">
                    <img src='jqwidgets/images/ajax-loader.gif' />
                </div>
            </div>
            <div id="ContentPanel" data-container="Document2Panel">
                <form id="Form">
                    <table style="margin-top: 20px; width: 100%;">
                        <tr><td style="text-align:right;">Company Name:</td><td style="text-align:left;"><input type="text" id="AccountName" /></td></tr>
                        <tr><td style="text-align:right;">Contact Name:</td><td style="text-align:left;"><input type="text" id="AccountBalance" /></td></tr>
                        <tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr>
                    </table>
                </form>
            </div>
            <!--bottom tabbedGroup-->
            <div data-container="ErrorListPanel">
                List of errors
            </div>
            <div data-container="OutputPanel">
                Output
            </div>
            <!--right tabbedGroup-->
            <div data-container="SolutionExplorerPanel">
                <div id='jqxgrid'></div>
            </div>
            <div data-container="PropertiesPanel">
                List of properties
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Problem with Grid and Layout #84923

    TomArcher
    Participant

    Works perfect. Thanks!

    Problem with Grid and Layout #87971

    bigman73
    Participant

    I have a similar problem but the jqxGrid is placed (with other jqxGrid controls) inside a div which in inside another container (but not from jqxwidgets).
    Once I scroll down the top level container the jqxGrid selections get corrupted – they take into account the offset of the vertical scroll position of the container, which is incorrect, and the hover proves it. The selected row is above the actual mouse position, depending on the container’s vertical scroll bar position.

    Please advise.

    Problem with Grid and Layout #87982

    Dimitar
    Participant

    Hello bigman73,

    We are not sure why this issue occurs but it might have something to do with the third-party container you are using. You can try positioning your grids in our widget jqxPanel, as shown in the following example: https://www.jseditor.io/?key=jqxgrid-inside-jqxpanel.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.