jQuery UI Widgets Forums Grid Grid focus

This topic contains 18 replies, has 4 voices, and was last updated by  Peter Stoev 8 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Grid focus Posts
  • Grid focus #7416

    sdalby
    Member

    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

    Grid focus #7417

    Peter Stoev
    Keymaster

    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

    Grid focus #7418

    Peter Stoev
    Keymaster

    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

    Grid focus #7420

    sdalby
    Member

    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');
    });
    Grid focus #7440

    Peter Stoev
    Keymaster

    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

    Grid focus #7448

    sdalby
    Member

    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>
    Grid focus #7475

    Peter Stoev
    Keymaster

    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

    Grid focus #7481

    sdalby
    Member

    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

    Grid focus #7483

    Peter Stoev
    Keymaster

    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

    Grid focus #7500

    sdalby
    Member

    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

    Grid focus #7501

    Peter Stoev
    Keymaster

    Hi sdalby,

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

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Grid focus #7503

    sdalby
    Member

    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.

    Grid focus #7504

    Peter Stoev
    Keymaster

    The link is updated. Sorry for the inconvenience.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Grid focus #7541

    Peter Stoev
    Keymaster

    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

    Grid focus #8535

    germanr52
    Member

    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

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.