Search code examples
javascriptcssbackbone.jsbackgrid

How to hightlight non editable backgrid cells?

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??

Solution

  • 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.