Hi Thiago,
Currently, there is no direct support to apply background color as shown in the attached screenshot.
But we can achieve this by the work-around solution. We can increase the width of the element with class
e-left-arc and apply background color for an element with class
e-rg-rangediv. We have achieved this by
using
dataBound event in load time. We can also update this on certain actions like expanding, collapsing records, add/edit records using
expanded,
collapsed,
actionComplete event respectively.
Please find the below code example.
|
[index.html]
<style>
.e-rg-rangdiv {
z-index: 0 !important;
background: orange;
}
</style>
[index.js]
var ganttChart = new ej.gantt.Gantt({
//...
dataBound: function (args) {
updateOverlappedElement();
},
actionComplete: function (args) {
if (args.requestType == 'save') {
updateOverlappedElement()
}
},
});
function updateOverlappedElement() {
var leftElement = document.getElementsByClassName('e-rg-rangdiv e-leftarc');
var rightElement = document.getElementsByClassName('e-rg-rangdiv e-rightarc');
for (var count = 0; count < leftElement.length; count++) {
leftElement[count].style.width = (rightElement[count].offsetLeft - leftElement[count].offsetLeft) + 'px';
}
}
|
Regards,
Pooja K.
