I'm having problems with keyboard navigation using a jqxgrid with columns ordering and grouping activated - jqxgrid

I’m using jqxgrid, it is very powerfull, niceeeee grid,
But when using options "sortable: true" and "groupable: true" then key up and key down keyboard navigation doesn’t work correclty after make an ordering of any column.
When the grid is firts rendered the keyboard navigation works just fine, but if I activate a column ordering ( no grouping just ordering ) then the keyboard navigation don’t work as it should, I can not see the selected row anymore, it kind of jump randomly.
Here is a test case at JSfidle.net
<http://jsfiddle.net/zemorango/z7cdkrfq/1/">
zemorango/z7cdkrfq/1/
Thanks in advance
jose

Related

ag-grid in a Material Tab

I have an app that has two ag-grids in two tabs using Angular Material tabs. When the user switches between tabs the items in one of the columns get rendered outside of the grid (but inside the tab body). The difference in the column is that it uses a custom cell renderer. It only effects the grid in the first tab because that is the grid that uses the cell renderer. So you have to switch to the second tab then back to the first tab to see it.
Stackblitz example here
It's hard to see because the column elements get rendered at the bottom of the tab window, you can barely see them poking out at the bottom of the grid. Also, if you page to the next page of the grid they are rendered properly, even on the first page when you page back.
I've tried executing gridApi.refreshCells() after the tab has switched but it doesn't do anything.
The fix turned out to be simple and I hope this is the best method for doing so. I simply execute the grid API's redrawRows method.

Toggling whether rows are displayed, subject to filter

First off, thanks mottie for doing so much in terms of answering questions and providing demos, it's been great. I have a table with drop-down filters using the widget. There is an option for one of the drop-down selectors, called "Deprecated". I am trying to use a button external to the table to toggle whether or not any rows with this "Deprecated" value are being displayed. When these rows are being shown, I want them to behave like all other table rows.
I couldn't find a straightforward way to do this, after approaching it at several different angles. Any help would be much appreciated!

p:selectOneMenu doesn't receive focus on tab key navigation

I have a form with <p:inputText> and <p:selectOneMenu> components next to each other. When the focus is on the input text and I press the tab key in order to navigate to select one menu by keyboard, then the focus is lost. I don't see which component is focused.
How can I get the focus on the select one menu when I tab into it?
You need to use the tabindex property of <p:inputText> and <p:selectOneMenu>, as explained in the documentation.
Using the tabindex property makes it possible to navigate between <p:inputText> and <p:selectOneMenu>. What worked for me was to see set the tabindex in <p:inputText> to n and n+1 in <p:selectOneMenu>. I used n = 90.

jquery ui multiselect plugin does not let me drag drop consistently

I am using jQuery ui.multiselect.js plugin to order columns in my jqGrid. I have noticed that there are some inconsistencies in the way this plugin behaves. It lets me drag-n-drop from right column to left but not left to right column. Has anyone got a working solution to this problem.
I don't think it is exactly a problem, it is the way the plugin is supposed to work if you set the option sortable: true which is the default:
you can drag column from right list to left to choose which ones you'd like to show in the grid
you can re-order the column on the left list to change the order they appear in the grid
Setting the option sortable to false cancels both these behaviors, you cannot drag to add and sort columns order anymore.
ui.multiselect.js has been updated since this post, and it now allows you to drag from left to right as well. It also allows you to load data from an external source now. You can check it out here.

jQuery slideToggle() applies display:block while sliding

I have a page that's like a discussion where you can make posts and reply to those posts. When there are more than 2 replies, I show the two most recent ones and hide the rest by default. There's a button that will let you expand/collapse the extra replies that uses jQuery's slideToggle function. It's operating on an unordered list of tables, where each table contains the comment along with the user's name and some other info.
Here's the problem: While the tables are actually sliding up or down, the first table in the list looks like its width has been set to auto, so it shrinks. Once it's done sliding, the formatting looks fine; it's just during the actual sliding that this happens. I'm assuming it's being set to 'display:block' or something during the slide but I don't know that for sure.
Is there a way to control what the display type is during the animation?
//this is what happens when you click the 'View all X replies' or 'Hide replies' button
$(".expandOverflow").click(function()
{
$(".overflowlist" + overflowListTarget).slideToggle(16000/*, function(){$(this).css('display', 'inline');}*/);
});

Resources