Cascaded Dynamic Tables with a Keytable
Cascaded Dynamic Tables with a Keytable
johncscott
Posts: 14Questions: 0Answers: 0
I've made a copy of the tables I am working on to a publicly accessible location.
http://gstest.c3x.co/meals.html
The second table loads data in to the third table when you click the team ID or Name in the second table.
Rather than authenticate with the API (for the purpose of this sample) I've created text files for the first four links (production office, toilet team, bin crew & ambulance) that contain a sample of the JSON that would be served by the API. Normally a different dynamic URL would provide the json based on the ID.
The number of columns for meals is variable, so this is database generated (but static html in this sample).
Using the server generated number of columns the width of the scrollable area is dynamic.
All of my questions concern the third table "Team Allocations by Member"
This uses keytable to allow you to edit the number, and a save button (not shown) to allow you to save.
Apologies for this long list of issues. I've put them in order of importance :)
1) not sure why the tbody in the first three columns in not lining up with the thead
2) i'd like to make it so that when you commit a change in the keytable the total colum is updated in javascript, is there a way to get a reference to this "row[2]" to update when the keytable is submitted, i've thought about knockout but that may overcomplicate and also not sure how to make the underlying mData observable
3) when keying through the table with keytable it does not move the scrollable area so the focussed cell goes out of the view
4) is there a way to make a given column (eg today) scrolled into the view on loading
5) is there a way to make the validation messsage appear in a popup (eg using pnotify) rather than forcing the row to increase in size
6) is there a way to make keytable not allow certain columns to be editable (this will be days in the past so incrementally from the left)
Any guidance with any of these very much appreciated.
http://gstest.c3x.co/meals.html
The second table loads data in to the third table when you click the team ID or Name in the second table.
Rather than authenticate with the API (for the purpose of this sample) I've created text files for the first four links (production office, toilet team, bin crew & ambulance) that contain a sample of the JSON that would be served by the API. Normally a different dynamic URL would provide the json based on the ID.
The number of columns for meals is variable, so this is database generated (but static html in this sample).
Using the server generated number of columns the width of the scrollable area is dynamic.
All of my questions concern the third table "Team Allocations by Member"
This uses keytable to allow you to edit the number, and a save button (not shown) to allow you to save.
Apologies for this long list of issues. I've put them in order of importance :)
1) not sure why the tbody in the first three columns in not lining up with the thead
2) i'd like to make it so that when you commit a change in the keytable the total colum is updated in javascript, is there a way to get a reference to this "row[2]" to update when the keytable is submitted, i've thought about knockout but that may overcomplicate and also not sure how to make the underlying mData observable
3) when keying through the table with keytable it does not move the scrollable area so the focussed cell goes out of the view
4) is there a way to make a given column (eg today) scrolled into the view on loading
5) is there a way to make the validation messsage appear in a popup (eg using pnotify) rather than forcing the row to increase in size
6) is there a way to make keytable not allow certain columns to be editable (this will be days in the past so incrementally from the left)
Any guidance with any of these very much appreciated.
This discussion has been closed.
Replies
Interestingly I can't actually see the KeyTable focus on those tables at all. However, I think I can assist with some of the points.
> 1) not sure why the tbody in the first three columns in not lining up with the thead
Could you try using the 2.5.0-dev version of FixedColumns, rather than the 2.0.3 release version you currently have? 2.5.0 has a lot of improvements in it, especially in this area: http://datatables.net/download .
> 2) i'd like to make it so that when you commit a change in the keytable the total colum is updated in javascript, is there a way to get a reference to this "row[2]" to update when the keytable is submitted, i've thought about knockout but that may overcomplicate and also not sure how to make the underlying mData observable
I couldn't actually see where the total column is calculated - it doesn't appear to be a callback that is registered to the data table - is it part of the data? If it is part of the data, then you'd need to use fnUpdate to update the data for the table.
> 3) when keying through the table with keytable it does not move the scrollable area so the focussed cell goes out of the view
Could you try the 1.1.8-dev version of KeyTable please? I think this issue has resolved the conflict with DataTables' scrolling.
> 4) is there a way to make a given column (eg today) scrolled into the view on loading
Not built into FixedColumns. However, you could use a little bit of jQuery to scroll to a given cell. Something like:
[code]
$('div.dataTables_scrollBody').eq(0).scrollLeft(
$('th:contains("Thur 4")').eq(0).position().left
);
[/code]
That's obviously for the first table only, and a static date, but that's the basic idea.
> 5) is there a way to make the validation messsage appear in a popup (eg using pnotify) rather than forcing the row to increase in size
I can't actually see the editing interface here as I mentioned, o I'm not entirely sure what is causing this, but I guess something (jEditable?) is writing to the cell with a validation message. This isn't part of DataTables but I'd suggest you might need to make a small change to whatever software you are using for that aspect to have it alert out rather than showing the message inline, which will break things as you are seeing.
> 6) is there a way to make keytable not allow certain columns to be editable (this will be days in the past so incrementally from the left)
Currently no actually. This is something that I've been meaning to add to KeyTable - the ability to skip certain columns. At the moment the work around is to modify the editing to disallow it from editing on certain columns (perhaps add an `editable` class to those cells which can be edited, and use a selector to reduce the matched set to just those cells).
Hope this helps some!
Regards,
Allan
I should have been clearer
to see the keytable you'd need to load something into the third table
by clicking one of the links in the second talbe
but yes you're right on #5 this is jeditable - point taken
Regards,
Allan
http://gstest.c3x.co/
with the dev version of fixed columns and keytables
unfortunately neither fix the issues :(
the fixed columns one especially seems to go quite wrong
have a look and see what you think
Regards,
Allan
1. I would very strongly recommend not using sScrollXInner . To the point that I'm actually thinking of removing it from DataTables. More or less nothing good can come from it! I would suggest you add something like this to your css:
[code]
.table th,
.table td {
padding: 2px 15px;
white-space: nowrap;
}
[/code]
That will keep the cells nicely spaced and text all on one line, while allowing it to use what scrolling is needed for each table.
2. FixedColumns 2.5 isn't respecting the sLeftWidth parameter that is set. Possibly it might be that will have to be removed and the width determined only by DataTables given the way FixedColumns works now. I'm going to look into this more.
3. Safari 5.x is doing something very odd with the column widths causing misalignment. The way DataTables works is to calculate the width of each column, sum it and apply that to the table (forcing the table to a fixed width). However, the sum of the cells does not equal the width that the table should be. It does work in Chrome and Safari 6. This also is going to need some additional work.
So I'm afraid I've not got a quick fix for this. I'll be looking at it further, as I say.
Allan