Add column ID css classes to TD's about jquery-bootgrid HOT 6 OPEN

@claar There is already something you could use (data-row-id on tr's). data-row-id is eather equal your column identifier or an incremental integer value.

The current version renders rows like this:

<tr data-row-id="pid-0">
    <td class="text-left id">Person ID</td>
    <td class="text-left age">Age</td>
</tr>

To style a specific cell like the id field above you could use the following CSS selector tr[data-row-id='pid-0'] > .id.

Anyway I will consider an CSS class on tr's to support even older browsers.

from jquery-bootgrid.

Actually, I was requesting classes on the td, not the tr. I must be on an old version, as the rows render without the id and age classes your example shows. I'll upgrade -- thanks. You can close this issue as far as I'm concerned.

from jquery-bootgrid.

I am on the latest version, v1.1.4, and am having the same issues as @james-claar with adding CSS classes to my td cells. When I give a class to my td like this:

<td class="student_name"><%= student.name %></td>

It still renders on the page like this:

<td class="text-right">Firstname Lastname</td>

Here's where I'm initializing bootgrid, though I didn't see anything in there that would be causing this behavior:

$('.students .grid').bootgrid
  selection: true
  multiSelect: true
  rowSelect: true
  keepSelection: true

  labels:
    noResults: 'This class has no students'

  templates:
    header: "
      <div id=\"header-actions\" class=\"{{css.header}}\">
        <div class=\"row\">
          <div class=\"col-md-6\">
            <div class=\"btn-group\">
              <button id=\"move-students\" class=\"btn btn-default\" disabled=\"disabled\" data-action-button>Manage Students</button>
              <button id=\"request-refund\" class=\"btn btn-default\" disabled=\"disabled\" data-action-button>Request Refund</button>
              <button id=\"export\" class=\"btn btn-default\">Export</button>
            </div>
          </div>
          <div class=\"col-sm-6 actionBar\">
            <p class=\"{{css.search}}\"></p><p class=\"{{css.actions}}\"></p>
          </div>
        </div>
      </div>"

This is within Rails 4.2.0 if that makes a difference. Any ideas? Something obvious I'm missing?

from jquery-bootgrid.

OK, so I think I got this working, but I did need to hack into bootgrid a bit. column.cssClass was coming up blank no matter whether I defined a class on a td element or not, so in the loadRows function, I manually set the class from the cells onto the column.cssClass.

I don't know if this is a bug or expected behavior or what, but now it's working the way I expected it to. I can define a class for my td element in my HTML view, and the class shows up properly in the bootgrid table that is rendered.

I'll put up a PR for this change in case this is a bug. If it's not, then feel free to close/reject.

from jquery-bootgrid.

Ah, I see how to do this without changing the bootgrid code. The cssClass has to be specified as a data attribute on the column header. So, in my example above, when I added this to my student name th element-

<th data-column-id='name' data-css-class='student_name'>Name</th>

It gave all of the name cells the student_name class. I'm still going to put up my PR because that approach feels more intuitive to me, but I'll leave it to your discretion.

from jquery-bootgrid.

Well, nevermind about the PR. It made sense in my case because I'm looping through students and adding them, so the td classes wouldn't change, but if someone tried to set different classes for different cells in the same column, it would only take the last one.

Disregard my late night ramblings 😜 I would suggest clarifying this functionality in the documentation, though.

from jquery-bootgrid.