colResizable on dynamic table not working

Question

I have a dynamic table which user can add rows or columns, I also use colResizable to make it flexible for user to be able to resize columns. While I added this plugin it does not work for new created cells.
This is my source

$(document).ready(function() {
   $( "#container table" ).colResizable({ liveDrag : true });
   //... Other stuffs
}

This function to create column

function insert_column(element, position)
{
   element.parent().parent().find('tr').each(function() {
      var index = 0;
      $(this).find('td').each(function() {
         if (index == position)
         {
             $(this).after('<td>&nbsp;</td>');
         }
         index++;
      });
   });
   $( "#container table" ).colResizable({ liveDrag : true });
}

If you want may think it's because of some CSS, this is the only CSS I have for #container and tables inside

#container {
    float: left;
    width:800px;
    height:100%;
    overflow:hidden;
    padding: 7px;
    border: 2px #BBB dashed;
}
#container table {
    width: 100%;
    table-layout: fixed;
    background-color:#FCFCFC;
}
#container td {
    border-spacing: 2px;
    min-height: 17px;
    min-width: 50px;
    border: 1px #CCC dotted;
}

The weird part is that if I comment or remove the colResizable it works for adding columns but if I enable it adds the columns but not visible and cannot be resized.
Any help will be appreciated.

Solution 1

Reference: https://github.com/alvaro-prieto/colResizable/issues/2#issuecomment-5198584

//Disable the plugin first    
$( "#container table" ).colResizable({ disable : true });

insert_column();

//Re-init the plugin on the new elements
$( "#container table" ).colResizable({ liveDrag : true });

Solution 2

The answer given by Jon works. I was struggling for long time, as neither column resizing was working nor it was showing the Resizer icon between the columns.

By disabling colResizable() before modifying the HTML Table and further calling colResizable() works.

The working code after this addition is given below.

In this 'tblqresult' is the Table Id. In this code following are the sequence of steps:

1. colResizable() is disabled first.
2. Data in Tbody is cleared.
3. All existing header columns are cleared.
4. Added new columns dynamically.
5. Function setResultTableColresizable() is called in that colResibale() is set again.

> function updateResultTableColumns(){
>         $('#tblqresult').colResizable({ disable : true });
> 
>         $('table#tblqresult tbody').empty();
>         $('#tblqresult').find('th').remove();
> 
>         //Adding columns as per select list in that order
>         $('#' + selectULiD + ' li').each(function(){
>             if( $(this).text() != 'Drop Columns here...'){
>               var th1 = $("<th></th>").text($(this).text());
>               $('table#tblqresult tr:first').append(th1);
>             }
>         });
>         setResultTableColresizable(); }
> 
> 
> function setResultTableColresizable(){  
> $("#tblqresult").colResizable({
>     fixed:false,
>     liveDrag:true,
>     gripInnerHtml:"<div class='grip2'></div>", 
>     draggingClass:"dragging"    }); }

Comments

[Javad]

Thanks for your response, however I switched to jQuery UI resizable instead of this plugin but just curios after calling the colResizable({ liveDrag : true}); should I enable it or it will be done?

[Jon]

Yes, that is the call that enables it. 'Disable' and 'Enable' enable are kind of misleading terms, b/c they imply that it can just be toggled on and off. Really what you're doing is destroying the plugin instance, so the only way of 'enabling' it again is to re-initialize the entire thing.

[Javad]

Thanks I will test it.

[Abhilash Augustine]

@Jon, But, after I re-initialize the colResizable it set the width of the inserted column as 0px. How can I manage this situation?

[Jon]

@AbhilashPA-Pullelil If you can put up a test case somewhere, I can check it out. I don't remember that being a side effect of this method, so I would check to see if you're setting the width dynamically in your code somewhere.