search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

cssClassPrefix overrides resource tree backColor

Asked by Chris
9 months ago.

When I use cssClassPrefix and change the theme, I lose my background color on the resource grouped (disabled) cells that go across the scheduler.

The first attachment (all green across) is what I want and works without cssClassPrefix... once I set cssClassPrefix, it looks like the second attachment..

Comment posted by Dan Letecky [DayPilot]
9 months ago.

It looks like a style definition problem. The style from the theme seems to get a higher priority in this case.

What CSS do you use for the green background for the grid cells? You may want to add !important or use a more specific selector.

Comment posted by Chris
9 months ago.

The green background is coming from the resources array backColor setting.

dp.resources = [
    { name: "Example", id: "Example", expanded: true, 'backColor' => "#5CB673", children:[
        { name : "Tool 1", id : "Tool1" },
        { name : "Tool 2", id : "Tool2" }
      ] 
    }
]

I'm using a custom css that i created from the theme designer...which when I enable, it overrides the backColor from resources array...

Can you tell me the css class i would have to set z-index lower for the css sheet or vice versa for resources backColor ?

Comment posted by Dan Letecky [DayPilot]
9 months ago.

The resources[].backColor property only affects the row header (on the left side). The background of the grid cells needs to be set using onBeforeCellRender event handler - how does your implementation look like?

Comment posted by Chris
9 months ago.

Well... it did make all cells at the top green if i don't use a custom theme... maybe it's because it's the parent resource that backColor fills in all the cells on the same row?

Comment posted by Chris
9 months ago.
I'm only thing i'm using onBeforeCellRender is changing cell background for stat holidays:
dp.onBeforeCellRender = function(args) {
  var cellDate = moment(args.cell.start.value).format("YYYY-MM-DD");
  
  if (jQuery.inArray(cellDate, holidayArr) !== -1) {
    
    args.cell.backColor = "#FF9595";
    args.cell.html = "<div style='text-align: center; font-weight: bold; color: #7A7A7A;'>** HOLIDAY **</div>";
  }
};
Answer posted by Dan Letecky [DayPilot]
9 months ago.

You can extend your onBeforeCellRender like this to apply the green background color:

dp.onBeforeCellRender = function(args) {

   var row = dp.rows.find(args.cell.resource);
   if (row.data.backColor) {
     args.cell.backColor = row.data.backColor;
   }

  var cellDate = moment(args.cell.start.value).format("YYYY-MM-DD");
  
  if (jQuery.inArray(cellDate, holidayArr) !== -1) {
    
    args.cell.backColor = "#FF9595";
    args.cell.html = "<div style='text-align: center; font-weight: bold; color: #7A7A7A;'>** HOLIDAY **</div>";
  }
};

The parent rows are marked with "scheduler_default_cellparent" class. Maybe you have added the green background this way? When you apply a theme this class changes to "yourtheme_cellparent".

Comment posted by Chris
9 months ago.

Yep that works. Thanks!!

Comment posted by Dan Letecky [DayPilot]
9 months ago.

Great, thanks for the update!

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.