Editable add-in is not compatible with ColVis plugin

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create datatable using jeditable and ColVis
2. set up aoColumns element values for makeEditable
3. hide a column

What is the expected output? What do you see instead?
Instead of the edit attributes being re-indexed to the visible columns they are 
incorrectly assigned.

For example:

If I created a select pulldown for column A and then hid it, the next visible 
column would now have the select.

What version of the product are you using? On what operating system?

Please provide any additional information below.
I think you may have already identified this as an issue, but if you know of 
any workarounds I would appreciate it.

Leo

Original issue reported on code.google.com by leo.dop...@gmail.com on 6 Jun 2011 at 8:49

[GoogleCodeExporter]

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.

Original comment by joc...@gmail.com on 10 Jun 2011 at 11:51

• Changed title: Editable add-in is not compatible with ColVis plugin
• Changed state: Accepted

[GoogleCodeExporter]

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, "jquery-datatables-editable@googlecode.com"
<jquery-datatables-editable@googlecode.com> wrote:

Original comment by leo.dop...@gmail.com on 17 Jun 2011 at 11:24

[GoogleCodeExporter]

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, "jquery-datatables-editable@googlecode.com"
<jquery-datatables-editable@googlecode.com> wrote:

Original comment by leo.dop...@gmail.com on 17 Jun 2011 at 3:08

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 17 Jun 2011 at 6:40

[GoogleCodeExporter]

Give me a few days to test it completey 

Leo

Original comment by leo.dop...@gmail.com on 17 Jun 2011 at 8:26

[GoogleCodeExporter]

Jovan,

So far so good, works as expected.

Leo

On 6/17/11 2:41 PM, "jquery-datatables-editable@googlecode.com"
<jquery-datatables-editable@googlecode.com> wrote:

Original comment by leo.dop...@gmail.com on 21 Jun 2011 at 5:03

[GoogleCodeExporter]

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

Original comment by rasp...@gmail.com on 18 Oct 2011 at 7:25

[GoogleCodeExporter]

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, "jquery-datatables-editable@googlecode.com"
<jquery-datatables-editable@googlecode.com> wrote:

Original comment by leo.dop...@gmail.com on 18 Oct 2011 at 8:20

[GoogleCodeExporter]

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?

Original comment by rasp...@gmail.com on 18 Oct 2011 at 10:20

[GoogleCodeExporter]

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

Original comment by leo.dop...@gmail.com on 19 Oct 2011 at 12:08

[GoogleCodeExporter]

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...

Original comment by jonwa...@gmail.com on 11 Apr 2013 at 6:44

[GoogleCodeExporter]

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

Original comment by leo.dop...@gmail.com on 26 Apr 2013 at 12:04

[GoogleCodeExporter]

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

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

Original comment by scottrei...@hotmail.com on 21 May 2013 at 4:04

[GoogleCodeExporter]

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.

Original comment by santosh...@gmail.com on 27 Dec 2013 at 1:56

[GoogleCodeExporter]

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? 

Original comment by keya.mad...@gmail.com on 24 Mar 2014 at 11:50

[GoogleCodeExporter]

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

Original comment by roman.pr...@gmail.com on 9 Apr 2014 at 1:42

Attachments:

• jquery.datatables.editable.S3428.js