0

I'm trying to set a CSS class to rows in Slickgrid. I've looked up here and here, and created a test code according with this Slickgrid example. Here it is:

    var cols = [{ id: "id", name: "Report name", field: "Description", width: 600, sortable: true}];
    
    var options = {
       enableCellNavigation: true,
       enableColumnReorder: false,
       syncColumnCellResize: true,
       showHeaderRow: true,
       headerRowHeight: 30
    };

    $(function () {
      var data = [];
      for (var i = 0; i < 10; i++) {
        data[i] = {
            Description: "Task " + i
        };
      }
      data.getItemMetadata = function (index) {
        if (index == 0) {
            return { "cssClasses": "test" };
        }
      };
    
      grid = new Slick.Grid("#listV", data, cols, options);
      grid.setSelectionModel(new Slick.RowSelectionModel());
   });

The 'test' CSS class only colors the background of the row with red.

What happens is that when I load the page, I can see the first row flash with red for a second, but as soon as the page is loaded the background color is back to what it is for other rows.

What can be the issue here? Thanks a lot!

Community
  • 1
  • 1
tube-builder
  • 686
  • 1
  • 13
  • 29
  • 1
    It is possible that setting selection mode to RowSelectionModel() resets the CSS class 'test' applied to entire Row to default one. – rt2800 May 10 '12 at 08:07
  • @rt2800 Thanks for the suggestion, I'll try to find out if that's what caused the problem. – tube-builder May 10 '12 at 08:12
  • 1
    You probably just need to raise the specificity of your CSS class ("test"). – Tin May 10 '12 at 08:17
  • @Tin Thanks, Michael. I'm sorry I'm rather new to web programming, what do you mean by specificity? I tried to add !important to the CSS class, it didn't work. – tube-builder May 10 '12 at 08:26
  • !important should've done the trick if it was specificity-related. A complete jsfiddle.net test page will make it really easy to troubleshoot. – Tin May 10 '12 at 08:29
  • @Tin I tried to picture something in this jsfiddle example [here](http://jsfiddle.net/G4qQJ/17/). I think it's the problem of using Slickgrid inside JQuery UI Tabs, because without the tabs it seems to work. – tube-builder May 10 '12 at 11:01
  • If I uncomment the tabs code, nothing displays at all. – Tin May 10 '12 at 15:40

0 Answers0