Screenshot mockup: http://tinypic.com/r/y2qex/5
Problem: I have a table that has 53 columns; one for each week of the year, plus one with the user name. It will have anywhere between 10 and 80 rows, depending on the number of users for each area.
The users need to be set a “flag” for each week, such as Annual Leave, Training etc.
I currently have a table, which has a select box in each cell. The problem is this works for 5 rows, but once I start getting 20+ rows, the browser wont open the page, because there are just too many select boxes.
Whatever new selections are picked must be able to be queried, so I can save them in my DB.
What I’m after are some generic ideas (i.e. not specific code) on how I can better solve this problem. Once I get a good idea, I’ll go off an work out the exact coding.
My ideas so far:
– Make all cells text only, with the current selection, then have an ‘edit’ option beside each user, which opens their row as a modal window which can be editted
– Make all cells have a “onClick” event, causing a dropdown list to be generated at the point of click
But I’d be keen to hear how other people might approach/solve this problem?
If the options are the same for many select boxes, you could consider using one datalist for all of them, this would be more performant, and I’m guessing allow you to have more per page. Unfortunately this is an HTML 5 feature, so it would not be backwards compatible with all browsers.
http://www.w3schools.com/html5/tag_datalist.asp
Other than that, you could consider pagenating your table if it gets over a certain number of columns. Or do like a tumbr thing, where more columns load via ajax if they scroll to the right far enough. You idea also should work.