TR ID not set properly using Add button when first column is visible=false.

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a table where the first column is hidden (is the ID) and the second 
column is visible.
2. Use the add toolbar to add a new entry.

What is the expected output?
I should see the TR inserted with the ID corresponding to the data returned 
from the ajax call.

What do you see instead?
The data is returned from the server correctly. The oTable.fnAddData is called, 
however the first entry in the 'values' array is 'undefined'. The TR then gets 
its ID updated to be the value of the 'data' via properties.fnSetRowID. Then 
_fnSetDisplayStart comes behind it and undoes that and sets the TR ID to 
'undefined' because the data in oTable has 'undefined' for the first column.

What I think needs to happen is that we should be checking to see if the first 
column is visible. If not, then pass the value of the 'data' response as the 
first column since it is the hidden ID column.

What version of the product are you using? On what operating system?
jquery-datatables-editable: 1.1.8
jquery: 1.6.1
datatables: 1.7.6
Windows XP (Chrome, Firefox, doesn't matter).

Original issue reported on code.google.com by kenneth....@gmail.com on 31 May 2011 at 5:55

[GoogleCodeExporter]

I don't understand are you using table in the Ajax source mode or not?
In the ajax mode it takes first item in the source and set it as an id see 
http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax.html

If you are using TBODY as a data source then it is required to add id as 
attribute of the TR tag.

If you want to generate id as an first column, hide it using aoColumns 
DataTables array and use this as an index it is a problem because once column 
is hidden it is not available anymore (see in Firebug it will not be shown at 
all so that information cannot be used. 

The closest solution you might create is shown in the page:
http://jquery-datatables-editable.googlecode.com/svn/trunk/issue20.html

You can add ID column but without hidding it, and override functions for 
getting/seting row ids using the following properties:

fnSetRowID: function(row, id) {
            $("td:first", row).html(id);
        },

fnGetRowID:  function(row) {
            return $("td:first", row).html();
        }

These functions will use first cell as an id and not id attribute of the TR tag.

 If you are familiar with DataTables you might try to hide column and use datatables api functions to find hidden column content and put this code in the fnGetRowID parameter but this is not a standard behaviour.

Regards,
Jovan

Original comment by joc...@gmail.com on 31 May 2011 at 8:31

• Changed state: Accepted

[GoogleCodeExporter]

We are using ajax mode.
We are not using TBODY as data source.
We are using the first column as the ID and hiding it using aoColumns.

Here is a modification to your source.. maybe this will communicate what I'm 
trying to say better.

Checks to see if the first column is hidden, if so it assumes that the return 
value of the call is the ID and sets it into values[0] as such. It then 
continues to map any other columns with rel="n" into values[n]. 

That gives us values = [59, "Foobar"].
That way when values is passed to oTable.fnAddData(values)... the datatable 
will have both columns stored internally correctly.

        function _fnOnRowAdded(data) {
            properties.fnEndProcessingMode();

            var iColumnCount = oTable.dataTableSettings[0].aoColumns.length;
            var values = new Array();

            // BEGIN changes suggested.
            // the first column is hidden. must be an ID column, the data returned from the call is the ID.
            if(!oTable.dataTableSettings[0].aoColumns[0].bVisible) {
                values[0] = data;
            }
            //  END changes suggested.

            $("input:text[rel],input:radio[rel][checked],input:hidden[rel],select[rel],textarea[rel]", oAddNewRowForm).each(function () {
                var rel = $(this).attr("rel");
                if (rel >= iColumnCount)
                    properties.fnShowError("In the add form is placed input element with the name '" + $(this).attr("name") + "' with the 'rel' attribute that must be less than a column count - " + iColumnCount, "add");
                else {
                    if (this.nodeName.toLowerCase() == "select" || this.tagName.toLowerCase() == "select")
                        values[rel] = $("option:selected", this).text();
                    else
                        values[rel] = this.value;
                }
            });

            //Add values from the form into the table
            var rtn = oTable.fnAddData(values);

thanks,
ken

Original comment by kenneth....@gmail.com on 31 May 2011 at 9:19

[GoogleCodeExporter]

fyi.. i'm not saying that should be the production code inside the //BEGIN and 
//END.. obviously there isn't any validations/error checking.. just an 
illustration..

Original comment by kenneth....@gmail.com on 31 May 2011 at 9:21

[GoogleCodeExporter]

Hi,

It seems to me that this is a bug in my cod ein Ajax mode (in my online example 
I have not added add button). I will probably add this in the porduction code 
but I will ned to check it in all other cases. 
If you are using plugin just in Ajax mode it looks fine, however, I will 
probably wil need to wrap this in some:

if(properties.IsAjaxMode)
{

}

because your fix should no be executed in other modes.

Regards,
Jovan

Original comment by joc...@gmail.com on 1 Jun 2011 at 5:47

• Changed state: Started

[GoogleCodeExporter]

>> I will probably wil need to wrap this in some: if(properties.IsAjaxMode) 
because your fix should no be executed in other modes.

^^^^ Completely agree.

Thanks for taking a look at this.

Let me know if you need more information or need me to test out a fix.

-ken

Original comment by kenneth....@gmail.com on 1 Jun 2011 at 5:56

[GoogleCodeExporter]

Hi,

I just noticed one thing - there is a workaround in this case (and this 
workaraound will be standard case of sage :) ). In the latest version of plugin 
1.2.1 you can put {{ID}} in the values of the form field. Plugin will replace 
any occurance of the {{ID}} with an id returned from the server and inject that 
value in the table. 
Please take a look at the 
http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax.html, only 
change I have made is added:

<input type="hidden" name="id" id="id" rel="0" value="{{ID}}" />

in the "Add" form and id is populated into the TR. Name and id are irrelevant 
only thing that is important is a rel attribute with value 0  and value 
attribute that has  {{ID}} value.
Could you please take this latest version and try it? This should be a standard 
way to handling server id I have updated text in the example.

When I have added this feature I forgot that this will be required in the Ajax 
mode.

Thansk,
Jovan

Original comment by joc...@gmail.com on 1 Jun 2011 at 6:51

[GoogleCodeExporter]

Yep.. That works just fine.

Thanks a bunch.
-ken

Original comment by kenneth....@gmail.com on 1 Jun 2011 at 1:58

[GoogleCodeExporter]

I'm closing thiis issue.

Original comment by joc...@gmail.com on 1 Jun 2011 at 4:48

• Changed state: Done