DataTables

I think this is great! Just one issue. How do you update the row's css with the correct background color? If I enter an 'X' in the last field I would expect the row to change to the appropriate background color.

.

@w9r1: The makeeditable plug-in isn't related to this thread - you might be better opening a new thread with questions about how to modify that plug-in. Having said that, you will almost certainly need to modify it to have it send an XHR to the server to request that it locks a DB row (and that will need a time out of some kind I guess) when editing starts, and then have it unlock when the editing is complete and the update done.

Allan

I think the correct thing would probably be to not allow more than one empty new row at a time in the demo. This could be done by adding the code:

					// Only allow a new row when not currently editing
					if ( nEditing !== null ) {
						return;
					}

to the 'add' event handler. This might be what is wanted for the interaction, it might not be... Ultimately some code would need to be crafted for each use case. The intention with the blog post is to show how it might be done and provide a solid starting point, rather than a column plug-in solution. Eventually I'll write an editing plug-in for DataTables - the reason I haven't thus far is that there are about a million different ways to do the interactions needed, and I don't want to dictate them for the plug-in.

Allan

I was getting confused setting the textarea value until i found that textarea has no value attribute, its value comes between tags, i.e: <textarea>my text</textarea>. Problem solved. :)

Anybody figure out how to set the input focus to one of the cells in the row that is being edited?

hey Alan,
thanks for the example,but I m getting one issue with the working of jquery.As in my case I am populating the table with the help of ITERATOR, I got 3 rows in my dynamic table and the edit functionality works only for one row(last row).
kindly help me out .

i tired this line on delete click nEditing= null; and the problem disapears. yamiiiiii :D

We are exactly using the datatables this way. when the table-layout:auto css attribute made the whole ui to flicker in Edit mode(had to move to fixed layout), you should think of a solution that auto mode can be used without flickering.

Please review demo...
http://code.google.com/p/jquery-datatables-in-line-editing/

Allan, thank you for your kindness in sharing and maintaining this fantastic plug-in.
Got the codes working with full PHP back end.
http://code.google.com/p/jquery-datatables-in-line-editing/
Hope other members in the community can use my demo.

I installed the latest Version and had a tiny issue with the Table as it is called partners and in the code adressed with Partners. After changing the capital letter in the code it worked just fine.

Regards

Ivo

No sorry. I am planning to do a tutorial soon about Editor though :-).

Allan

Sure - you would need to add a little bit of code to add that ability to the technique used in my blog post though. Or consider using Editor which has select menu options built in and other field types can be added with plug-ins.

Allan

I have got the basic functionality working, but am now stuck on how to incorporate the back end to upate the database. I am using ColdFusion. What we generally do is:
1. Collect our input (This bit works)
2. Use hidden input fields to indicate what action to take
3. Do a submit of the form
4. Server then looks at the form elements and determines what to do.

So I have CF code that looks like this immediately after my </head> tag

<cfif isdefined("form.hdnaction")>
	<cfoutput> 
	<script type="text/javascript" language="javascript">
		alert("hdnaction exists = #form.hdnaction#");
	</script>
	<cfif form.hdnaction neq "display">
        <p>
        Action 			#form.hdnaction#<br>
        Dealer 			#form.hdndlr#<br>
        Name  			#form.hdnname#<br>
        Address  		#form.hdnsddr#<br>
        Location  		#form.hdnloc#<br>
        Postcode  		#form.hdnpcode#<br>
        State  			#form.hdnstate#<br>
        Country  		        #form.hdnctry#<br>
        Phone  			#form.hdnphone#
        </p>
	</cfif>
    </cfoutput>
</cfif>
<body>
<form name="aa_TestEdit" id="aa_TestEdit" action="aa_TestEdit.cfm" method = "post">
<!--- some variables to apply any edits --->
<input type="hidden" ame ="hdnaction" id="hdnaction" value=''>
<input type="hidden" ame ="hdndlr" id="hdndlr" value=''>
<input type="hidden" ame ="hdnname" id="hdnname" value=''>
<input type="hidden" ame ="hdnaddr" id="hdnaddr" value=''>
<input type="hidden" ame ="hdnloc" id="hdnloc" value=''>
<input type="hidden" ame ="hdnpcode" id="hdnpcode" value=''>
<input type="hidden" ame ="hdnstate" id="hdnstate" value=''>
<input type="hidden" ame ="hdnctry" id="hdnctry" value=''>
<input type="hidden" ame ="hdnphone" id="hdnphone" value=''>

