TR ID not set properly using Add button when first column is visible=false. about jquery-datatables-editable HOT 8 CLOSED

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

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

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

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

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

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

Yep.. That works just fine.

Thanks a bunch.
-ken

I'm closing thiis issue.