manchiang / jquery-datatables-editable

Automatically exported from code.google.com/p/jquery-datatables-editable
0 stars 0 forks source link

makeEditable() do not work with Column Reorder plugin (ColReorder)? #96

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
Hi,

I'm updating a jquery-datables which already has the column reorder feature 
included (ColReorder plugin).  I was able to add an in-line edit feature to the 
2nd column in the datatable - note that the other 6 columns need to be 
Readonly.  This works; I can edit the 2nd Column, make the AJAX call to update 
the data, and re-display the changed data.

However, when I re-order the columns or show/hide the columns, the 
readonly/edit feature of the columns become incorrect.  Can makeEditable() work 
with the Column Reorder plugin (ColReorder)?  If so, can you please show me 
how? I'm a beginner to JQuery so would appreciate any help that you can give 
me.  Thanks in advance for your time.

What steps will reproduce the problem?
1. Datatable with 7 columns.
2. Column #2 (Route) is set to in-line edit from drop down list.  The other 6 
columns are to be ReadOnly.
3. When I reorder Column #1 (ID) and Column #2 (Route), the edit/readonly rules 
are incorrect.  

What is the expected output? What do you see instead?
After Column #1 and Column #2 reorder, this is the behavior:
a) Column #1 is "Route" and is ReadOnly.
b) Column #2 is "ID" and has in-line edit.

I would like the "Route" column (no matter where it's moved) to always have 
in-line edit capability whereas the other 6 columns to be ReadOnly.

What version of the product are you using? On what operating system?
OS:  Windows Server 2008 R2
JQuery-Datatable:  DataTables-1.8.0
JQuery-Datatable-Editable:  
1) jquery.dataTables.editable.js at 1.0.0
2) jquery.jeditable.js at 1.6.2
3) jquery.validate.js at 1.7

Please provide any additional information below.

The definition of the datatable and makeEditable() invocation are attached in 
the file.

Original issue reported on code.google.com by thuyduon...@gmail.com on 7 Mar 2012 at 11:03

Attachments:

GoogleCodeExporter commented 9 years ago
Hi,

Currently DT editable plugin is not compatible with column visible and column 
reorder plugins. Problem is in configuration of editable plugin - it uses 
aoColumns for the column editor definition however these indexes are mismatched 
if one of these two plugins change s data table column order.
I'm considering this as future enhancement but until now I have not suceed to 
make them compatible.

Regards,
Jovan

Original comment by joc...@gmail.com on 7 Mar 2012 at 11:34

GoogleCodeExporter commented 9 years ago
Hi Jovan,

Thank you for your quick response regarding my question!

As a follow up, I need to keep the Column Show/Hide and Column Reorder
since the previous release supported this.  Would you recommend or have any
other thoughts on how to implement the Edit ability on a Datatable column
while keeping the Column Reorder and Show/Hide features?

Thanks again.

  -thuy

On Wed, Mar 7, 2012 at 3:35 PM,
<jquery-datatables-editable@googlecode.com>wrote:

Original comment by thuyduon...@gmail.com on 8 Mar 2012 at 6:12

GoogleCodeExporter commented 9 years ago
hi there, i had (reluctantly) to modify the editable to support using the new 
row form also for editing/updating; and came to the issue with the colreorder 
problem too. i dont use inline editor in this table, but i solved the problem 
for me by adding a 'rel' attr to the original table header when creating the 
table, representing the original column index. and when adding a new row 
(_fnOnRowAdded), i check if the th node has that rel attribute, and if, get the 
current column index of this column and use it..
maybe this is a suggestion to handle this issue ??

sample (around line 340):

function _fnOnRowAdded(data) {
....
var rel = $(this).attr("rel"); // original column index
  for (n=0;n<iColumnCount;n++) // loop through columns
  {
        if ($(oSettings.aoColumns[n].nTh).attr("rel") !== undefined) { 
          var threl=$(oSettings.aoColumns[n].nTh).attr("rel"); 
          if (threl == rel)
          {                         
                // example: rel attrib is 2 because it was the 3rd column, now 
                // moved with colreorder as 1st column;
                // threl is 2, editable wants to set value for colum 3  tha
                // is now column 1; n is 0, so set rel to 0 to update col 0 in
                // the table instead of 2
            rel=n;                          
            break;
          }                       
        }  
   };
   ...

and the part of the table definition is:
<table id="example">
<thead>
<tr>    
<th rel="2">Original Column 2</th>
...

Original comment by jens.lie...@googlemail.com on 9 Aug 2012 at 9:31