This is looking to see if there is a form, and a form element called hdnaction. Initially it won't find one, but I expect it should once we submit the form.

I have modified the functions binding the add/edit/save/delete links as follows

		$('#dealers a.delete').live('click', function (e) {
			e.preventDefault();
			
			var nRow = $(this).parents('tr')[0];
			oTable.fnDeleteRow( nRow );
			document.aa_TestEdit.hdnaction.value = "delete";
		} );
		
		$('#dealers a.edit').live('click', function (e) {
			e.preventDefault();
			
			/* Get the row as a parent of the link that was clicked on */
			var nRow = $(this).parents('tr')[0];
			
			if ( nEditing !== null && nEditing != nRow ) {
				/* Currently editing - but not this row - restore the old before continuing to edit mode */
				restoreRow( oTable, nEditing );
				editRow( oTable, nRow );
				document.aa_TestEdit.hdnaction.value = "edit";
				nEditing = nRow;
			}
			else if ( nEditing == nRow && this.innerHTML == "Save" ) {
				/* Editing this row and want to save it */
				saveRow( oTable, nEditing );
				nEditing = null;
			}
			else {
				/* No edit in progress - let's start one */
				editRow( oTable, nRow );
				document.aa_TestEdit.hdnaction.value = "edit";
				nEditing = nRow;
			}
		} );

As you can see, I set the hdnaction input to indicate what action is to be taken when we submit the form.
At the end of the saveRow function, I have added a call to updatedata, which looks like this

	function updatedata(aData){
		document.aa_TestEdit.hdndlr.value = aData[0];
		document.aa_TestEdit.hdnname.value = aData[1];
		document.aa_TestEdit.hdnaddr.value = aData[2];
		document.aa_TestEdit.hdnloc.value = aData[3];
		document.aa_TestEdit.hdnpcode.value = aData[4];
		document.aa_TestEdit.hdnstate.value = aData[5];
		document.aa_TestEdit.hdnctry.value = aData[6];
		document.aa_TestEdit.hdnphone.value = aData[7];
		document.getElementById("aa_TestEdit").submit();
	}

Notice the submit(). This does do a submit, but the server doesn't see the form, so doesn't know what to do. Once this is working correctly, I intend to replace the displays of the data with either Delete, or Insert/Update, as appropriate, before reloading the page with the new data.

Any ideas why the server can't see the form when I do my submit?

Thanks

Ron

Hi there,

I'm looking for form editing functionality, to be exact like the way CRUD operation is implemented here at http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html.
The editor datatable shown here is not freeware. Is there any sample code using exactly the same functionality with datatable in ASP.NET? Also, if it is free?

Sorry lot of demands here! Thanks in advance.

Regards,
Sandy

Cuando se va crear un nuevo registro y damo Delete
$('#tbl_forms_correos a.delete').live('click', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );
});

Genera este error.
oTable.fnUpdate( aData[i], nRow, i, false );

Sugerencia colocar nEditing = null;

qdaria

$('#tbl_forms_correos a.delete').live('click', function (e) {
e.preventDefault();

var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );
nEditing = null;
});

If you are using script ver < 1.9.3 use this

"aoColumns": [
        
        {"fnRender": function(oObj)
            {
               return '<td class="update"><a href="#" class="edit"><i class="cus-application-form-edit" rel="tooltip" data-placement="left" title="Edit"></i></a></td>';
               
            }
        }

    ]

if targetting specific columns, replace return statement with the below code

             oObj.aData[8] = '<td class="update"><a href="#" class="edit"><i class="cus-application-form-edit" rel="tooltip" data-placement="left" title="Edit"></i></a></td>';
                                    return oObj.aData[8];

If script ver >= 1.9.3 use this

    
aoColumnDefs: [    
    {
        "aTargets":[12], // Assuming you want your link / button / action to be here
        "fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
        {
            $(nTd).css('text-align', 'center');
        },
        "mData": null,
        "mRender": function( data, type, full) {
            return '<td><a href="#" class="reject"><i class="aug-delete" rel="tooltip" data-placement="right" title="Reject"></i></a></td>';
        }
    }
]

Hope it helps

Hey Alan,
Does this plugin has client side and server side validation? If it has can you show example of how it works??????

that is not what i wanted.Cant we do the validation on this plugin??????

The demo of inline editing is interesting but it's just a presentation.

How really submit editing and deleting? Is there another demo showing a row with <select> instead of <input> ? In fact, in the database, it is the ID of a product type which is stored in the table, so why we need to use <select> tag.