I have a HTML Table with 5 rows and 5 columns. Now when the user starts filling in the Data, and wants to navigate from One cell to another, they clicks on tab and the cursor moves horizontally.
Instead of Horizontal, I want to move vertically. Like shown below in Image. This is very tricky as we want to override the basic OS? Browser functionality.
The global attribute tabindex:
The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation.
The value must be an integer (you need values greater than 0; see the linked spec for details).
One way to do it is to use javascript onkeypress events to then give the next cell down focus. onkeypress="if(event.keycode == 8) {document.getElementById('NEXT CELL DOWN').focus()"} In this example 8 is the tab keycode. NEXT CELL DOWN could be hard coded for each cell or you could use an algorithm based on the current cell ID to move it to the next cell ID. For instance if tab is pressed on cell 1 the next cell could be cell1++. Does that make sense?
Related
I got some problem when user pressed the TAB-key. There should be a static way in which the user can jump from one form element to the next.
I know there is a posibility to declare in which order the elements should be selected with TabIndex.
Now I would like to know how does the browser decide which element is focused as next Element after pressing Tab.
EDIT: Does it only walk down the dom or does look it on the position on rendered Website, that's what i want to know.
The process of deciding in which order to skip from one focusable element to the next is fairly complex. The first step is to find out, which elements may gain a tab focus.
There is an article by Maks Nemisj that covers your question in length: “Focus, tabIndex and behavior of browsers”.
I'm trying to add an OR feature in the Continuous Filter Form and as you can see the first combobox shows up which I don't want it to show. Ideally, it should show only when the user wants the second row search option not in the first row filter. I have only OR in the combobox. Thanks for your help and let me know if you need any clarification!
Continuous form controls are all or nothing. If it's visible, it's visible in all rows, if invisible, it's invisible in all rows. There's nothing you can do about that.
You have four options (in order of complexity):
First Option:
The "On Current" event of the form happens when a user moves from one row to another inside the continuous form. you can add an IF statement to that event that disables the first box if the user has moved to the first row.
Second Option:
Have a fixed amount of filter boxes, and don't let the user pass the limit
Third Option:
Have a fixed amount of filter boxes, but make a "forward" and "back" buttons that will change what data the filter boxes link to, effectively making a 'custom' continuous form
Fourth Option:
Dynamically create the textboxes programatically (not recommended)
Set the default 'Visible' property to 'No' and then Reset it to 'Yes' when a second criteria is selected. This will populate the whole column though, just so you know.
How do I create a label that is editable? I am displaying data in a table, and would like to provide in place editing for the displayed data. What CSS styles can I use for it?
Put a text input box there and make its background same as the background of its container and put 0 border on it and use same font style and color as other items in the table
What CSS styles can I use for it ?
It's not really a matter of CSS (unless your questions pertains solely to achieving a particular style).
You can:
Make all table cells contain inputs. This has the (potentially significant) downside that all data will be submitted to the server if the form is POSTed. I wouldn't recommend this approach unless the table is small or you are never fully submitting the whole page.
Change the label to an input on click. When the form is submitted, this value will now be a part of the request.
Change the label to an input in response to an action elsewhere (e.g. focusing the row, clicking an edit button next to the row, etc.)
Set contenteditable="true" on the element. This allows rich formatting but also requires that you keep track of the changes the user has made; they will not be submitted to the server unless they are placed into a form field.
You will likely want/need a snippet of JavaScript to change the label to an input (#2 and #3). You will need JavaScript to get the data to the server with approach #4.
This is kind of out there, but I have no idea what this type of control is even called, so I can't look up any examples on how to implement it.
The control has two text areas side by side with arrows in between them. If a user selects a value or multiple values in one text area and then clicks the arrow that points to the other text area, the selected values will jump over to the other text area and be removed from the initial text area.
What is this called?
There's no one control. Usually it's implemented with 2 <SELECT> list boxes, the arrows have javascript functions attached to take the selected values in the one listbox and move them to the other. Ie. delete from one box and add to the other.
Take a look at this example I found via Google:
http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html
I have a table column that I'm overriding the DefaultCellRenderer to display an icon.
Is there a way I could detect double-clicks on a JTable cell, so I can toggle the corresponding row value's state so that it changes the icon between two values (representing "off" and "on")?
There's two ways:
1) The easier way: Attach a mouse listener to the table, listen for a double click, find the row and column by rowAtPoint/columAtPoint, chenge the value, and call fireCellChanged() in the table model.
2) The harder (but slightly better) way: Have a custom cell editor that upon editing, changes the value, and calls stopCellEditing().
You don't need to do both.
Check this out as well, which does similar but with a button:
http://tips4java.wordpress.com/2009/07/12/table-button-column/
When you perform a single click, the cell rendered is replaced by the cell editor, so provide also a cell editor with same appearance than the rendered, add a mouse listener and capture the double-click and perform any desired action. When you finish invoke stopCellEditing().