Cascaded Dynamic Tables with a Keytable

johncscott

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.

allan

Hi,

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

johncscott

yes that definitely helps some :)

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

allan

Ah I see! Thanks for clearing that up. Yes it appears that a `label` tag is being added to the document for the validation message. What you could do is take it out of the document's flow with `position: absolute` and add a little bit to the code to position it below the input element, and style it as a tooltip. That way it won't interrupt the flow like an `alert()` would.

Regards,
Allan

johncscott

I've put four versions up here:
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

johncscott

especially it seems to go very wrong in the third table (eg click the ambulance 4830)

allan

Oh dear, yes. That is very broken. Let me look into it and get back to you.

Regards,
Allan

allan

I'm still looking into this I'm afraid. It looks like there are a couple of issues:

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