WiceGrid 3.6.0.pre4 examples

Styling the grid

  • :html in the grid helper defines html arguments for the table tag.
  • :header_tr_html in the grid helper defines html attributes for the header rows with column names and filters.
  • :html in the column helper defines html attributes for the td tag.
  • g.row_attributes do |record| ... end is similar to a column definition, but returns a hash of html attributes to be added to each tr. Because the block is evaluated for each record, just like , the returned value can be calculated dynamically depending on the record.
  • Each column block can return a 2-value array, the first value of which is the content of the cell, and the second is a hash of html attributes for the td tag.
  • # encoding: utf-8
    class StylingController < ApplicationController
      def index
        @versions_grid1 = initialize_grid(Version, name: 'g1')
        @versions_grid2 = initialize_grid(Version, name: 'g2')
      end
    end
    
  • <%= grid(@versions_grid1, html: {class: 'my-grid'}, header_tr_html:  {class: 'my-header'}) do |g|
    
      g.column name:  'ID', attribute: 'id', filter: false
    
      g.column name:  'Project', attribute: 'name', assoc: :project do |version|
        version.project.name if version.project
      end
    
      g.column name:  'Version name', attribute: 'name', html: {style: 'font-weight: bold; text-align: center'}
    
      g.column name:  'Status', attribute: 'status', custom_filter: {'Development' => 'development', 'Testing' => 'testing', 'Production' => 'production'}
    end -%>
    
  • <%= grid(@versions_grid2) do |g|
    
      g.row_attributes do |version|
        if version.status == 'production'
          {style: 'background-color: rgb(255, 255, 204);'}
        end
      end
    
      g.column name:  'ID', attribute: 'id', filter: false do |version|
        if version.id.to_s.index('9')
          [version.id, {style: 'background-color: rgb(255, 105, 104);'}]
        else
          version.id
        end
      end
    
      g.column name:  'Project', attribute: 'name', assoc: :project, class: 'special-column' do |version|
        if version.project
          if version.project.name == 'Divine Firmware'
            [version.project.name , {style: 'background-color: rgb(255, 105, 104);', class: 'some-special-class'}]
          else
            version.project.name
          end
        end
      end
    
      g.column name:  'Version name', attribute: 'name'
    
      g.column name:  'Status', attribute: 'status', custom_filter: {'Development' => 'development', 'Testing' => 'testing', 'Production' => 'production'}
    end -%>
    
    
  • :css
      table.my-grid {
        border: 1px solid red;
      }
      table.my-grid tr.my-header {
        background-color: #ebebeb;
      }
    
    
    .well
      %h2= current_page_title
      %ul
        %li
          %code :html
          in the
          %code grid
          helper defines html arguments for the
          %code table
          tag.
    
        %li
          %code :header_tr_html
          in the
          %code grid
          helper defines html attributes for the header rows with column names and filters.
    
    
        %li
          %code :html
          in the
          %code column
          helper defines html attributes for the
          %code td
          tag.
    
    
        %li
          %code g.row_attributes do |record| ... end
          is similar to a
          %code column
          definition, but returns a hash of html attributes to be added to each
          %code tr.
          Because the block is evaluated for each record, just like
          %column
          , the returned value can be calculated dynamically depending on the record.
    
        %li
          Each
          %code column
          block can return a 2-value array, the first value of which is the content of the cell, and
          the second is a hash of html attributes for the
          %code td
          tag.
    
    = show_code
    
    
    .row-fluid
      .col-md-12
        = render   'grid1'
    
    
    .row-fluid
      .col-md-12
        = render   'grid2'
    
IDProjectVersion nameStatus
1-11 / 11
16Ultimate Website3.0testing
15Ultimate Website2.0development
14Ultimate Website1.2development
13Ultimate Website1.1testing
12Ultimate Website1.0testing
19Super Game99.0testing
18Super Game88.1development
17Super Game1.0development
22Divine Firmware8.0production
21Divine Firmware7.1development
20Divine Firmware6.0production
IDProjectVersion nameStatus
1-11 / 11
21Divine Firmware7.1development
18Super Game88.1development
17Super Game1.0development
15Ultimate Website2.0development
14Ultimate Website1.2development
22Divine Firmware8.0production
20Divine Firmware6.0production
19Super Game99.0testing
16Ultimate Website3.0testing
13Ultimate Website1.1testing
12Ultimate Website1.0testing

Fork me on GitHub