activeadmin tweks Editable line

active_admin.css.scss

input.editable_text_column {
  background-color: #FBFF8C;
  border: 1px none #FBFF8C;
  box-shadow: 0 2px 19px #AAAAAA;
  color: black;
  display: none;
  font-family: serif;
  font-size: 1em;
  font-style: italic;
  height: 30px;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  width: 180px;
  z-index: 9090;
}
 
div.editable_text_column{
  padding:4px;
  background-color: #f9fbc2;
}

active_admin.js

var admin = {
 
  init: function(){
    admin.set_admin_editable_events();
  },
 
  set_admin_editable_events: function(){
    $(".admin-editable").live("keypress", function(e){
      if ( e.keyCode==27 )
        $( e.currentTarget ).hide();
 
      if ( e.keyCode==13 ){
        var path        = $( e.currentTarget ).attr("data-path");
        var attr        = $( e.currentTarget ).attr("data-attr");
        var resource_id = $( e.currentTarget ).attr("data-resource-id");
        var val         = $( e.currentTarget ).val();
 
        val = $.trim(val)
        if (val.length==0)
          val = " ";
 
        $("div#"+$( e.currentTarget ).attr("id")).html(val);
        $( e.currentTarget ).hide();
 
        var payload = {}
        resource_class = path.slice(0,-1) // e.g. path = meters, resource_class = meter
        payload[resource_class] = {};
        payload[resource_class][attr] = val;
 
        $.put("/admin/"+path+"/"+resource_id, payload).done(function(result){
          console.log(result);
        });
      }
    });
 
    $(".admin-editable").live("blur", function(e){
      $( e.currentTarget ).hide();
    });
  },
 
  editable_text_column_do: function(el){
    var input = "input#"+$(el).attr("id")
 
    $(input).width( $(el).width()+4 ).height( $(el).height()+4 );
    $(input).css({top: ( $(el).offset().top-2 ), left: ( $(el).offset().left-2 ), position:'absolute'});
 
    val = $.trim( $(el).html() );
    if (val==" ")
      val = "";
      
    $(input).val( val );
    $(input).show();
    $(input).focus();
  }
}
 
$( document ).ready(function() {
  admin.init();
});

article.rb

ActiveAdmin.register Article do
  index do
    selectable_column
    id_column
    column :name, :sortable => :name do |resource|
      editable_text_column resource, :name
    end
    column :article_type
    column :created_at
    column :updated_at
    default_actions
  end
end

custom_columns.rb

module ActiveAdmin
  module Views
    class IndexAsTable < ActiveAdmin::Component
      def editable_text_column resource, attr
        val = resource.send(attr)
        val = "&nbsp;" if val.blank?
 
        html = %{
                  <div  id='editable_text_column_#{resource.id}' 
                        class='editable_text_column' 
                        ondblclick='admin.editable_text_column_do(this)' >
                        #{val}
                   </div>
 
                   <input 
 
                      data-path='#{resource.class.name.tableize}' 
                      data-attr='#{attr}' 
                      data-resource-id='#{resource.id}' 
                      class='editable_text_column admin-editable' 
                      id='editable_text_column_#{resource.id}' 
 
                      style='display:none;' />
              }
        html.html_safe
      end