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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render Gantt in Saleforce Visualforce environment

Platform: JavaScript |
Control: ejGantt |
Published Date: March 17, 2017 |
Last Revised Date: May 29, 2019

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.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

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