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

cssClassPrefix overrides resource tree backColor

Asked by Chris
28 days 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]
28 days 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
27 days 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]
27 days 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
27 days 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
27 days 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]
27 days 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
27 days ago.

Yep that works. Thanks!!

Comment posted by Dan Letecky [DayPilot]
27 days ago.

Great, thanks for the update!

New Reply
This reply is
Your name (optional):