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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
