Editable add-in is not compatible with ColVis plugin about jquery-datatables-editable HOT 16 OPEN

Unfortunatelly this plugin do not work in combination with ColVis plugin. I 
cannot find any event handler that can trigger editable plugin once number of 
columns are changed in CoVis.

Therefore, this will remain a known issue for now.

This function fires each time a column visibility's is changed to true or
false.

Leo

"oColVis": { "buttonText": "Customize columns",
                        "fnStateChange": function ( iColumn, bVisible ) {
    //oTable.fnSetColumnVis( iColumn,bVisible );
    alert("Colvis fired col " + iColumn + " visible " + bVisible + " name
");
  }
       },



On 6/10/11 7:51 PM, "[email protected]"
<[email protected]> wrote:

I actually make a change to your code, seems to be working properly, I
need to test it further.

Leo 

for (var i = 0, x=0; i < properties.aoColumns.length; i++, x++) {

 if (properties.aoColumns[i] != null && oSettings.aoColumns[i].bVisible) {
    cells = $("td:nth-child(" + (x + 1) + ")", aoNodes);
    var oColumnSettings = oDefaultEditableSettings;
    oColumnSettings = $.extend({}, properties.aoColumns[i],
oDefaultEditableSettings);
    cells.editable(properties.sUpdateURL, oColumnSettings);
  } else {
  if (! oSettings.aoColumns[i].bVisible) { //this is if its null but
invisible
    x--;
  }
                }




On 6/10/11 7:51 PM, "[email protected]"
<[email protected]> wrote:

Hi Leo,

This is great. Frenkly I have not too much experiance with colvis plugin but if 
you have made a change that works I will include it in the plugin.

Thanks,
Jovan

Give me a few days to test it completey 

Leo

Jovan,

So far so good, works as expected.

Leo

On 6/17/11 2:41 PM, "[email protected]"
<[email protected]> wrote:

Is there already a patched version including this functionality? 
as I am running into the same issues when having a wide table initially not 
showing all columns but want to be able to edit any possible cell.
I would appreciate this - or at least any hint where to place the code fragment 
above.

thanks

Comment 3 contains the modification that I used, it works in my situation
where there are hidden columns.


Leo

On 10/18/11 3:25 PM, "[email protected]"
<[email protected]> wrote:

Thanks for Reply.
Yes, I found that and tried to exchange / extend the original code. But I did 
not get it work.

My intention was. I setup the complete table for editing (required fields, 
integer, etc), which is working perfectly.
But when on first load I have some columns hidden using the "aoColumnDefs" 
setting, then the edit fails as it only counts the visible cells.
Even after switching on the columns using ColVis the wrong column count still 
exists.

So I am wondering if your code does not work under such circumstances. Or if I 
did something wrong when implementing.

Do I need to attach an event like in comment 2?
Or do I need to exchnge anything else from original code?

I am using colVis 1.3 and worked on lines 218 - 242 which I replaced with your 
code.
Could you catch my issue?

There must be something else wrong with your setup.

I suggest you disable colvis and test and introduce colvis with one column at a 
time to see where the problem is.


Leo

Hi.  I've also run into this issue with ColVis 1.0.8 and 
jquery.datatables.editable 2.3.2.

It looks like above, leo found a place to extend/modify editable so that colvis 
would play nice? Where abouts is that code chunk intended to go? And given that 
it's from 2011 is this change in 2.3.2? Because I'm seeing the same issue...

I'm not sure how much I can help with this as it's quite old. First off, I 
would suggest you upgrade your versions if you can and then retest, much has 
changed. Datatables also has an edit plugin (don't recall what it is) that you 
might want to try. If none of these things work for you then edit the colvis  
and search for "oDefaultEditableSettings" until you come across a piece of code 
that resembles the one above and replace it with the code segment I included. 
You should use lots of console.log outputs to see where you are and use the 
browser console to troubleshoot. Good luck.

Leo

You can fix it by adding this
else {
    iDTEindex++;
}

after the call 
 if (oSettings.aoColumns[iDTindex].bVisible) {
...
}
(ADD else here)

jeditable can look for headers before start editing any cell. The header 
recognition is needed in case if the columns are hidden then it won't effect.

Can someone please specify where exactly the code in comment 3 need to be 
inserted? 
I've tried inserting it in the ColVis.js file and also in my file where the 
datatable is being initialized. But both times , i get an uncaught Reference 
Error : properties is not defined. What am I doing wrong? 

I have had the same problem without of using ColVis plugin. The problem occured 
after changing of column visibility:

var oTable = $('#table').dataTable({...});

oTable.makeEditable({...}); //the editing started from the second visible 
column and it has the 'select' type

var indexOfFirstVisibleColumn = 1;

oTable.fnSetColumnVis(indexOfFirstVisibleColumn, false);

I make the changes described bellow to fix this problem:

/* the part of original function fnApplyEditable */

                for (var iDTindex = 0, iDTEindex = 0; iDTindex < oSettings.aoColumns.length; iDTindex++) {
                    if (oSettings.aoColumns[iDTindex].bVisible) {//if DataTables column is visible
                        if (properties.aoColumns[iDTEindex] == null) {
                            //If editor for the column is not defined go to the next column
                            iDTEindex++;
                            continue;
                        }
                        //Get all cells in the iDTEindex column (nth child is 1-indexed array)
                        cells = $("td:nth-child(" + (iDTEindex + 1) + ")", aoNodes);

                        var oColumnSettings = oDefaultEditableSettings;
                        oColumnSettings = $.extend({}, oDefaultEditableSettings, properties.oEditableSettings, properties.aoColumns[iDTEindex]);
                        iDTEindex++;
                        var sUpdateURL = properties.sUpdateURL;
                        try {
                            if (oColumnSettings.sUpdateURL != null)
                                sUpdateURL = oColumnSettings.sUpdateURL;
                        } catch (ex) {
                        }
                        //cells.editable(sUpdateURL, oColumnSettings);
                        cells.each(function () {
                            if (!$(this).hasClass(properties.sReadOnlyCellClass)) {
                                $(this).editable(sUpdateURL, oColumnSettings);
                            }
                        });
                    }

                } //end for

/* changes */

                for (var iDTindex = 0, iDTEindex = 0; iDTindex < oSettings.aoColumns.length; iDTindex++) {
                    if (oSettings.aoColumns[iDTindex].bVisible) {//if DataTables column is visible

                        //Get all cells in the iDTEindex column (nth child is 1-indexed array)
                        cells = $("td:nth-child(" + (iDTEindex + 1) + ")", aoNodes);

                        var columnId = iDTEindex;

                        if (cells && cells.length && (cells.length > 0)) {
                            columnId = oTable.fnGetPosition(cells[0])[2];     //<--- finding the real index of column
                        }

                        if (properties.aoColumns[columnId] == null) {
                            //If editor for the column is not defined go to the next column
                            iDTEindex++;
                            continue;
                        }

                        var oColumnSettings = oDefaultEditableSettings;

                        oColumnSettings = $.extend({}, oDefaultEditableSettings, properties.oEditableSettings, properties.aoColumns[columnId]);
                        iDTEindex++;
                        var sUpdateURL = properties.sUpdateURL;
                        try {
                            if (oColumnSettings.sUpdateURL != null)
                                sUpdateURL = oColumnSettings.sUpdateURL;
                        } catch (ex) {
                        }
                        //cells.editable(sUpdateURL, oColumnSettings);
                        cells.each(function () {
                            if (!$(this).hasClass(properties.sReadOnlyCellClass)) {
                                $(this).editable(sUpdateURL, oColumnSettings);
                            }
                        });
                    }

                } //end for


But I guess you will find the better decission in this place