Meet Netzke::Basepack::GridPanel

Code of this view

Below is an instance of GridPanel, which by default provides for:

Code (in the view):

netzke :bosses,
  :class_name => "Basepack::GridPanel",
  :model => 'Boss'

Result:

Control over columns

If you need more control over which columns to display and how, you can provide :columns option:

netzke :bosses_custom_columns,
  :class_name => "Basepack::GridPanel",
  :model => 'Boss',
  :title => "Bosses",
  :width => 400,
  :columns => [
    :last_name,
    {:name => :salary, :read_only => true, :label => "$", :renderer => 'usMoney'},
    {:name => :email, :width => 180}]

Result:

Associations, Rails validations, "virtual" columns, and more

Here's an example that demonstrates:

  • how GridPanel handles one-to-many associations
  • usage of "virtual" attributes (model's instance methods)
  • usage of the getter column configuration option
  • usage of the scope column configuration option (for filtering combobox options)
  • Rails' validations in action
    • # Model
class Clerk < ActiveRecord::Base
  belongs_to :boss
  validates_presence_of :first_name
  validates_presence_of :last_name
  # a virtual attribute
  def name
    "#{last_name}, #{first_name}"
  end
  def updated
    updated_at > 5.minutes.ago
  end
end
# Extend GridPanel to be specific about the model and columns we want to display
class ClerkGrid < Netzke::Basepack::GridPanel
  css_include :main
  def configuration
    super.merge({
      :model => "Clerk",
      # Declaring columns
      :columns => [
        {
          :name => :name,
          :renderer => "uppercase",
          :width => 200
        },
        :first_name,
        :last_name,
        {
          :name => :updated_bulb,
          :width => 40,
          :label => "<div class='bulb-off' />",
          :tooltip => "Recently updated",
          :getter => lambda { |r|
            bulb = r.updated ? "on" : "off"
            "<div class='bulb-#{bulb}' />"
          }
        },
        :email,
        {
          :name => :boss__last_name,
          :scope => {:salary.gt => 95000},
          :header => "Boss"
        }
      ]
    })
  end
end
# In the view:
netzke :clerk_grid

    Result:

    Permissions

    You can specify which actions are allowed for this grid 
    netzke :bosses_with_permissions,
  :class_name => "Basepack::GridPanel",
  :model => 'Boss',
  :prohibit_update => true,
  :prohibit_delete => true

    Result:

    A word about the security: it's not only about disabling buttons. Even if the user manages to submit a prohibited operation, the server side of the widget will block the attempt.

    Configuring the bars

    You can easily customize the bottom bar, or even move the actions to the top bar.

    netzke :clerks_with_custom_bottom_bar,
    :class_name => "Basepack::GridPanel",
    :model => 'Clerk',
    :bbar => nil,
    :tbar => [{
      :menu => [:add.action, :edit.action, :apply.action, :del.action],
      :text => "Edit inline",
      :icon =>"/images/icons/table.png"
    },{
      :menu => [:add_in_form.action, :edit_in_form.action],
      :text => "Edit in form",
      :icon => "/images/icons/application_form.png"
    }]

    Result:

    Get the code

    Netzke framework consists of 2 Rails plugins/Ruby gems: netzke-core and netzke-basepack. Get them on the GitHub along with the source code for this demo: http://github.com/skozlov

    The news about Netzke development and more tutorials on http://blog.writelesscode.com

     

     

    --- The following links alter test data (the page will be reloaded):

    regenerate test data

    reset configs (e.g. columns configurations, permissions, etc )