Grid keyboard navigation stops working when showfilterrow, singlecell used - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: dataadapter, filter, filteritems, filtertype, grid, jqxgrid, selectionmode, singlecell, singlerow

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

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

Author

Grid keyboard navigation stops working when showfilterrow, singlecell used Posts

March 20, 2015 at 9:35 am Grid keyboard navigation stops working when showfilterrow, singlecell used #68886

Participant

Hi!
I’m trying jqxgrid in my project.
The problem is when I use showfilterrow option and ‘singlecell’ selection mode and apply some filter to the table the keyboard navigation stops working and then when I clear filter navigation comes back again.
When I use ‘singlerow’ selection mode everything is ok.
Is it bug or right behavior?

Regards
Turchaninov Maxim.

var url = “data.json”;

var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’, type: ‘int’ },
{ name: ‘id_ext’, type: ‘string’ },
{ name: ‘id_ext_type’, type: ‘int’ },
{ name: ‘state’, type: ‘int’ },
{ name: ‘name’, type: ‘string’ },
],
id: ‘id’,
url: url,
filter: function () {
// update the grid and send a request to the server.
//$(“#grid”).jqxGrid(‘updatebounddata’, ‘filter’);
}

};
var dataAdapter = new $.jqx.dataAdapter(source);
$(‘#grid’).jqxGrid(
{
width: ‘100%’,
height:’100%’,
source: dataAdapter,
columnsresize: true,
pageable: true,
selectionmode: ‘singlecell’,
altrows: true,
showfilterrow: true,
filterable: true,
theme:’arctic’,

columns: [
{ text: ‘Num’, datafield: ‘id’, width: 250 },
{ text: ‘type’, datafield: ‘id_ext’, width: 250 },
{ text: ‘type1’, datafield: ‘id_ext_type’, width: 180 },
{ text: ‘state’, datafield: ‘state’, width: 120 ,filtertype: ‘list’,filteritems: [‘1’, ‘2’, ‘3’]},
{ text: ‘name’, datafield: ‘name’, minwidth: 120 }
]
});

March 20, 2015 at 11:31 am Grid keyboard navigation stops working when showfilterrow, singlecell used #68897

Nadezhda

Participant

Hello Turchaninov Maxim,

