I’m wondering how to add role="rowheader" to the first cell of AG-Grid rows and add role="rowgroup" to the entire row? I have a large data table where the first column needs to be read by the screen reader when arrowing down the rows, just like the column headers are announced when going between columns. Every screen reader user who has tested our application has been upset that we do not have this basic feature and asked that we make it top priority. This issue describes how to visually achieve what I’m interested in, but it doesn’t work for screen readers. Adding role="rowheader" to a custom cellRenderer doesn’t work, probably because I need the rowgroup role around each row. It looks like Row Node may be the correct place to add a role attribute, but it’s unclear how to add the attribute to the div or how to even access the row node.
I would love some recommendations on how to add aria row headers in Ag-Grid. If we can’t get this functionality we’ll probably need to change to another grid, as this is so important to our users.
Related
Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.
I've posted a couple of Google Charts accessibility questions already; here's one more. Thank you in advance for your help.
Google Charts tables are surprisingly easy to make accessible to blind users, but I'm running into a perplexing problem. I'm making a website that uses standard Google category filters to produce a data table. I've added ARIA-live=polite and ARIA-atomic=true attributes to the table to signal screen readers to read out the entire table when it changes. This works perfectly most of the time; when a control is changed, after reading out the control behavior the screen readers will immediately start reading the new table.
Unfortunately, changes in class attributes trigger ARIA-live. For Google Charts tables also tagged with ARIA-atomic, this means that row hover behavior will trigger a reading of the entire table, because hovering over a row changes the row class. And if you move the mouse pointer over more than one row, it'll read out the entire table once for every row over which you pass.
EDIT: see NOTE below to clarify this paragraph. I've tried addressing this by tweaking the table's cssClassNames options, but the results are frankly maddening. Even when changing the tableRow and hoverTableRow options to the same class, the table will only apply that class when hovering, changing the class to " " when not hovering.
I've tried convincing my co-workers that users of screen readers won't be using mice, but I've been asked to find a solution anyway. Guh.
Does anyone understand how this row hover behavior works, exactly? Is the problem as inscrutable as I'm making it out to be, or am I missing something? Does anyone have any ideas for a workaround?
NOTE: Ryan B has a good workaround idea (see comment below), and that's exactly the kind of solution I'll propose if my co-workers insist that the current setup doesn't meet their standards. Thank you Ryan.
Still, in the hope that the problem is with my explanation, I'll clarify: when you hover over a row in a Google charts table, the background color changes. The Google Viz script manages this by listening for hover events over table rows. On hover, the script changes the row class name from something like "tr-goo-viz-table-row" to "tr-goo-viz-table-row-over", both of which are in the Google Viz CSS and only include styles of background colors (white and light grey, respectively).
In the HTML table call one can set the cssClassName option for hoverTableRow to "tr-goo-viz-table-row" (or set both tableRow and hoverTableRow to any class that only sets the background color) and visually, the hover behavior stops. But in an odd quirk, the script insists on differentiating the class names on hover even if you're telling it to keep the class names the same. Depending on the implementation the script will produce a doubled class name ("tr-goo-viz-table-row tr-goo-viz-table-row") for hover rows, or an empty class name ("") for non-hover rows, and either way that'll still trigger ARIA-live even though no style change is implemented and hovering has no visual effect.
Since I don't understand the implementation of this behavior, I'm hoping someone who understands it better than I do might know of a way to stop the hover-triggered class name changes altogether - killing the listener, etc. Something like adding "pointer-events:none" in the row CSS for example...except pointer-events wasn't supported in IE before IE11 and the people using this website will mostly be using IE9.
I just started using slickgrid. I was trying to find out how to make the header row not scroll away as the user scrolls down in the browser so long as part of the table is visible. I could not find any grid option or api method that does that.
Is this possible to do using a slickgrid api? My apologies if this has been asked before - I could not find it in search.
Thanks.
I don't know what method you used for that.
I suggest you that us scrollRowIntoView
mySlickGrid.scrollRowIntoView(90, 6);
scrollCellIntoView takes in a row as an argument that needed for colspan support. Without it, SlickGrid wouldn't be able to uniquely identify the cell
I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)
One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo
I have a big HTML table (~10K rows, 4 columns, text only) dumped from a database. I'm experiencing poor performance when opening it in Chrome/Firefox.
I do not have direct access to database, so it is impossible to load page by page. All data is static HTML.
Does pagination with some jQuery plugin help improve performance in this case? Any other suggestions?
When applicable, setting table-layout: fixed helps in reducing rendering time a lot. The slowness is mostly caused by the fact that in the default table layout method, the browser has to parse and process the entire table, calculating width requirements for all cells, before it can render any part of the table.
Fixed layout tells the browser to set column widths according to the first row (paying attention to any CSS that may apply to it). This may, of course, result in a mess, if the widths are not suitable for other rows. For a data table where rows are generally very similar, the widths can probably be set suitably.
This does not change the issue that very few people, if any, are going to read all the 10,000 rows. People will probably be looking for some specific data there. It might be better to set up a search form that lets the user get just what he wants.
I had a similar problem and made a jQuery plugin:
https://github.com/lperrin/infinitable
To use it, you can load all your data with Ajax call, turn it into a huge array, and pass it to the plugin.
It basically hides cells that are not visibles, while making it easy to sort or filter cells. There are other solutions to achieve that, but this one has no dependencies besides jQuery.
The project contains a demo with a table containing 100,000 elements.
Pagination would most certainly solve this problem. You could also try initially setting the table style to display: none. Although the pagination should likely take effect before the browser attempts to render the table.
You could also store the table in a separate html file, do an ajax call to the document, and implement live scrolling. Although, this depends on how you expect the user to explore the data. If jumping to a particular rage like 100-199 is useful, a paginated table would be ideal.