Resizing columns when modifying data

Resizing columns when modifying data

peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
edited October 2010 in General
I'm need to add an extra column to my data. I start out by adding an empty column in each row in the aaData that is passed in. I'm using aoColumnDefs to set a unique class for this column. I then add the data. But the column is not resizing properly. I'm using bAutoWidth (by default).
I tried setting sWidth in aoColumnDefs but that doesn't seem to have any effect. Also tried calling fnAdjustColumnSizing, also with no effect.

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    DataTables doesn't currently allow columns to be added dynamically - there is no method to do this. It is possible to write an API function to do this, certainly, but there isn't one available atm. So how are you adding the column? One way of doing with without writing an API plug-in to do it, would be to destroy the table, add the column using standard DOM methods and then re-initialise it.

    Allan
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    I saw that there was no api for it, so I just initialized DataTables with an empty column. As far as DataTables is concerned, the number of columns is not changing. But I thought it would be able to handle the column resizing when I changed the data in the columns. Wouldn't AutoWidth take care of that?
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    I'm not quite sure I understand - when you initialise DataTables there is just one HTML column? But then you add more through DOM methods, or something else?

    Allan
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    No, I initialize DataTables with this extra column, but there's nothing in it. Basically, I just modified the aaData array prior to initializing by adding an empty entry at the end of each row. (Also tried with a &nbsp).
    Then, after DataTables is initialized, I modify the data.

    Really, what I'm trying to do is to place a button to the right of each row, for example, Delete. So the user can click on it and delete the row. So it's metadata. It's not really part of my data, but since it is associated with each row, it makes sense to put it in the table.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Ah I see - yes okay, that sounds like the way to approach it. So when you say "the column is not resizing properly", in what way is it no resizing correctly? Can you give us a link to an example?

    Allan
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    Ok, here are some examples.

    Here is the code showing DataTables initialized with an empty column (for all examples, just choose the first table in the dropdown): http://www.nova.org/~pak/test/emptyColumn.html

    Here is what it looks like after data is added to the last row: http://www.nova.org/~pak/test/buttonColumn.html .
    See around line 169 of http://www.nova.org/~pak/test/js/buttonColumn.js to see how the data is being added.

    And here is a final example, using text instead of buttons, since I thought maybe the button HTML was throwing things off: http://www.nova.org/~pak/test/textColumn.html

    Notice also in the last 2 examples that the FixedHeader columns are not being adjusted at all.

    Notice also that http://www.nova.org/~pak/test/css/style.css has an explicit
    [code]
    #mainTable tbody tr td.editButtons {
    width: 100px;
    }
    [/code]
    but for some reason, the calculated width is not honoring this. I don't want to have this line in the css at all. I put it in just to see if I could force the width to expand.
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    Have you had a chance to try out the code that I posted?
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    I'm afraid I'm a little confused - sorry. I'm not 100% sure what the problem is. When I load all of your examples, the last column has a width of roughly 125px - is this wrong? The only thing I see visually wrong is the FixedHeader has an offset for some reason...

    Allan
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    Hmm, that's very odd. Here are some screen shots of what I'm seeing:

    http://www.nova.org/~pak/test/emptyColumn.png
    http://www.nova.org/~pak/test/textColumn.png

    At least you are seeing the problem with the FixedHeader, so I'm not totally crazy :-)
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    Just to be clear, are you seeing no wrapping at all in the last column?
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    Any other thoughts on this? I cannot figure out how DataTables figures out the column widths. The table is small, so there is plenty of room for it to expand. Why is the last column wrapping?
This discussion has been closed.