Cell's background-color

[Bruno Larose]

Hello,

I have the situation above (based on the demo) :

In the scheduler, we have 3 groups (Alex, Bob and Charlie), sometimes Alex has a freetime to do work stuff from 8pm - 10pm and he works with clients from 12pm-4pm, i wanna change the the cell's background color on this timeranges (work stuff (red) / work with clients (yellow) / the rest (light blue)).

 Is there anyway or good practice to do this?

Thanks for the attention!

[Vladimir Iliev]

Hi Bruno,

You can achieve the desired behavior using the "dataBound" event of the scheduler to iterate over the cells and apply the desired styles based on the underlying slot object (which is get using the "slotByElement" method). Please check the example below:

dataBound: function(e) {
    var container = this.view().element;
    var cells = container.find("td[role=gridcell]");

    for (var i = 0; i < cells.length; i++) {
        var cell = $(cells[i]);
        var slot = this.slotByElement(cell);
        var startHour = slot.startDate.getHours();
        var endHour = slot.endDate.getHours();

        //this is basic example
        //you sould check hours and minutes information as well
        if (startHour > 8 && endHour <= 10 && slot.groupIndex === 0) {
            cell.css("background", "red");
        } else {
            cell.css("background", "green");
        }
    }
},

Regards,
Vladimir Iliev
Telerik

 

 

[Michel]

Hi,

I have the same kind of need but with a lot more resources, and while it works, I'm facing a major perfomance issue.

The quite basic code above takes a significant time to execute (I measured 0.3sec for a weekview with 4 resources leading to over 600 cells), and the real life cases I have to deal with (up to 10 resources and dynamic and recurring ranges to repaint) lead to ui refreshing delays exceeding 1 sec. I also measured that the most time consuming instruction is the call to slotByElement() (about 80% of the time is spent in that function in the code above)

While it remains tolerable in most every day situations, I have scenarios where the invalid ranges (i.e. the ranges that should have their color changed) are updated on a dragstart event (to show where the dragged appointment can or cannot be dropped).

In those cases, such 1+ sec ui delays simply render the hole feature unusable.

Is there another way to achieve the same result but that would impact ui performances significantly less?

 

Regards

Thierry

 

 

[Vladimir Iliev]

Hello Thierry,

In your current scenario I would suggest to create custom view by extending one of the build-in ones and apply the desired styles to the cells during the view rendering as this will improve the initial rendering performance significantly.  For example of creating custom views you can check the demos in our CodeLibrary.

Also for the "move" / "resize"  case you should find another way to check if given slot is in use instead of accessing all slots using the "slotByPosition" method (I logged this method for optimization by our dev team). Such example is to check for given CSS class applied during the rendering. Another example is to implement more efficient way of searching the slot collections available in the view.

Regards,
Vladimir Iliev
Telerik