Articles in this section
Category / Section

How to render Gantt in Saleforce Visualforce environment

1 min read

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.

  1. Install the latest version of Essential Studio for JavaScript, you can get this from this location. https://www.syncfusion.com/products/javascript
  2. 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

  1. For rendering Gantt in Visual Force environment, add the below script and theme files to the (SFJSUI) folder in the below structure

Structure of script and theme files.

  1. Zip the folder (SFJSUI) to create a new file (SFJSUI.zip).
  2. Add this ZIP file (SFJSUI.zip) in static resource within your Salesforce account,

 

Add SFJSUI zip file in static resource within your salesforce account.

  1. Open developer console window to create a new apex pageOpen developer console window to create new apex page.
  2. Then create new apex page in developer console windowCreate a new apex page in developer console window.
  3. 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>

 

  1. 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>

 

  1. Click the preview button to view the Gantt control.Gantt control in salesforce visual force environment.
Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied