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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize Project Row

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
loading
Tags: Schedule
mehmet yanbak
Asked On November 28, 2019 11:28 AM UTC

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 [Syncfusion]
Replied On 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 


mehmet yanbak
Replied On December 3, 2019 07:29 AM UTC

Thank you, It seems it works well.

Regards

Vinitha Devi Murugan [Syncfusion]
Replied On December 4, 2019 06:01 AM UTC

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


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon