For an app a table, that is dynamically populated with data, is important.
How should I do the tab order for tables of data? I searched for guidelines, but could not find a good one so far.
Possibilities I see are:
Only include the table itsef using a 'tabindex=0' attribute in the 'table' tag.
Include the table rows in the tab order with a 'tabindex=0' attribute in the 'tr' tag.
I guess using the arrow keys will allow for detail navigation.
What do you advice?
The table itself and the rows themselves are generally not keyboard focusable because they're not interactive elements. If the row was selectable or expandable, then maybe it could be focusable but it's usually an element in the table row (or more accurately, an element in a the table cell) that is selectable or expandable.
Without more details on the behavior you're trying to achieve, it's hard to give exact advice, but my initial thought is that none of the table elements proper (<table>, <tr>, <td>) should be focusable.
Regarding arrow keys for navigation, that's the pattern for a grid, which is a type of table that has editable cells (similar to a spreadsheet). Again, I don't have enough info on your situation to know if a grid is what you're trying to create.
For screen reader users, they already have a way to navigate to the table and navigate within the table using the screen reader shortcut keys, so don't worry about trying to make things focusable for screen reader users.
Lately I heard another suggestion from an expert.
Generally speaking, all interactive elements should be included in the tab index, such as buttons, form fields and links. If the entire table row can be clicked, this should be in the tab flow by means of a tab index 0.
Related
I'm a FM beginner and would like to know how I can show a searchable dropdown. When I create a product, I need to select a supplier from a large list. I would like to tyoe some characters, from where I find a value in the dropdown. As far as I see now, that isn't possible and the only way to do this is through a popover.
But my question is then, how to show a full table in the popover, from which I can select a value, which is filled in my form.
I would like to tyoe some characters, from where I find a value in the dropdown. As far as I see now, that isn't possible and the only way to do this is through a popover.
Actually, it's the other way around: with a drop-down list you get the option to Auto-complete using value list, which is unavailable with a pop-up menu.
how to show a full table in the popover, from which I can select a value,
You cannot show a full table in a popover. You can show a portal in a popover, and make it show all records in a table by using the x operator when defining the relationship.
Or - preferably, IMHO - use a card window to show all the records you want to select from; this could be the full table or a reduced set as the result of a find.
Selecting products or other related records using popovers always feels slow when you try to search/filter the list of records, with the introduction of card windows doing such searches/selects became a lot faster and easier to implement, if you have 2 different layouts that need to search the same list of records you can use the same card window for both, that was also a nice thing.
Currently I'm working over a birt report with a table to display data. Now, i want to convert the same thing to grid, which provides better viewing and analysing capability. So, is there any easy way (in editing the XML or something) to convert the whole table to grid? Meanwhile, the complete data remains the same.
NB: I havn't yet used a bit with grid, never ever! Also m bit newbie to birt. So pardon me if I'm spiting out anything rubbish.
A table is a different element from a grid. There is not a button to push that will convert one to the other. You would need to add a grid element to your report and set it up like you want it to look.
I seriously doubt you want to do this though. a grid will only display the first record returned, unlike a table that will display all the records returned.
A related, but more reasonable question is how to convert a single-column table to a list or vice-versa.
I often need this table-to-list conversion for optimizing master-detail reports for (our customized version of) the WordEmitter, because this prevents superfluous nested tables in the Word output.
Fortunately, for tables without grouping this is relatively easy by editing the XML:
Change the corresponding opening and closing tag to a tag, remove the elements and the elements (but keep theirs contents).
Apart from that, James' is right: There is no reason to convert a table to a grid item, mainly because a table will display all records (while a grid displays only the first) while the table has all features of a grid (and more, like grouping).
Using extjs 4.1.1
I have a grid with lots of columns >20.
Initially, most of these columns are hidden.
If a user wants to unhide the column, they select the menu on any column, then select the "columns" choice, this expands another dropdown/dropout which shows all of the columns. Those with checkboxes next to them are shown.
My issue is this:
The columns in the dropdown are shown in the order in which they are defined/displayed in the grid. The order in which they are displayed in the grid has been chosen for a good reason( e.g. id as the first column). However, when a user wants to display one of the hidden columns, it is hard for them to find it in the list. This is because the list is sorted in the order the columns are defined. I want to sort the column dropdown/dropout list in alphabetical order, without effecting the order of the columns in the grid.
How can this done?
I think I found the solution to your question.
First of all I don't have the Ext JS 4.1.1. framework on my current PC. So I tried to figure out you problem reading the Ext JS 4.1.3. documentation available on Sencha's site. But I don't think that they have made drastical changes in this part of the framework between the two minor releases so my solution should work in your case too.
I have tried out my solution using JSFiddle. Unfortunately they did not have the 4.1.1. ext-all.css file, so I have linked manually the 4.0.2 file available at Sencha, so the menu is looking a bit missplaced.
The header menu and it's submenus are managed by the Ext.grid.header.Container class. The column submenu is constructed by the getColumnMenu method. The whole menu is purged and reconstructed on every drag and drop or other event which should affect the grid view. As a result it is enough to overwrite this method in order to solve the problem. Because the headercontainer class is too deep in the framework it is hard to extend it, so you have to make use of the Ext.base.override method.
The column submenu's menu items are created from the result of the
items = headerContainer.query('>gridcolumn[hideable]')
query. So you have to first sort alphabetically the result, before creating the menu items. I have added to the class the sortColumns method which does all the sorting stuff.
So here is what I did: link to my solution.
I hope that this is what you were looking for.
For some user interfaces it makes sense to have explicit checkboxes to allow users to select the items in a table. What's the best way to accomplish this using cocoa? In other words, how can I link the state of a checkbox in each row to whether or not the row is currently selected?
Tony,
if I get you correctly, you want to add a leading column to your NSTableView so you can select the corresponding column(s), separate from the usual selection of the tableView.
What is your datasource of the table view? A core data stuff or an array/dictionary? if you do not want to modify your data model, you could set up a distinct array (mutable), to keep track of the selection. bind it to the checkbox column (you would want to add as first column) and keep the array in sync with the number of items in the general datasource for the table that displays your valuable data.
You could also enhance your data model with a column "selected", make it BOOL and bind it to the checkboxes. This would also allow you to easily save the last selection to you database or file, whatever you are using.
Can you update your question with some more information on your data model?
sya - living.
I've got a table one column of which uses an NSPopUpButtonCell. Try as I might, I can't seem to figure out the way to properly bind everything the way I want it. Here's what I'm trying to do:
I have an NSArrayController plucking items from a managed object context, called 'Field Values'. This is to be used to populate the popup menu for each item (i.e. the list of available choices). I can bind this by selecting the cell in IB and binding its content/objects/values to 'Field Values'.arrangedObjects and 'Field Values'.arrangedObjects.name as appropriate (to get the represented object and the visible title).
I then want to bind the column in such a way that the selected value in each row comes from an array in my controller class, again made visible (and only edited through) another NSArrayController.
So far I've managed to set it up so that every popup menu contains the list of available fields, and that the default value is selected in each of them. Actually selecting an item has no effect, however— it just snaps back to its initial value. I've also managed to find some other variations on this, such as the menu being populated with the selected values, or containing the name of all available values, and the selection containing the -description of the 'none' value I added.
I'm sure I'm missing something fairly simple, but I'm not sure what it is. Presumably there's some subtlety I've missed in how to bind this sort of data (i.e. the Content vs. Content Object vs. Content Value things), but I'm damned if I can see it right now.
Many thanks in advance :o)
I've got a similar set up with a table view, although the data source isn't Core Data based, but I saw one thing you might double check that could be a subtle difference. In my setup for the table column, I have the table column itself bound via content, contentValues, and selectedObject. However, it looks like it's also possible to do the bindings on the actual NSPopUpButtonCell instead. Perhaps it works when the bindings are on the table column, but not when they're on the actual cell? Anyway, there's one thing that might be worth looking into.
Never bind to scroll view, table view or cell.
However, ever bind to table columns.
Watch the title of the Inspector window to be certain of what you're binding.