How to hightlight non editable backgrid cells?

Question

I am using backbone and backgrid.

I want to make some backgrid cells non editable and highlight them.

And i am looking for a simple css property over those cells.

But unfortunately backgrid does not impose any specific class to the non editable cells.

This is the rendered one backgrid row itself from backgrid website : http://backgridjs.com/ and we know id field is non editable here :

    <tr>
<td class="integer-cell">1</td>
<td class="string-cell">Afghanistan</td>
<td class="integer-cell">25,500,100</td>
<td class="number-cell">0.36</td>
<td class="date-cell">2013-01-01</td>
<td class="uri-cell"><a tabindex="-1" href="http://en.wikipedia.org/wiki/Afghanistan" title="http://en.wikipedia.org/wiki/Afghanistan" target="_blank">http://en.wikipedia.org/wiki/Afghanistan</a></td>
</tr>

Now how do i achieve the same??

Answer 1

Those cells which you dont want to make editable, add some class to them and then go to source code of backgrid.js and find the function which enabled the editmode, I dont know exactly which function handling that, may be

render: function () {
enterEditMode: function () {

and then check the class name for that cell like

$("#mydiv").hasClass("dont_edit"); OR this.hasClass("dont_edit");

if so then just "return" otherwise allow editing. You have to solve it by trial and error basis, until someone helps you with exact code. Better start helping yourself till then.

Answer 2

Backgrid.Cell#initialize has the following code

if (Backgrid.callByNeed(column.editable(), column, model)) $el.addClass("editable");

This means that all editable cells have "editable" css class. wherease all non-editable cells do not have this class.

So, by applying CSS selector like the one below I was able to style non-editable cells as I wanted:

backgrid td.renderable:not(.editable) {
   background-color: gray
}