jQWidgets Forums

Tagged: grid, jqxgrid, jqxTabs, keyboardnavigation, Tabs

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 8 years, 3 months ago.

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

Author

JqxGrid inside jqxTabs navigation problem Posts

February 7, 2017 at 7:12 am JqxGrid inside jqxTabs navigation problem #91332

Participant

Hello

I have JqxGrid inside JqxTabs. I want to navigate to next cell within JqxGrid when i press right arrow key and previous cell when i press left arrow key. But when i press right arrow key i am navigating to next tab. So i have added keyboardNavigation: false to jqxTabs. But now arrow keys doesn’t do any thing in the jqxGrid also.

Any help would be appreciated!! Thanks.

February 7, 2017 at 7:55 am JqxGrid inside jqxTabs navigation problem #91340

Peter Stoev

Keymaster

Hi kantariyaraj,

This cannot be reproduced with jQWidgets ver.4.5.0.

Example:

<!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/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%',
                    selectionmode: 'multiplecellsadvanced',
                    source: dataAdapter,
                    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,
                    selectionmode: 'multiplecellsadvanced',
                    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>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 7, 2017 at 9:37 am JqxGrid inside jqxTabs navigation problem #91347

kantariyaraj

Participant

Hi Peter Stoev,

Thanks for the reply. I have upgraded the version of jqWidget but it is still not working as intended.

February 7, 2017 at 10:24 am JqxGrid inside jqxTabs navigation problem #91351

Peter Stoev

Keymaster

Hi kantariyaraj,

Unfortunately, we cannot reproduce erroneous behavior and according to our tests it works as expected with the current version of jQWidgets. You can navigate through tabs when tabs is on focus, you can navigate through Grid cells when Grid is on focus. This is the intended behavior. When keyboardnavigation is false and tabs is on focus, you can’t navigate the tabs, when Grid is on focus you can still navigate through the cells. This is tested in IE, Chrome and Firefox browsers before writing this post i.e we think that this Grid behavior is correct.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 7, 2017 at 10:46 am JqxGrid inside jqxTabs navigation problem #91355

kantariyaraj

Participant

Hi Peter Stoev,

I have ran the example you have provided and it is working fine. There is one difference in your code and mine is i have provided selectionmode: ‘singlerow’, when i changed selectionmode in your code code from multiplecellsadvanced to singlerow it is producing issue.

So it might be the issue with selectionmode: ‘singlerow’ i think. Can you confirm?

February 7, 2017 at 2:10 pm JqxGrid inside jqxTabs navigation problem #91357

Peter Stoev

Keymaster

Hi kantariyaraj,

When selectionmode is ‘singlerow’, the Grid does not handle the Left/Right arrow keys so the Tabs handles them as events in javascript bubble up to the DOM’s document as you might know.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.