Wice Grid Example on Rails 4: Simplest Possible Grid for an ActiveRecord

Wice Grid Example on Rails 4: Simplest Possible Grid for an ActiveRecord

Last updated:

These are the steps you need to follow in order to have a simple yet functioning grid (using wice_grid plugin) for an ActiveRecord in a Rails app.

  • In your Gemfile:

    gem 'wice_grid','~> 3.4.3'
    
  • Run bundler:

    $ bundle install
    
  • By installing the gem, some generators became available for you. You need to run wice_grid:install so that the required files are added to your project:

    $ rails g wice_grid:install
        create  config/initializers/wice_grid_config.rb
        create  config/locales/wice_grid.yml
        create  app/assets/stylesheets/wice_grid.css.scss
    
  • Add wice_grid to file app/assets/javascripts/application.js (just the relevant part of the file is shown):

    //= require jquery
    //= require wice_grid
    

    (yes, your syntax highliter says it's comments but rails can read it!)

  • Creating a simple grid based on an ActiveRecord model. Let's say you have a model named Post:

    • controller action

      def index
          @grid = initialize_grid(Post)
      end
      
    • view code (erb)

      <%= 
          grid(@grid) do |g|
             g.column name: 'Title' do |p|
               p.title
             end
             g.column name: 'Author' do |p|
               p.author
             end
          end
       %>
      
  • Make sure you restart the builtin server ($ rails s) - in case it was already running prior to your making these modifications - in order to see the modifications.

References