Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
149513 | Nov 28,2019 11:28 AM UTC | Dec 4,2019 06:01 AM UTC | Angular - EJ 2 | 3 |
![]() |
Tags: Schedule |
Hi,
I want to put progress bar to the right side of the all project names. How can I achieve this ? Please find attached a sample image.
onDataBound() {
var schObj = (document.querySelector('.e-schedule') as any).ej2_instances[0];
let resource1_Data: Object[] = [];
let resource2_Data: Object[] = [];
for (let i: number = 0; i < schObj.eventsData.length; i++) {
if (schObj.eventsData[i].ProjectId == 1) {
resource1_Data.push(schObj.eventsData[i]);
} else {
resource2_Data.push(schObj.eventsData[i]);
}
}
var eventRows = document.querySelectorAll('.e-event-table .e-appointment-container');
var width = (document.querySelector('.e-content-table tbody tr') as HTMLElement).offsetWidth;
var height = (document.querySelector('.e-content-table tbody tr') as HTMLElement).offsetHeight;
// To create progress bar for resource Project 1
var div1 = document.createElement("div");
div1.innerHTML = "" + resource1_Data.length + "%";
div1.classList.add('e-project1');
div1.style.top = (document.querySelector('[data-group-index="0"]') as HTMLElement).offsetTop + 'px';
div1.style.width = width + 'px';
div1.style.height = height + 'px';
div1.style.background = 'red';
div1.style.color = 'white';
div1.style.textAlign = 'center';
div1.style.fontSize = 'medium';
div1.style.borderRight = '' + ((100 - resource1_Data.length) / 100) * parseInt(div1.style.width) + 'px solid black';
div1.style.position = 'absolute';
eventRows[0].appendChild(div1)
// To create progress bar for resource Project 2
var div2 = document.createElement("div");
div2.innerHTML = "" + resource2_Data.length + "%";
div2.classList.add('e-project2');
div2.style.top = (document.querySelector('[data-group-index="3"]') as HTMLElement).offsetTop + 'px';
div2.style.width = width + 'px';
div2.style.height = height + 'px';
div2.style.background = 'red';
div2.style.color = 'white';
div2.style.textAlign = 'center';
div2.style.fontSize = 'medium';
div2.style.borderRight = '' + ((100 - resource2_Data.length) / 100) * parseInt(div2.style.width) + 'px solid black';
div2.style.position = 'absolute';
eventRows[3].appendChild(div2);
(document.querySelector('.e-project1') as HTMLElement).style.paddingRight = '20px';
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.