My problem is the next:
I have a table in which I store information, by clicking on a row there will be a window in which I show that information in a certain format.
The problem I have when I try to make the table responsive because when trying to see it on small devices I have to do side scroll. I tried to hide columns with "display: hidden" but the data I can not retrieve, beacuse it not exists.
How can i do this?
Do yourself a favor - do not reinvent the wheel and use a specialized library, for example Datatables. At the very least, take a look at how datatables makes the table responsive.
You have not mentioned it, so I assume you are ok using jQuery, Bootstrap 3 or 4, Semantic UI or Foundation. For React / Angular there maybe other options.
Related
I'm adding accessibility to my project and I have a basic vuetify data table, just like this example, but I can't find a way to make the checkboxes accessible using the tab key on the keyboard, Is there any way to do this? I know there's something called 'tabIndex' and I've used it before, but I don't know how to use it here. Can you guys help me or guide me on how to do it? Thanks!
It is very difficult to impossible to “add accessibility” at the end of a project.
Getting keyboard navigation and aria attributes right in 3rd party components is nearly impossible. You’d need to apply plenty of hacks or bind deeply into the component’s DOM, which breaks once the library gets updated.
With Vuetify you chose a library that has accessibility on top of their list, but unfortunately the data table with checkboxes cannot be used by keyboard at all, and is lacking plenty of other ARIA attributes. They don’t seem to keep up to that promise for that component.
As with any 3rd party library, if you find an issue, you should try to report a bug upstream and fix it together with their developers.
Correct behaviour of data grids
The expected behaviour of tables in web applications is that of a Data Grid.
A data grid is a composite UI component, so it’s expected that the whole component receives focus only once by means of Tab. Then, you’d navigate with arrow keys inside the table, using Space to select rows or Enter to interact with a cell.
See Keyboard Navigation Inside Components
You can try keyboard navigation in AG-Grid
The pattern to apply in code would be a roving tab index:
Only one child element of the table has tabindex="0", while all others have tabindex="-1". Key bindings then will move the 0 around in the component.
So this is quite some effort to implement.
Simple Alternative
As far as I known, it is acceptable—sometimes even expected—by concerned users, for web applications to behave more like websites, where everything is focussed by means of Tab.
This might be ok if the only possible interaction in your table is to select checkboxes, and if you provide possibilities to Bypass Blocks by offering landmarks or headlines. You should test it with some screen reader users.
For this to work, you would indeed only need to add tabindex="0" to the checkbox.
Then, again, the checkbox does not expose any other accessibility information, it’s an ignorant <div>. It should at least be:
<div role="checkbox" aria-label="Select row 5" aria-checked="false" tabindex="0">
See the Checkbox Pattern
All this might be possible, see Vuetify Accessibility (a11y)
Other Accessibility Criteria
Right now, you mention keyboard navigation. This is a great place to start with, since it is the foundation necessary for most assistive technology.
The Web Content Accessibility Guidelines (WCAG) are the reference to look for if you want to achieve compliance. Level AA (including level A) is the one recommended as a baseline.
But be aware that keyboard navigation is only one of 13 guidelines. Exposing state (checked, selected) to assistive technology, or getting contrasts right are examples for other criteria.
For web applications, it’s a good approach to advance the improvements based on critical paths in the story map, similar to an MVP, meaning that you would advance per process/task and make sure that each step in that process is accessible to the audience you prioritised based on the nature of the application.
Usability testing with people with disabilities is also a very good approach that can be applied in parallel, which centres the initiative more on the actual use cases.
Im In need of assistance when it comes to implementing Bootstrap buttons in a DataTable where the purpose is to toggle the columns with these buttons.
This is how it looks like by default in the DataTables design, what I am trying to do is to use the Bootstrap design instead and also place the buttons to the left of the table which seem rather impossible...
If you have any suggestions please feel free to discuss it!
Check This
Bootstrap 3
This example shows DataTables and the Buttons extension being used with the Bootstrap framework providing the styling. The DataTables / Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap page.
https://datatables.net/extensions/buttons/examples/styling/bootstrap.html
Here is my problem:
I typically have a paginated datagrid with a lot of rows. I want to be able to edit the data for each row of course but I have 2 constraints on this:
I need the edition form to replace the content of the page (I don't want a popup, modal dialog or side panel)
I don't want to lose the state of the datagrid: maybe I navigated down 5 pages in the datagrid and I don't want to be reloaded on the first page. And actually, I'd rather not reload the data I already had (the edited data will be updated automatically by my persistence layer anyway).
Ideally, I would have liked to have some kind of subrouter but I'm not sure how it would fit the first requirement. Otherwise, I could have a component that would be hidden by default and positions itself on top of the datagrid view when necessary but that feels quite hacky and forces me to have everything in the same template. And I will have to handle a stack of these components if I have several different 'full-screen panel'...
Any idea on a correct way to implement this?
Thanks!
I tried different solutions to no avail unfortunately. I had a long discussion with #Kukks on gitter and we agreed that using subrouters and viewports might be a bit overkill for my use case.
I reverted to my original idea of using absolutely positioned components to hide the previous one in a kind of "deck layout". This is not ideal as I would have liked completely separated views and using components forces me to declare them in the main view but it works well and is very easy to implement...
So: not as clean as I would have liked but much easier to implement and less convoluted.
Consider using Router View Ports
http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/9
I have two scenarios I need help with, and I thought posting them together would prove more
valuable for myself, and other viewers.
Setup:
Worklight 6.1
dojo 1.9
Application:
MainView.html (Contains Body, and a transition Div, and NorthSouthView.js script reference)
View1.html (Contains a single Div that displays and unordered list
View2.html (Contains a single Div that Displays <p> data, and also plays audio)
View3.html (Contains a single Div that Displays instructional information)
application-descriptor <mainFile> MainView.html </mainFile>
All of the views are stored together in the application. There are no external http queries made by the application. All view transitions are local to the application.
Scenario #1:
At application start the MainView.html is invoked by worklight. Anticipated format::
<body>
<div>
<h1 id="SSheader" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Loan Snapshot</h1>
</div>
<div id="TransitionViewDiv">
/* Would like to load content of View1.html, View2.html, or View3.html here */
</div>
<script>SetView.js</script>
</body>
Description + Questions:
When the application starts, SetView.js will be loaded, and the purpose of this script is to look at localStorage and determine which view should be displayed. (View1, View2, or View3). The goal is to keep SSheader fixed at the top of the screen at all times. Only TransitionViewDiv would update.
Questions:
1) What coding approach can be used in SetView.js to load one of the 3 possible views into the TransitionViewDiv?. I did findin dojo 1.9 specs an example using dojox/mobile/ViewController but I was not able to get the sample code to work as documented by dojo.
2) Is the approach of having the TransitionViewDiv necessary, or could View1, 2 or 3 be loaded without TransitionViewDiv? Keep in mind that each view View1, 2, and 3 are defined as individual Div's.
Appreciate any advice to accomplish the above approach, or welcome any suggestion on the best practices to accomplish the transition.
Scenario #2:
As a follow-on to the scenario 1 above. Once View1, 2 or 3 is successfully loaded the views will have buttons defined that will want to cause the transition to another one of the remaining views. So, if inside SetView.js the decision is to slide in View2 to be displayed, View2
will have buttons that will want to load for example View3.html.
Description + Questions:
1) Would the best approach to load View3.html from View2.html be to use the moveTo on the button click, or should the button use the callback to invoke javascript to cause the transition similar to what was used to load the initial view?
Appreciate any advice on the best practices to managing multiple view stored in independent files. In the end the application will have upwards of 15+ ViewXX.html files each containing a Div. Based on this, having all of the views in one html file and forcing the hide, and show is not feasible.
Appreciate your time and help
To load an HTML fragment (View1.html, View2.html or View3.html), you can use the dojox/mobile/ContentPane. This widget allows you to provide a href property that can be used to specify the location of the view.
You can also alter it later on by setting the href property again, for example:
registry.byId("myContentPane").set("href", "View2.html");
You should keep the div#TransitionViewDiv and programmatically add the dojox/mobile/ContentPane to it, or use declarative syntax and add the following attributes:
<div id="TransitionViewDiv" data-dojo-type="dojox/mobile/ContentPane" data-dojo-props="href: 'View1.html'"></div>
Your second scenario is differs from the first one. In the first one, you actually have 1 view with many fragments, while in your second scenario you have many views.
If you only have 1 view, you cannot transition to other views (there are none). So if you want to use transitions you cannot use dojox/mobile/ContentPane.
However, if you have seperate views, then that means you need to move the header to each view (since they're part of it). For these, more complex cases I think you should look at the dojox/app module. This covers a lot of the MVC code for you and the only thing you need to do is configure it.
If you're not interested in the dojox/app module, you can try to inherit views. You might want to look at this answer I once provided. In the comment section of that answer you can also find a more detailed JSFiddle. In this example the header is actually inherited. I also wrote a more detailed article to handle this case .
In asp.net the DataGrid supports templates. You can provide your own template and have the grid fill the data in your template.
With Dojo Grid, it seems like I can't make my own template outside of the the rigid simplistic cell style grid that Dojo provides.
Does anyone know a way to use a custom template with Dojo Grid? Specifically, with Dojo you're forced to use a cell that corresponds to a data item. I'm looking to use a table as a template with any styling that I choose (rows,columns,rowspans,colspans, more than one data items in a single cell, etc).
Any clues please?
Thanks
Firstly, it sounds like everything you want is available by customizing the grid. You can do nesting of cells and even have things like Filtering Selects in rows. Unfortunately the docs on this are not awesome so it takes Googling and trial and error if you want very customized features.
Secondly, because of the OO nature of Dojo you can always use inheritance to create mixes of various widgets. Specifically the _templated class allows you to specify an HTML template for your widget, which themselves can included templated widgets.
If that sounds non-trivial, you're right, which is why I would suggest digging deeper into the Enhanced grid and probably open up the code before trying to write something yourself.
I can tell you that I struggled getting it working correctly, but I have hence been pleasantly surprised by features that I needed that I thought I would need to build myself but were built into the grid.