1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Changing Stylesheets

Changing Stylesheets

How can I change the UI in general?   
Overwrite or change selectively in the CSS file?  In the Gantt-Chart I would like to change the color of the bars. 

Thanks a lot and yes, I'm a beginner with working with libraries.

3 Replies
KR Karthikeyan Raja Syncfusion Team March 3, 2020 11:44 AM UTC

Hi Ali, 
 
Thanks for contacting Syncfusion support. Please find the below response. 
 
Query 1 - How can I change the UI in general? 
Solution: To change style of UI, You can change the theme of your need. By default material theme was referred.  
Available themes in EJ2-Gantt are following: 
  1. material
  2. fabric
  3. bootstrap
  4. bootstrap4
  5. highcontrast
 
You change the themes by CDN link which was referred in html file. Please find the code snippet below, 
[index.html] 
<html> 
  <head> 
     //…… 
     <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet"> 
  </head> 
  //…… 
</html> 
 
Please find the below documentation link for further reference, 
 
Query 2 – Change the color of the bars 
Solution: You can change the color of the parent and child taskbars based on it’s class names using CSS styles. Please find the code snippet below, 
[index.html] 
<html> 
  <head> 
     //…… 
     <style> 
        #Default.e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div { 
           background-color: yellowgreen !important; 
        } 
        #Default.e-gantt .e-gantt-chart .e-gantt-parent-taskbar-inner-div { 
           background-color: lightblue !important; 
        } 
     </style> 
  </head> 
</html> 
 
We can also customize the taskbar based on Gantt events. Please find the below documentation link for further reference, 
 
We have prepared a sample with above requirements. Please find the sample from below link, 
 
You can customize the Gantt using theme studio. Please refer below link for more details, 
 
Please get back to us, if you need any further assistance on this. 
  
Regards, 
Karthikeyan Raja 


AU Ali ultrAs March 21, 2020 12:16 AM UTC

Thanks for your great support!

For my next task, I want to ask How can I realize that the color of the bars changes depending on a certain property?
In the Data Source, I would add the property "Process Type" and have a certain color assigned depending on the process type.

For example 
if process type = 1 then bg-color = red
if process type = 2 then bg-color = blue
if process type = 3 then bg-color = green

I hope this function is possible / available. 

Thanks a lot and greetz!




KR Karthikeyan Raja Syncfusion Team March 23, 2020 01:08 PM UTC

Hi Ali,  
  
We have analyzed your query. By using queryTaskbarInfo, We can customize the taskbar color based on the datasource fields. Please find the code snippet below,  
var data = [  
{  
   TaskID: 1,  
   TaskName: 'Product concept',  
   StartDate: new Date('04/02/2019'),  
   EndDate: new Date('04/21/2019'),  
   ProcessType: 1,  
   subtasks: [  
       //……  
}];  
var ganttChart = new ej.gantt.Gantt({  
    //……  
  
    queryTaskbarInfo: function(args) {  
            var customField = args.data.taskData.ProcessType;  
            if(customField) {  
                if(customField == 1) {  
                    args.taskbarBgColor = "red";  
                } else if(customField == 2) {  
                    args.taskbarBgColor = "blue";  
                } else if(customField == 3) {  
                    args.taskbarBgColor = "green";  
                }  
            }  
     }  
  
  
We have prepared sample with your requirement. Please find the sample from below link,  
  
Please get back to us, If you need any further assistance on this.  
 
Regards, 
Karthikeyan Raja 


Loader.
Up arrow icon