22 thoughts on “Tablekit Addons”

1. All changes are lost when you refresh the page. Is there a way to have them persist accross sessions?

2. Nice Feature for moving the column..it can be really usefull.

3. Nice! Thanks!

4. Alain: You could hook up an AJAX callback and save the new order of the columns on server side.

5. Is there a way to load dinamically data from server and put it in the cells? Can i use the DOM to do this?

6. Hopefully next week I’ll post a short tutorial on how to hook the tablekit library with AJAX callbacks. Stick around!

7. simply… wonderful

8. I would love to see your short tutorial on how to hook the tablekit with Ajax Callbacks!

   Particularly a way to update rows with the periodical updater and RJS!

   Thanks

9. These scripts are just great.

   I wonder if you can show how to integrate this with
   TEXT-OVERFLOW: ellipsis, which is a IE css that adds “…” to the end of the text if it overflows the width for the cell.
   for example:

   style=”‘OVERFLOW: hidden; WIDTH: 40px; WHITE-SPACE: nowrap; TEXT-OVERFLOW: ellipsis’

10. is there a way to use the “real” resize, but still keep the original width of the table? without having the table change its width to be larger than original size?

11. Hi Barak!

    AFAIK the text-overflow property is still a proposal for CSS3 and not implemented yet http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-props)

    As for keeping the table width constant, sure you can, you just need to decide which strategy you’ll be using to decrease/increase the width for the rest of the columns.

    First possibility is to only affect the immediate neighbors (within bounds of minimum width) and the second is to affect all other columns equally. But it sure is doable.

12. Hi Vlad and all, I wrote this extension so table width wont change.
    I am affecting only the sibling column.
    You can place this code in a file called:

    tablekit-keepwidth.js, and give it a try.

    Object.extend(TableKit.Resizable, {
    oldResize : TableKit.Resizable.resize,
    resize : function(table, index, w) {
    var cell;
    alert(‘gg’);
    if(typeof index === ‘number’) {
    if(!table || (table.tagName && table.tagName !== “TABLE”)) {return;}
    table = $(table);
    index = Math.min(table.rows[0].cells.length, index);
    index = Math.max(1, index);
    index -= 1;
    cell = (table.tHead && table.tHead.rows.length > 0) ? $(table.tHead.rows[table.tHead.rows.length-1].cells[index]) : $(table.rows[0].cells[index]);
    } else {
    cell = $(index);
    }

    TableKit.Resizable.resizeSibling(cell, w);
    TableKit.Resizable.oldResize(table, index, w);

    },
    //add or deduct from sibling cell’s width, the amount dragged by current cell,
    //so table width wont change.
    resizeSibling : function(cell, cellNewWidth) {

    cell = $(cell);
    var siblingCell = cell.next()? cell.next() : cell.previous();

    var cellPreviousWidth = parseInt(cell.getStyle(‘width’));

    var siblingWidth = parseInt(siblingCell.getStyle(‘width’));
    var deltaWidth = parseInt(cellPreviousWidth – cellNewWidth);
    alert(siblingWidth);
    //add or deduct the delta width for this resize
    siblingWidth = siblingWidth + deltaWidth;
    alert(siblingWidth);
    siblingCell.setStyle({‘width’ : siblingWidth + ‘px’});
    },
    });

    Let me know if it worked for you.

13. Hi Vlad and all.
    I wrote my tablekit-keepwidth.js, and I want to share it with you all.
    Where can I upload it to?

14. Is there a reason why in IE6 I cant get the tablekit-trueresize.js to work?
    I added an alert(‘hi’) at the begging of the resize function and it is not called.

    The same with the script I just wrote. It is only called when I write the code inside tablekit.js
    (although in firefox, it is called also if I use the “extenssion” javascript file)?.

    any thoughts?

15. You can submit your modification to the Dexagogo Google Group or, if you’d like, I can host it here along with a demo.

    As for IE6 I’ll have to look into this matter.

16. i will be glad to post it to this site, so if u can give me ur email address, ill send it over

17. I’ve sent you an email. IE6 works ok (I’ve tested against the demo on this site), it’s just a bit picky about where you grab the column from.

    LATER EDIT: I’ve seen your older comments, they were marked as spam (probably you had JS disabled when you posted). I’ll clean the code up an post a demo.

18. cool, thanks

19. I have been watching for the TableKit Callback tutorial. I have been using the tablekit, but can not seem to get Ajax.Updater to accept and load changes to the table. I loose the sort features when I use the updater. Any ideas? I have a feeling I am updating the table incorrectly. If I use Insertion to add rows to the table, they are not sortable. So I am almost sure it is a init issue.

20. Stephan, hang in… I’ve been busy as a bee lately. As for re-init-ing TableKit, make sure you delete the column and/or row caches after each AjAX update/insert and only then try to init them.

21. Hi Vlad,

    I used the reordering kit, great! Found a little bug in cooperation with TableKit 1.3 (your code is based on 1.2).

    With 1.3 you can not move a column from the end of the list to the first position and then into another column position other than the first or last (with use of instead of ).

    It required the following change to TableKit 1.3:

    getHeaderCells : function(table, cell) {
    if(!table) { table = $(cell).up(‘table’); }
    var id = table.id;
    // Following lines taken from v1.2.1 to allow reordering to work when moving a column first totally to the left and then to the mid somewhere.
    if(!TableKit.heads[id]) {
    TableKit.heads[id] = $A((table.tHead && table.tHead.rows.length > 0) ? table.tHead.rows[table.tHead.rows.length-1].cells : table.rows[0].cells);
    }
    return TableKit.heads[id];
    // Orig v13: if(!TableKit.tables[id].dom.head) {
    // Orig v13: TableKit.tables[id].dom.head = $A((table.tHead && table.tHead.rows.length > 0) ? table.tHead.rows[table.tHead.rows.length-1].cells : table.rows[0].cells);
    // Orig v13: }
    // Orig v13: return TableKit.tables[id].dom.head;

22. hey, this is a long shot, but I really would like to resize the columns from EVERY CELL and not just the header/1st row.

    Why? Because if the table is 1000 rows long, I would have to scroll to the top of the page to resize the cell.

    Any way this can be done?