DataTables logo DataTables

Inline editing
  • Hello all,

    A new blog post discussing how inline, full row editing can be achieved quite simply with the DataTables API:

    http://datatables.net/blog/Inline_editing

    Enjoy :-)
    Allan
  • 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.
  • Really nice

    Btw got an error after deleting one item and click edit :
    aData is null
    [Break On This Error] oTable.fnUpdate( aData[i], nRow, i, false );
  • This would be perfect since we need to intercept edits to attempt to lock the row on the database before anything is actually changed, and unlock the row on cancellations, and after updates (we use a separate table to control locking). I'm fairly new to JQUERY and this stuff. Is it possible to make dataTables with makeeditable plugin work like this with all of the functionality? How can I use the jeditable plugin with this approach?
  • @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
  • Hi Allan,

    The are a couple of things going on with the main demo http://datatables.net/blog/Inline_editing when you add more then 1 row. Let's say you add three more rows and all of them are in edit mode. After filling the text for 1 row and pressing save sometimes it resets the input values without saving and other times resets the text of all the rows that are in edit mode.
  • 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
  • Having only one row in edit mode works in my case. Thanks for that.
    Is it possible to use textareas instead of inputs text?
  • 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. :)
  • I'm trying to use that example with FixedColumns enabled and it breaks at restore row
     oTable.fnUpdate( aData[i], nRow, i, false );
    , getting data from row
    var aData = oTable.fnGetData(nRow);
    returns null
  • Anybody figure out how to set the input focus to one of the cells in the row that is being edited?
  • Just use $(node).focus() where node is a suitable selector.

    Allan
  • 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 have the same problem as numberone.

    when i clicked to update a row and instead of clicking on save, i clicked on delete, the row was deleted but after clicking on edit another row, i got this error :

    aData is null
    [Stopper sur une erreur]

    oTableGestion.fnUpdate( aData[i], nRow, i, false );

    i don't know what causes that problem, any help would be appreciated.
    Thanks in advance.

    El garch
  • i tired this line on delete click nEditing= null; and the problem disapears. yamiiiiii :D
  • So there is no way of using inline editing with other input types? or is it solved? Also how save the data to the database?
  • 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.
  • I have to use this with a drop down list...any idea how? Also I have to access the added data and the updated once and save into MySQL database when users click a button.
  • I don't really understand the first change I'm afraid. The server-side processing mode of DataTables must send sEcho and sEcho must be returned. If it isn't being sent, then you probably aren't using DataTBles in server side processing mode.

    Regarding the second issue, can you link to a test page showing the issue please? I example appears to work okay there.

    Allan
  • 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.
  • Excellent - thanks for sharing your code with us :-)

    Regards,
    Allan
  • 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
  • Regarding inline editing, are there any tutorials about incorporating this with ASP.NET MVC?

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

    Allan
  • can we use other inputs like dropdown in the table?
  • 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
  • @Allan: Thank you for early reply. I am trying to use drop down list instead of text input , but I am not getting it right way. can you please tell, how can i do it?
  • 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 all,

    Is there a Datatables editing example that shows how to do client side validation and server side validation and show validation errors.

    Also, I vote to have a simple serverside aJax example which shows the validation and updating using MySql PHP.

    Best, LA Guy
  • 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
  • Well you can use the free DataTable API and plug it with a modal window ( you can use the elegant and simple twitter bootstrap) to edit the data and save. Irrespective of whether its php/asp/jsp @ backend :)
    Hope this helps

    Girish
  • 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;
    });
  • I am new to dataTables. I am trying to use the following to setup a datatable to be editable as in this example:

    var oTable = $('#example').dataTable({
    'aaData': my.dataMatrix,
    'aoColumns': my.columnArray,
    });

    I can't for the life of me figure out how to define aoColumns to get an Edit link or button in the column cell.

    In the HTML for your example, you have

    <td><a class="edit" href="">Edit</a></td>
    <td><a class="delete" href="">Delete</a></td>

    using aoColumns, the closest I can get to this so far is

    <td><class="edit">Edit</td>

    I did this using the sClass tag.

    Any help would be greatly appreciated.
  • 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
  • I'm been following this tutorial, that I found very useful so far. Now I was trying to adapt it to my needs.
    In the editRow function, I was trying to work with checkboxs, but without success.
    Same in the saveRow. How can I change it to use checkboxs?
    Cheers
    Rui Martins

    function editRow ( oTable, nRow )
    {
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);
    jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'">';
    jqTds[1].innerHTML = '<input type="text" value="'+aData[1]+'">';
    jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'">';
    jqTds[3].innerHTML = '<input type="text" value="'+aData[3]+'">';
    jqTds[4].innerHTML = '<input type="checkbox" checked="'+aData[4]+'">';
    jqTds[5].innerHTML = '<a class="edit" href="">Save</a>';
    }
  • Hey Alan,
    Does this plugin has client side and server side validation? If it has can you show example of how it works??????
  • The code presented in the blog doesn't no (although it could readily be added). Editor however does: http://editor.datatables.net/

    Allan
  • that is not what i wanted.Cant we do the validation on this plugin??????
  • Sure you can - but you need to add it :-).
  • 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.
  • It is just a presentation as you say :-). It is there to use as a base if you want to build it up into a more complete solution.

    If you want a ready-rolled package to save yourself the development time, you might consider looking at Editor: http://editor.datatables.net .

    Allan
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.