Please, find the following example where the Grid keyboard navigation works when selection mode is ‘singlerow’ or ‘singlecell’. I would suggest you to use the most recent version of jQWidgets which is 3.7.1.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></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="../../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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/orders.xml";

                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                    ],
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:OrderID',
                    url: url
                };

                var dataAdapter = new $.jqx.dataAdapter(source);

                // create jqxgrid.
                $("#jqxgrid").jqxGrid(
                {                  
                    width: '100%',
                    height:'100%',
                    source: dataAdapter,
                    columnsresize: true,
                    pageable: true,
                    selectionmode: 'singlecell',
                    altrows: true,
                    editable: true,
                    showfilterrow: true,
                    filterable: true,
                    ready: function()
                    {
                        $("#jqxgrid").jqxGrid('selectcell', 0, 'ShipName');
                        // focus jqxgrid.
                        $("#jqxgrid").jqxGrid('focus');
                    },
                    columns: [
                      { text: 'Ship Name', datafield: 'ShipName', filtertype: 'list', filteritems: ['Hanari Carnes', 'Chop-suey Chinese', 'Toms Spezialitäten'], width: 250, align: 'left', cellsalign: 'left' },
                      { text: 'Freight', datafield: 'Freight', filtertype: 'list', width: 80, align: 'right', cellsformat: 'F2', cellsalign: 'right' },
                      { text: 'Ship Address', datafield: 'ShipAddress', filtertype: 'list', align: 'left', width: 350, cellsalign: 'left' },
                      { text: 'Ship City', datafield: 'ShipCity', filtertype: 'list', width: 100, align: 'left', cellsalign: 'left' },
                      { text: 'Ship Country', datafield: 'ShipCountry', filtertype: 'list', align: 'left', cellsalign: 'left' }
                    ]
                });            
            });
        </script>
        <div id='jqxWidget'>
            <div id='jqxgrid'>
            </div>
            <div style="font-family: Verdana; font-size: 12px; width: 670px;">
                <ul>
                    <li><b>Left Arrow</b> key is pressed - Selects the left cell, when the Grid is not in edit
                                                                            mode. Otherwise, the key stroke is handled by the editor.</li>
                    <li><b>Right Arrow</b> key is pressed - Selects the right cell, when the Grid is not in edit
                                                                            mode. Otherwise, the key stroke is handled by the editor.</li>
                    <li><b>Up Arrow</b> key is pressed - Selects the cell above, when the Grid is not in edit mode.
                                                                            Otherwise, the key stroke is handled by the editor.</li>
                    <li><b>Down Arrow</b> key is pressed - Selects the cell below, when the Grid is not in edit
                                                                            mode. Otherwise, the key stroke is handled by the editor.</li>
                    <li><b>Page Up/Down</b> is pressed - Navigate Up or Down with one page, when the Grid is not
                                                                            in edit mode. Otherwise, the key stroke is handled by the editor.</li>
                    <li><b>Home/End</b> is pressed - Navigate to the first or last row, when the Grid is not in
                                                                            edit mode. Otherwise, the key stroke is handled by the editor.</li>
                    <li><b>Enter</b> key is pressed - Moves one cell down in "multiplecellsadvanced" selection mode. If the cell is in edit mode, saves the new value and moves one cell down. In the other selection modes, shows the selected cell's editor. If the cell is in edit
                                                                            mode, hides the cell's editor and saves the new value. The editor's value is equal
                                                                            to the cell's value.</li>
                    <li><b>Esc</b> key is pressed - Hides the cell's editor and cancels the changes.</li>
                    <li><b>Tab</b> key is pressed - Selects the right cell. If the Grid is in edit mode, saves
                                                                            the edit cell's value, closes its editor, selects the right cell and opens its editor.</li>
                    <li><b>Shift+Tab</b> keys are pressed - Selects the left cell. If the Grid is in edit mode,
                                                                            saves the edit cell's value, closes its editor, selects the left cell and opens
                                                                            its editor.</li>
                    <li><b>F2</b> key is pressed - shows the selected cell's editor when the Grid is in edit mode.</li>
                    <li><b>Space</b> key is pressed - Toggles the checkbox editor's check state when the selected
                                                                            cell's column is a checkbox column and the Grid is editable.</li>
                    <li><b>Shift+Arrow</b> key extends the selection.</li>
                    <li><b>Shift</b> extends the selection when the user clicks on a cell or row..</li>
                    <li><b>Ctrl</b> key is pressed - in 'multiplecellsextended, multiplecellsadvanced and multiplerowsextended' selection
                                                                            mode, extends the selection when the user clicks on a cell or row. </li>
                    <li><b>Ctrl+Arrow</b> key - moves to an edge. </li>
                    <li><b>Ctrl+C</b> Copy. </li>
                    <li><b>Ctrl+X</b> Cut. </li>
                    <li><b>Ctrl+V</b> Paste. </li>
                    <li><b>Page Down</b> - Moves one screen down</li>
                    <li><b>Page Up</b> - Moves one screen up</li>
                    <li><b>Home</b> - Moves to the beginning</li>
                    <li><b>End</b> - Moves to the end</li>
                    <li>Typing in a cell when the Grid is "editable" will put the cell in edit mode.</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

March 22, 2015 at 3:04 pm Grid keyboard navigation stops working when showfilterrow, singlecell used #68946

turchaninov

Participant

I’ve investigated the problem.
The problem appears when ‘filter’ function specified on dataAdapter. Content of the function actually doesn’t metter.
filter: function () {
// update the grid and send a request to the server.
// $(“#grid”).jqxGrid(‘updatebounddata’, ‘filter’);
}

I’ve changed my configuration to
$(“#grid”).on(“filter”, function (event)
{
$(“#grid”).jqxGrid(‘updatebounddata’, ‘filter’);
});

and removed filter option on dataSource

Regards
Turchaninov Maxim

March 22, 2015 at 11:13 pm Grid keyboard navigation stops working when showfilterrow, singlecell used #68949

turchaninov

Participant

Hi
My previous post was not quite right.
My walkaround doesn’t work right.
I have to specify filter option on dataAdapter but it breakes right behaviour jqxGrid in cellSelection mode.
Without this option everything is working right.

Could you help me to figure out this problem?

Regards
Turchaninov Maxim

March 23, 2015 at 6:47 am Grid keyboard navigation stops working when showfilterrow, singlecell used #68957

Peter Stoev

Keymaster

Hi turchaninov,

The adapter’s filter option should be used only when the Grid is in Virtual Mode. Otherwise, you can overwrite the built-in filtering so basically setting the adapter’s filter is wrong approach.

Regards,
Peter Stoev

March 23, 2015 at 3:15 pm Grid keyboard navigation stops working when showfilterrow, singlecell used #69013

turchaninov

Participant

Hi
I’m using server side filtering.
Here is your instruction
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-filtering.htm
This example uses filter option on dataAdapter

Does your answer means I can’t use server side filtering. If it doesn’t how server side filtering can be released without using filter option on dataDadapter in cellselection mode?
I don’t want to send very log record set to the web browser. The only way to do this to use server side filtering & paging

Regards,
Turchaninov Maxim

Author

Posts

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

You must be logged in to reply to this topic.