Grid focus

[sdalbyMember]

I have found this piece of code from your answer to another user regarding focus:

        $("#jqxComponentLookupWindow").jqxWindow('open');
        setTimeout(function () {
            $("#jqxComponentList").focus();
        }, 100);

(opening popup window is my own addition) and it works perfectly for a jqxListbox. Now I want to do exactly the same for a jqxGrid but I cannot make it work:

    $("#RevisionsButton").click(function () {
        $("#jqxListRevisionsWindow").jqxWindow('open');
        setTimeout(function () {
            $("#jqxListRevisionsGrid").focus();
        }, 100);
    });

I fear that the difference is that the grid is completely invented by jqWidgets and that jqxListbox is based on a normal listbox.

Let me emphasize that my definition of focus includes that keyboard navigation is active within the grid.

Can you give me any pointers to make this work?

Thanks in advance

[Peter StoevKeymaster]

Hi sdalby,

Actually jqxListBox is built from scratch, too and it is not based on the standard listbox. The keyboard navigation will be activated in the Grid when the use clicks a cell on the Grid. There’s currently no other way. We’ll consider providing focus method in the future versions. I will create a work item about that missing functionality.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi sdalby,

I’ve been able to find a work around:

You can do this:

  // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                altrows: true,
                sortable: true,
                selectionmode: 'multiplecellsextended',
                ready: function () {
                    $("#jqxgrid").jqxGrid('selectcell', 0, 'firstname');
                    $("#jqxgrid").jqxGrid('wrapper').focus();
                },
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', width: 90 },
                  { text: 'Product', datafield: 'productname', width: 177 },
                  { text: 'Available', datafield: 'available', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sdalbyMember]

I can make mine select the first row but I cannot activate the keyboard (I have also tried with multiplecellsextended)

$("#jqxListRevisionsWindow").jqxWindow({ height: 480, width: 730, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#lrCancelButton") });
    // make Enter activate Ok.click
    $("#jqxListRevisionsWindow").children().keyup(function (event) {
        if (event.keyCode == 13) {
            $("#lrOkButton").click();
        }
    });
    $("#jqxListRevisionsGrid").jqxGrid(
    {
        width: 580,
        height: 400,
        source: createRevisionListDataAdapter(),
        theme: theme,
        columnsresize: true,
        ready: function () {
            $("#jqxListRevisionsGrid").jqxGrid('selectrow', 0);
            $("#jqxListRevisionsGrid").jqxGrid('wrapper').focus();
        },
        columns: [
            { text: 'User', datafield: 'User', width: 100 },
            { text: 'Saved ', datafield: 'DateTime', width: 135 },
            { text: 'Description', datafield: 'Description', width: 325 }
        ]
    });
    $("#lrOkButton").click(function () {
        $("#jqxListRevisionsWindow").jqxWindow('close');
    });

[Peter StoevKeymaster]

Hi sdalby,

If my workaround does not work in your scenario, then could you send me a full sample(javascript+html) which demonstrates the focus issue?

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sdalbyMember]

Great, I have added it below. This does not allow me to use the keyboard in the grid when the window opens either in IE9 or FF15.

I am really glad for your focus on this. I think it makes all the difference if user can navigate by keyboard alone. If user has to click with the mouse in order to activate the grid, it is not that important if this is a jqxGrid or ASP.NET GridView in my opinion.

I have managed to get the TAB key to move between controls and Enter to close the window (you guys provides an excellent Esc handling), so we are so close

Thanks in advance
/Søren Dalby

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="../scripts/jquery-1.8.0.min.js"></script>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <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/jqxpanel.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtree.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.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
    <button id="jqxTest">Click me</button>
    <div id='jqxListRevisionsWindow'>
        <div>
            Revisions
        </div>
        <div style="margin: 20px">
            <div id='jqxListRevisionsGrid' style="float: left"></div>
            <div style="margin-left: 605px">
                <input type="button" value="Restore..." id="lrRestoreButton" style="width: 75px; margin-bottom: 5px" />
                <input type="button" value="Close" id="lrCloseButton" style="width: 75px" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $("#jqxTest").click(function () {
            $("#jqxListRevisionsWindow").jqxWindow('open');
        });
        $(document).ready(function () {
            // define popup window for selecting component types
            $("#jqxListRevisionsWindow").jqxWindow({ height: 480, width: 730, theme: 'classic', isModal: true, autoOpen: false });
            var data = [
                { User: 'SDA', DateTime: 'Today', Description: 'My Description' },
                { User: 'PST', DateTime: 'Tomorrow', Description: 'His Description' }
            ];
            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'User' },
                        { name: 'Description' },
                        { name: 'DateTime' }
                    ],
                    localdata: data
                };
            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxListRevisionsGrid").jqxGrid(
                {
                    width: 580,
                    height: 400,
                    source: adapter,
                    theme: 'classic',
                    columnsresize: true,
                    columns: [
                        { text: 'User', datafield: 'User', width: 100 },
                        { text: 'Saved ', datafield: 'DateTime', width: 135 },
                        { text: 'Description', datafield: 'Description', width: 325 }
                    ],
                    ready: function () {
                        $("#jqxListRevisionsGrid").jqxGrid('selectrow', 0);
                        $("#jqxListRevisionsGrid").jqxGrid('wrapper').focus();
                    },
                });
        });
    </script>
