Customize Project Row

[mehmet yanbak]

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.

Attachment: progress_bar_3b3b634c.rar

[Balasubramanian Sattanathan]

Hi Mehmet yanbak, 

Greetings from Syncfusion Support. 

We have prepared sample based on your requirement using dataBound event like below code snippet. 

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'; 

} 

Sample : https://stackblitz.com/edit/angular-dttnyp-nscdha?file=app.component.ts 

Kindly try the above sample and let us know if you need any further assistance on this. 

Regards, 

Balasubramanian S 

[mehmet yanbak]

Thank you, It seems it works well.

Regards

[Vinitha Devi Murugan]

Hi Mehmet, 

 

You are most welcome 😊 

 

Regards, 

M.Vinitha devi