How to render Gantt in Saleforce Visualforce environment
We can render Syncfusion JavaScript controls within Salesforce Visualforce page using the following steps. For instance, we have rendered ejGantt control in the Visualforce page.
- Install the latest version of Essential Studio for JavaScript, you can get this from this location. https://www.syncfusion.com/products/javascript
- Create a new folder (SFJSUI) and add the necessary theme and script files for the sample. You can get the script and theme files from the Essential Studio installed location.
C:\Program Files (x86)\Syncfusion\Essential Studio\{{version}}\JavaScript\assets
- For rendering Gantt in Visual Force environment, add the below script and theme files to the (SFJSUI) folder in the below structure
- Zip the folder (SFJSUI) to create a new file (SFJSUI.zip).
- Add this ZIP file (SFJSUI.zip) in static resource within your Salesforce account,
- Open developer console window to create a new apex page
- Then create new apex page in developer console window
- In this apex page add below code snippet in header section to refer the script and theme files.
HTML
<head>
<apex:includeScript value="{!URLFOR($Resource.SFJSUI,'SFJSUI/Scripts/jquery-3.1.1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SFJSUI,'SFJSUI/Scripts/jsrender.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SFJSUI,'SFJSUI/Scripts/ej.web.all.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SFJSUI,'SFJSUI/Scripts/jsonganttdata.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.SFJSUI, 'SFJSUI/Themes/default-theme/ej.web.all.min.css')}" /
</head>
- Add the below code snippet to initialize the Gantt control.
HTML
<div id="GanttContainer" style="height:350px;width:100%;"></div>
<script type="text/javascript">
$(function () {
$("#GanttContainer").ejGantt({
dataSource: defaultGanttData,
taskIdMapping: "TaskID",
taskNameMapping: "TaskName",
scheduleStartDate: new Date("02/23/2014"),
scheduleEndDate: new Date("03/31/2014"),
startDateMapping: "StartDate",
endDateMapping: "EndDate",
progressMapping: "Progress",
childMapping: "Children",
treeColumnIndex: 1
});
});
</script>
- Click the preview button to view the Gantt control.
