We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customize Project Row

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

3 Replies

BS Balasubramanian Sattanathan Syncfusion Team November 29, 2019 09:14 PM UTC

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


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

Regards, 
Balasubramanian S 



MY mehmet yanbak December 3, 2019 07:29 AM UTC

Thank you, It seems it works well.

Regards


VD Vinitha Devi Murugan Syncfusion Team December 4, 2019 06:01 AM UTC

Hi Mehmet, 
 
You are most welcome 😊 
 
Regards, 
M.Vinitha devi 


Loader.
Live Chat Icon For mobile
Up arrow icon