How to add cssClass property per rowHeaderColumn in Tabular mode

Asked by Giliam
4 years ago.

In Legacy mode, we were able to add the additional cssClass property per rowHeaderColumn, so we could give a particular rowHeaderColumn a background depending on some data.

resources : [{
   id: 1,
   name: 'abc',
   columns: [
       { html: 'def', cssClass: 'dark' },   // This would appear in the second rowHeaderColumn
       { html: 'ghi', cssClass: 'light' }  // This would appear in the third rowHeaderColumn
   ]
}];

Is it still possible in tabular mode somehow? I don't see how it will fit in the example below:

resources = [
   { id: "101", name: "Room 101", location: "Floor 1", type: "single" }
];

resource = [
   { id: "101", tags: { name: "Room 101", location: "Floor 1", size: "2 beds" } }
];

A concept solution could be to add some extra data in the json result and use the DayPilot.Scheduler.onBeforeResHeaderRender event to read that data and apply the cssClass from there, but that seems a bit odd while it was natively available in the Legacy mode.

Could you help me out to find the correct solution?

Thanks in advance!

Answer posted by Giliam
4 years ago.

Ok, I played a few hours, looked at the new resource object in tabular mode and came to the following solution.

Note that I removed the 'display' attribute, to make sure DayPilot looks at the columns[] definition, like in Legacy mode.

rowHeaderColumns : [
    { name: 'Column1' , width: 150, sort: 'column1'} ,
    { name: 'Column2' , width: 75 , sort: 'column2'},
    { name: 'Column3' , width: 75 , sort: 'column3'} 
  ];

resources : [{
   id: 1,
   columns: [
       { text: 'abc' } // This would appear as the first rowHeaderColumn (only in Tabular mode)
       { text: 'def', cssClass: 'dark' },   // This would appear in the second rowHeaderColumn
       { text: 'ghi', cssClass: 'light' }  // This would appear in the third rowHeaderColumn
   ],
   tags: { column1: 'abc',   // These are added to use built-in sorting
               column2: 'def',   // These are added to use built-in sorting
               column3: 'ghi' }  // These are added to use built-in sorting 
}];

So it is a slightly different interpretation.

What I don't know is whether this is a correct solution, or that I found a non-supported way by mixing the two modes and could possibly break in future release.

Comment posted by Dan Letecky [DayPilot]
4 years ago.

The rowHeaderColumns[].display value will be only used if resources[].columns is not defined. It is possible to combine both approaches like in your example.

The only thing which is enforced in the Tabular mode is the column numbering. In the Tabular mode, the first column[] item will be displayed in the first column, not in the first additional (second) column like in the Legacy mode.

Comment posted by Giliam
4 years ago.

Thanks for you reply, good to know.

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

How to add cssClass property per rowHeaderColumn in Tabular mode

Products

Learn

Get Support

DayPilot Pro