Some handler or method to run after cell rendering on scroll

Asked by DG
12 years ago.

I apply some custom highlighting on the daypilot cells when the date/time is changed.

My problem is on initial load, not all the daypilot cells are properly loaded (for performance optimization reasons i guess), so when I do my processing of the cells, the cells which are not in the current scroll view are not processed (styled as required). Then when i scroll down, for instance, those cells do not show my styling (please see the attached screenshot - all the cells in the highlighted columns should be highlighted).

I checked dps.afterRender does not get called on scroll. Is there something else I can do regarding this? Or can anything be added to handle this? I just need all of the cells to have my styling based on some fields on the page.

My last resort would be to add the 'scroll' handler on the containing div, but I don't how much good that would be performance-wise.

feature mvc

highlights-after-render.png

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

How do you highlight the cells?

If you use BeforeCellRender (http://doc.daypilot.org/scheduler/cell-customization/) the custom styles will be applied properly no matter when they are rendered. If they are not it might be a bug.

Comment posted by DG
12 years ago.

I'm highlighting the cells through javascript, after the scheduler is loaded. That's because I need to change the highlights based on some selected time on the page.

Answer posted by Dan Letecky [DayPilot]
12 years ago.

There is a new cell-accessing API in the works which you can use. It is available in the latest MVC sandbox build (7.5.5597):

http://mvc.daypilot.org/sandbox/Scheduler/

You can use the following API:

dps.cells.find(start, resourceId)
dps.cells.findXy(x, y)

These methods will return jQuery-like objects which you can use to modify the cell properties:

dps.cells.find("2013-09-01", "A").cssClass("sunday");  // add .sunday class to this cell
dps.cells.findXy(0, 0).cssClass("sunday");  // add .sunday class to this cell

At this moment it only selects one cell specified using its coordinates but it will be possible to select whole rows or columns (and possibly use other selectors). Something like this:

dps.cells.find("2013-09-01").cssClass("sunday");  // not implemened yet

It is possible to use the following methods on the returned class:

.cssClass() -- adds a CSS class to the cell div
.html() -- modifies the cell HTML
.each() -- applies a custom function to all the found cells

It is possible to chain the method calls:

dps.cells.find("2013-09-01").cssClass("sunday").html("free");

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