Cascaded Dynamic Tables with a Keytable

Cascaded Dynamic Tables with a Keytable

johncscottjohncscott Posts: 14Questions: 0Answers: 0
edited April 2013 in KeyTable
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.

Replies

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • johncscottjohncscott Posts: 14Questions: 0Answers: 0
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • johncscottjohncscott Posts: 14Questions: 0Answers: 0
    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
  • johncscottjohncscott Posts: 14Questions: 0Answers: 0
    especially it seems to go very wrong in the third table (eg click the ambulance 4830)
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Oh dear, yes. That is very broken. Let me look into it and get back to you.

    Regards,
    Allan
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
This discussion has been closed.