Rails JqGrid

This Rails 3 Enginge allows you to use jQGrid into your applications with REST support. When used with rest sudgrids and details grids are treated as nestet resources. URL’s are constructect from mastergrid-url + selecedted id + detail/sub-grid-url.

It’ is bundled with jqGrid 3.7.2 and some themes. To use your custom themes put them under

RAILS_ROOTpublicstylesheetsrails-jqgridthemes

Usage

Controller

include RailsJqGrid::ActsAsJqGridAble
acts_as_jqgrid_able
order_by_cols :col_name1, :col_name2

def action
  ...
  relation = MyModel.order(order_by).limit(records_per_page).offset(current_offset)
  @records = relation.all

   respond_to do |format|
      format.html {  }
      format.xml {  }
      format.json {
        #for multiple pages
        render :json => jqgrid_json(:total_records => @total_records, 
                                    :default_records_per_page => @default_records_per_page,
                                    :data =>  @records)
        #or for a single page
        #render :json => jqgrid_json(:data =>  @records)
      }
   end
 end

 # or shorter
 respond_to :html, :json

 def action
   ...
   respond_with(jqgrid_json(:data =>  @records))
 end

View

<head>
  ...
  <%= jqgrid_stylesheets_tags(:theme => "start") %>
  <%= jqgrid_js_tags %>
  ...
</head>

...

<%=jqgrid("Article", "article", url_for(:action => "index"), :restful => true) do |a|

  a.autowidth true
  a.width 300
  a.height 500
  a.shrink_to_fit true
  a.row_num 10
  a.row_list [10,20,50,100]
  a.search true
  a.gridview true
  a.multiselect false

  a.on_select_row << "function(){alert('test');}"

  a.nav_grid do |n|
    # Defaults
    # n.add   true
    # n.del   true
    # n.edit  true
    # n.refresh true
    # n.search  true

    n.prm_edit do |p|
      p.close_after_edit  false
    end

    n.prm_add do |p|
      # set some options
    end

    n.prm_del do |p|

    end

    n.prm_search do |p|
    end

    n.prm_view do |p|
    end

    #Custom buttons
    n.custom_button do |b|
      b.caption "Columns"
      b.title  "Reorder Columns"
      b.on_click_button << "function (){ jQuery('##{a.dom_id}').jqGrid('columnChooser'); } "
    end

    #Toolbar searching
    n.filter_toolbar(true) do |filter_toolbar,b_t, b_c|
      filter_toolbar.before_search << "function (){ alert('Before Search');}"

      b_t.caption "Toggle"
      b_t.title "Toggle Search Toolbar"
      b_t.buttonicon 'ui-icon-pin-s'

      b_c.caption "Clear"
      b_c.title "Clear Search"
      b_c.buttonicon 'ui-icon-refresh'
    end

  end

  a.column "ean" do |c|
    c.label "EAN"
    c.autowidth true
    c.resizable true
    c.editable true
  end

  a.column "article_number" do |c|
    c.label "Article"
    c.resizable true
    c.editable true
  end

  a.jqgrid "Prices", "prices", url_for(:controller => :prices),
                               :url_append_ids => true,
                               :type => :sub_grid,
                               :restful => true do |p|
    p.autowidth true
    p.width 300
    p.height 500
    p.shrink_to_fit true
    p.row_num 10
    p.row_list [10,20,50,100]
    p.search true
    p.gridview true
    p.multiselect false

    p.on_select_row << "function(id,status){alert('test2');}"

    p.column "price" do
      c.autowidth true
      c.resizable true
    end

    p.column "valid_from"

  end

  a.jqgrid "prices_detail", "prices_detail",
                            url_for(:controller => :prices ,
                                    :action => "index"),
                            :caption_append_ids => true,
                            :type => :detail_grid do |p|
    p.autowidth true
    p.width 300
    p.height 500
    p.shrink_to_fit true
    p.row_num 10
    p.row_list [10,20,50,100]
    p.search true
    p.gridview true
    p.multiselect false

    p.on_select_row << "function(id,status){alert('test2');}"

    p.column "ean" do
      c.label "EAN"
      c.autowidth true
      c.resizable true
    end

    p.column "article_number" do
      c.label "Article"
      c.resizable true
    end

    # some columns with the same options
    p.columns "col1", "col2" , "col3", "col4" do |c|
      c.autowidth true
      c.resizable true
      c.editable true
      c.height "30px"
    end

    #alter options for one column
    p.column "col1" do |c|
      c.editable false
      c.height "40px"
    end
  end

end  %>

Model

class MyModel < ActiveRecord::Base
  self.include_root_in_json = false
end

I18N