Is it possible to customize the column header (<th>) elements?

[gfaraj]

I want a column to contain more than just text - maybe an icon or a link to another page. I would also like to style column headers (change the text alignment for one column, for example).

Is this at all possible with wice?

[MirkoMignini]

Hi, I did this today, you can put all you want in the column: for example a link

- g.column :name => 'title', attribute: 'title' do |obj|
  - link_to ...

or html tags

- g.column :name => 'title', attribute: 'title' do |obj|
  - content_tag(:b) do
    - obj.title

or you can put your complex column contents in a partial and render it

- g.column :name => 'title', attribute: 'title' do |obj|
  - render ''partial_name'

to style the header instead you can simply use the css

[gfaraj]

Yes, I meant the actual column header, not the column data. How can you style the headers?

[MirkoMignini]

Ooppsss sorry I thought that you mean how to customize column data. For the header I didn't find a solution, perhaps you can inherit the grid object, but I hope that the author will provide a better solution.

[leikind]

The contents oh the table headers is under control of the plugin. To change it you have to write your own column processor https://github.com/leikind/wice_grid/tree/rails3/lib/wice/columns

As for styling elements with CSS why would you need anything special from the plugin itself?

[gfaraj]

@leikind The column processor seems to be for customizing how values are rendered / filtered for a specific type of column. I don't want to do that.

I merely would like to change the column header element, <th> to apply it a different CSS class than the rest of the columns.

So, for example, instead of rendering this:

  <table class="table-striped table-bordered table wice-grid my-grid">
    <thead>
      <tr class="wice-grid-title-row my-header">
        <th><a href="?g1%5Border%5D=id&amp;g1%5Border_direction%5D=asc">ID</a></th>
        <th>
          <a href="?g1%5Border%5D=name&amp;g1%5Border_direction%5D=asc">Project</a>
         </th>
         <th>
           <a href="?g1%5Border%5D=name&amp;g1%5Border_direction%5D=asc">Version name</a>
         </th>
       </tr>
     </thead>
  </table>

It would render this:

  <table class="table-striped table-bordered table wice-grid my-grid">
    <thead>
      <tr class="wice-grid-title-row my-header">
        <th><a href="?g1%5Border%5D=id&amp;g1%5Border_direction%5D=asc">ID</a></th>
        <th class="mycenterclass">
          <a href="?g1%5Border%5D=name&amp;g1%5Border_direction%5D=asc">Project</a>
         </th>
         <th>
           <a href="?g1%5Border%5D=name&amp;g1%5Border_direction%5D=asc">Version name</a>
         </th>
       </tr>
     </thead>
  </table>

Currently I have no idea how to simply add a class to a specific <th> element. Is this possible? I would use it to center a specific column - the values and the header must be centered, not just the values.

Currently, you can just specify a column name as a string through "g.column name: 'foo'" but can't add something that's not a string, for example. I wanted the element to be something like this:

  <th>
    <a href="?g1%5Border%5D=name&amp;g1%5Border_direction%5D=asc">Amount Due</a>
    <div class="mycaptionclass">$50 / person</div>
  </th>

Currently, I can't add that <div> to the header. It'd be nice if we could do that. I feel this should all be a parameter to the column method of the grid.

[leikind]

Adding a css class to a column, that is, all its td and th tags is easy and is described in the readme. Please take a look at the second table in this example: http://wicegrid.herokuapp.com/styling

All td and th of the second column have class special-column.

Click on the corresponding link on the page to see the code

[gfaraj]

Are we looking at the same example? Because I only see <td> elements with that class, not the <th> element.

edit: Sorry, I misread "second table" - I was looking at the first one. I must have gotten confused by that, then, since I had already seen these examples. Thanks!

What about the other thing I mentioned, being able to add more content than just a string to the column header?

[leikind]

the second thing is currently not possible without writing your own column processor. Which is actually not that difficult, and I recently added a capability to use column processors outside of the plugin, defined in your app. It's just that there is no documentation about it at the moment.

[leikind]

Or you could modify the markup dynamically with $(el).html(content), which is of course a dirty hack :)

[gfaraj]

Yup, I was trying to avoid that :)

I think I found a bug with the class option on the column. It only seems to work when you specify an attribute option as well. For columns without the attribute set, the class option is useless. Is this by design?

[leikind]

You right, it is a bug. The fix is coming.

[gfaraj]

Cool, thanks!

[leikind]

fixed https://github.com/leikind/wice_grid/commit/26fda6ed8f1f8745c6c212de89f144c21c4e76cd

thanks for finding it!

[gfaraj]

I'm using:

gem "wice_grid", '3.2.1'

in my Gemfile, like the documentation says. Is there any way to make it grab the latest version from github?

[gfaraj]

Yup, confirmed that it works with:

gem 'wice_grid', :git => 'git://github.com/leikind/wice_grid.git', :branch => 'rails3'

[leikind]

Yes, this should work.

3.2.1 is pretty old

[gfaraj]

I think you should probably update the README then. Maybe an example for each version of Rails or something.

[leikind]

What exactly in the README?

On Tue, Feb 25, 2014 at 6:54 PM, George Faraj notifications@github.comwrote:

I think you should probably update the README then. Maybe an example for each version of Rails or something.

Reply to this email directly or view it on GitHubhttps://github.com/leikind/wice_grid/issues/136#issuecomment-36037202 .

Best regards, Yuri Leikind

Sent from my Nokia 3310

[gfaraj]

Currently, the README says:

Installation

Add the following to your Gemfile:

gem "wice_grid", '3.2.1'

and run the bundle command.

[leikind]

Installing gems from sources using Bundler is common knowledge not special to WiceGrid.

[afdev82]

Sorry for reopening this... I try to add a class to a header column, but WiceGrid adds it twice. With no class option, it adds an empty class attribute to the th element. I'm using WiceGrid 3.4.2, Rails 3.2.18 and the following code:

 grid(@suppliers, allow_showing_all_records:  false) do |g|
   g.column class: 'radio-column' do |task|
      radio_button :user, :supplier_id, task.user_id
    end

    g.column name: t('global.username'), attribute: 'email', class: 'username-column' do |supplier|
      supplier.email
    end

    g.column name: t('global.role'), class: 'role-column' do |supplier|
      supplier.role.name
    end

    g.column name: t('global.country'), class: 'country-column' do |supplier|
      supplier.contact.country.translated_name
    end
  end

Thanks in advance.