Handle KeyBoard Navigation problem.

[ardhendu1508Participant]

Hi,

I have been using Jqwidgets for all most 1 year and have been implementing fixes for many things from my end to get the work done.
But at this stage i cannot customize it anymore because the code is getting very dirty.
Recently I have been trying to implement keyboard navigation for tab key wherein once I reach the last cell of the row I want that the next row’s first element be focused and if I am in the edit mode then the edit mode be continued to the next row’s as well until or unless I explicitly end the editing by using Esc key.

For the above issue I have got a work around but the problem with it is that the navigation is not working properly and more over the editor’s of the grid are also getting affected because of the same.

Below I am listing out the scenarios:

1.Currently you have implemented tab key navigation row-wise i.e. once you reach the last cell of the row the tab key navigation stops .
Problem: I have noticed a issue in this. The tab key navigation is working prefect and smoothly in your example but if I do some minor swapping of columns in the grid it will stop working.
Lets consider the example of Cell Editing under jqxGrid>cellediting

If I change the existing code

$("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  {
                      text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                  validation: function (cell, value) {
                          if (value == "")
                             return true;
                          var year = value.getFullYear();
                          if (year >= 2014) {
                              return { result: false, message: "Ship Date should be before 1/1/2014" };
                          }
                          return true;
                      }
                  },
                  {
                      text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });

to the below code then I while navigating through the cell of the row if I reach checkbox then I have two tab twice to invoke the editor of the grid.

$("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                  {
                      text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                  validation: function (cell, value) {
                          if (value == "")
                             return true;
                          var year = value.getFullYear();
                          if (year >= 2014) {
                              return { result: false, message: "Ship Date should be before 1/1/2014" };
                          }
                          return true;
                      }
                  },
                  {
                      text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });

The problem in the above code is that while navigating if the pre and post editor’s of the checkbox are text type then it doesn’t work for tab key and shift+tab key navigation but if it is any other field then the tab works but not shift tab.

2.For writing our custom keyboardnavigation you have provided a new attribute in the jqxGRid i.e. handlekeyboardnavigation.
But if we are implementing it then it is getting triggered on the other field’s as well.
For example I have 3 Grid’s in a page . And I am currently navigating through the field of the first grid then the code is getting invoked for the second grid as well which should not happen ideally.
Even the tab key navigation is also getting triggered on the form field’s as well which are defined within the page.

3.Grid validation are also getting effected because of handleKeyBoard navigation.
4.How to handle keyboard navigation if we have more than one grid in a page.

So the prime focus is on the handleKeyBoard Navigation attribute if you can get me fix for the same considering the above issue then I think the JqxGrid is going to run smoothly.

Kindly revert me back on the same as I am stuck very badly because of this part of customization.

Hoping for a positive response soon.

Regards,
Ardhendu Shekhar Singh.

[Peter StoevKeymaster]

Hi Ardhendu Shekhar Singh,

The custom keyboard navigation works in the following way: The callback function is called and you can choose to handle or not to handle the key. When you want to handle it, return true as a function result, otherwise return false.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ardhendu1508Participant]

Hi Peter,

First of all thank you for replying to my query.
But I have got a problem with what you have mentioned.In my case I am having 4-5 grid. So in that case how I am supposed to manage the same.

[Peter StoevKeymaster]

Hi ardhendu1508,

The method is specific for a Grid instance so it does not actually matter whether you have 1 or 10 Grids on your page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ardhendu1508Participant]

Hi Peter,

What you are saying is right and it should behave in the same manner but its not happening.
If you want I can give you a sample code to reproduce the issue.

[MehdiParticipant]

Hi there,

I have the same problem : there are several control on the page and i enabled handlekeyboardnavigation on grid.
But when i press any key on other controls ,grid handle that!

For example i use enter key on all controls for custom purpose.

Hope to help me.
Thanks

[Peter StoevKeymaster]

Hi Mehdi,

When the Grid’s callback function – “handlekeyboardnavigation” is called, it is your choice as a developer whether to handle or not the pressed Key to perform some custom action associated to the Grid. The function is always called when a key is pressed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[indresh.singhParticipant]

Hi,
In order to fix the issue you have to check that you are on same grid, and to do so see the below code:

var $jqxgrid=$("#jqxgrid");
     $jqxgrid.jqxGrid({
      handlekeyboardnavigation:function(event) {
       if($(event.target).closest($jqxgrid).length){ // check the closest is same as your grid element.
          if(event.keyCode===13){
           // your code here. 
           }
         }
      }

});

Regards
Indresh Singh

[Author]

Posts