Search code examples
datatabledatatablesjeditablejquery-datatables-editor

datatable editable column width behaving strange for empty column


I am using datatable editable plugin. Everything is fine but while i try to edit any empty column of first row , column width is behaving strangely. For other rows every thing works fine.

enter image description here          enter image description here

Here is code snippet :

$(document).ready(function () {
    $("#dbResultsTable").dataTable({
                "bServerSide": true,
                "sAjaxSource": "/DataTableTest/TableEditAjaxRequest",
                "bProcessing": true,
                "sPaginationType": "full_numbers",
                "bJQueryUI": false,
                "scrollX" : true,
                 "aoColumns": [
                              {  "sName": "MyID",
                              },
                               {
                                 "sName": "Operation",
                                }
                               ]
          ]
         }).makeEditable({ 
              "height": "100%",
            "width": "100%",   
                } 

         );

    });

Once I edit any column of first row , everything gets back to normal. Please help me.


Solution

  • Finally I solved it, I had to just call fnAdjustColumnSizing() on table.

     $(document).ready(function () {
       var oTable = $("#dbResultsTable").dataTable({
                    "bServerSide": true,
                    "sAjaxSource": "/DataTableTest/TableEditAjaxRequest",
                    "bProcessing": true,
                    "sPaginationType": "full_numbers",
                    "bJQueryUI": false,
                    "scrollX" : true,
                     "aoColumns": [
                                  {  "sName": "MyID",
                                  },
                                   {
                                     "sName": "Operation",
                                    }
                                   ]
              ]
             }).makeEditable({ 
                  "height": "100%",
                "width": "100%",   
                    } 
    
             );
    if ( oTable.length > 0 ) {
            oTable.fnAdjustColumnSizing();
        }
    
        });