</body>
</html>

[Peter StoevKeymaster]

Hi sdalby,

I’ve updated your code and here’s the modified version:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="../../scripts/jquery-1.8.0.min.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
    <button id="jqxTest">
        Click me</button>
    <div id='jqxListRevisionsWindow'>
        <div>
            Revisions
        </div>
        <div style="margin: 20px">
            <div id='jqxListRevisionsGrid' style="float: left">
            </div>
            <div style="margin-left: 605px">
                <input type="button" value="Restore..." id="lrRestoreButton" style="width: 75px;
                    margin-bottom: 5px" />
                <input type="button" value="Close" id="lrCloseButton" style="width: 75px" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
          $(document).ready(function () {
            $("#jqxTest").click(function () {
                $("#jqxListRevisionsWindow").jqxWindow('open');
            });
            var initGrid = function()
            {    
                var data = [
                    { User: 'SDA', DateTime: 'Today', Description: 'My Description' },
                    { User: 'PST', DateTime: 'Tomorrow', Description: 'His Description' }
                ];
                var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'User' },
                            { name: 'Description' },
                            { name: 'DateTime' }
                        ],
                        localdata: data
                    };
                var adapter = new $.jqx.dataAdapter(source);
                $("#jqxListRevisionsGrid").jqxGrid(
                    {
                        width: 580,
                        height: 400,
                        source: adapter,
                        theme: 'classic',
                        columnsresize: true,
                        columns: [
                            { text: 'User', datafield: 'User', width: 100 },
                            { text: 'Saved ', datafield: 'DateTime', width: 135 },
                            { text: 'Description', datafield: 'Description', width: 325 }
                        ],
                        ready: function () {
                            $("#jqxListRevisionsGrid").jqxGrid('selectrow', 0);
                            $("#jqxListRevisionsGrid").jqxGrid({focused: true});
                            $("#jqxListRevisionsGrid").jqxGrid('wrapper').focus();
                        },
                    });
                };
            // define popup window for selecting component types
            $("#jqxListRevisionsWindow").jqxWindow({ height: 480, width: 730, theme: 'classic', isModal: true, autoOpen: false, initContent: initGrid });  
        });
    </script>
</body>
</html>

Hope this helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sdalbyMember]

Actually this only gets me a blak window (no grid) in both FF and IE

I have pasted your code and just changed the reference to jqwidgets directory

[Peter StoevKeymaster]

May be that’s because in your sample the path is ../ and in my is ../../. The sample is also implemented with jQWidgets 2.4. If you would like, I can post it online, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sdalbyMember]

It is simply where jqwidgets is placed in my project. I too use jqx240 and jquery 1.8.

Please post it, I would love to see it work, and I know that at least one more of your customers are very interested in this as well.

Allow me to suggest that you write a blog on jqx Widgets and programmatically setting (keyboard) focus.

Thank you so much for your help so far

/Søren

[Peter StoevKeymaster]

Hi sdalby,

Here’s the link to the Online Sample: gridfocus.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sdalbyMember]

I get following message when I click on the link above:

Apologies, but the page you requested could not be found. Perhaps searching will help.

[Peter StoevKeymaster]

The link is updated. Sorry for the inconvenience.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi sdalby,

With the release of jQWidgets 2.4.1, you can now use the Grid’s focus method to set the keyboard focus to the Grid. The focus method does the same as in the workaround I suggested you, but now is built-in the Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[germanr52Member]

Hi Mr. Stoev,

I have a grid that implement a search textbox, when the user press enter put the focus in grid. This implementation works fine in Google Chrome and FireFox but in last verson of Internet Explorer version 9 only works when the pointer mouse is inside the grid area. Can you suggest me some workaround?

Even this situation is visible in your on line sample in
Sample

I hope its help to make better product.

I hope some reply from you,

Thank you,

Germán Castaños

[Author]

Posts