DataTables: Changing the appearance of the editabl

Question

Can someone help me to make editable cell "visible", so it could be clear it can be edited? Right now it looks like a simple text and nothing visually suggests, that it can be edited...I´d like to make it look like a standard text field.

Answer 1

This should work:

 var oTable = $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "/url/",
    "fnDrawCallback": function () {
        $('#example tbody td').editable( 'url', { // simple editable initialization
          "height": "14px",
        }); 

        $('#example tbody tr').each(function() {  
            $.each(this.cells, function(){
                $(this).click()  //by default all td's have bind for click function, so we simulate clicks for every td
            });
        });

        $('#example tbody td input').live('click', function(){
            $(this).select() // to select input
        })
     }
 });
  $.editable.types.defaults.reset = function (){   //this function disables reset input editing after submiting

  }

UPDATE:

I made a test sample here http://jsfiddle.net/94BZV/31/

Don't forget to put correct url in init of editable to get correct answer passed back to edit field.

Answer 2

are you want this in ASP.net or what? if yes then,if your text is in GridView then you have to set EDITINDEX Value to the rowindex value of the list,as if the EDITINDEX value is -1 then it is static mode then every thing will be displayed in label so you should change it value to Greater Than >-1 Then The Controls will be displayed in TextBoxes So then You can edit the Value in the Controls"