jQuery UI Widgets Forums Grid Column menu – problem with widgets

This topic contains 2 replies, has 2 voices, and was last updated by  DmitriyG 9 years, 6 months ago.

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

  • DmitriyG
    Participant

    There is a problem with a few jqxGrid in jqxTabs.
    I will try to briefly explain the problem:
    1. After page is loaded, open column menu of the grid in first tab.
    2. Then switch to the second tab and open the menu there.
    3. Go back to the first tab and open the menu column.
    All widgets from column menu of the grid in first tab is destroyed from html sctructure.

    What can i do in this case to solve this problem?
    There is no such problem in jQWidgets 3.8.0. It’s come with 3.8.1 update.
    The code below shows the problem:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This demo shows how to display jqxGrid in jqxTabs.
        </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var initGrid = function () {
                    var source =
                   {
                       datatype: "csv",
                       datafields: [
                            { name: 'Date' },
                            { name: 'S&P 500' },
                            { name: 'NASDAQ' }
                        ],
                       url: '../sampledata/nasdaq_vs_sp500.txt'
                   };
    
                    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    
                    $("#jqxGrid").jqxGrid(
                    {
                        width: '100%',
                        height: '100%',
                        source: dataAdapter,
                        filterable: true,
                        sortable: true,
                        columns: [
                            { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
                            { text: 'S&P 500', datafield: 'S&P 500', width: 150 },
                            { text: 'NASDAQ', datafield: 'NASDAQ' }
                        ]
                    });
                }
    
                var initGrid2 = function () {
                    var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
    
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'CompanyName', type: 'string' },
                            { name: 'ContactName', type: 'string' },
                            { name: 'ContactTitle', type: 'string' },
                            { name: 'Address', type: 'string' },
                            { name: 'City', type: 'string' },
                            { name: 'Country', type: 'string' }
                        ],
                        localdata: data
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
    
                    $("#jqxGrid2").jqxGrid(
                    {
                        width: '100%',
                        height: '100%',
                        source: dataAdapter,
                        filterable: true,
                        sortable: true,
                        columns: [
                            { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                            { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                            { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                            { text: 'City', datafield: 'City', width: 120 },
                            { text: 'Country', datafield: 'Country' }
                        ]
                    });
                }
    
                // init widgets.
                var initWidgets = function (tab) {
                    switch (tab) {
                        case 0:
                            initGrid();
                            break;
                        case 1:
                            initGrid2();
                            break;
                    }
                }
    
                $('#jqxTabs').jqxTabs({ width: 600, height: 560,  initTabContent: initWidgets });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">
                    Grid 1
                </li>
                <li>
                    Grid 2
                </li>
            </ul>
            <div style="overflow: hidden;">
                <div style="border:none;" id="jqxGrid">
                </div>
            </div>
            <div style="overflow: hidden;">
                <div style="border:none;" id="jqxGrid2"></div>
            </div>
        </div>
    </body>
    </html>
    
    Column menu – problem with widgets #73334

    ivailo
    Participant

    Hi DmitriyG,

    We tested your code with version 3.8.1 and it looks ok.

    Here is the demo.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Column menu – problem with widgets #74258

    DmitriyG
    Participant

    Yes, I see that the code on your site works fine. BUT when the code is run from the html-file, the problem continues to occur.

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

You must be logged in to reply to this topic.