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. Image for the cookie policy date

insert javascript gantt in a browse screen

Hi all,
I am doing some experiment in lightswitch html. I have created an entity with some properties (id,taskname, duration, progress etc) and  I am trying to insert a javascript Gantt in a blank browse screen. When I run the application the gantt chart appears but with no values ... and if I move on other screen and I come back to the gantt it doesn't show it completely...
I follow the example but with no results:

Do you have some example about integration of gantt chart in a html client lightswitch application?
Thank you so much

5 Replies

JS Jonesherine Stephen Syncfusion Team June 13, 2016 05:41 PM UTC

Hi Michele,
Thanks for contacting Syncfusion support.
In Lightswitch HTML the element Id won’t be removed while we are navigating the screen. So once we navigate back to the control from another screen more than one Id’s will exist. 
So we need to remove the Gantt object in initialization to resolve this issue as shown below. 
Please find the code snippet below:
// <reference path="~/GeneratedArtifacts/viewModel.js" /> 
myapp.Gantt.sample_data_render = function (element, contentItem) { 
    // Write code here. 
    var itemTemplate = $("<div></div>").attr('id', 'sample_data') 
    // Append the div element to screen  
    contentItem.value.oncollectionchange = function () { 
        if ($("#sample_data").length && $("#sample_data").data("ejGantt")) { 
We have also prepared the sample for your reference 
Please find the sample from the following link: 
Please let us know if you require further assistance on this.

Jone Sherine.P.S.   

MB Michele becchio June 15, 2016 12:19 PM UTC

Hi Stephen,
Thank you so much. The example fits perfectly!
I believe that lightswitch is a powerful tool that, with your syncfusion javascript components can be great!
Thanks a lot

JS Jonesherine Stephen Syncfusion Team June 16, 2016 11:07 AM UTC

Hi Michele, 
Thanks for the Update. 
Please let us know if you require further assistance on this. 
Jone Sherine .P.S. 

AC Ashley Cresswell October 27, 2016 07:56 AM UTC

can this control be amended to load data based on a specific project? 

for example I start with a browse screen, containing a list of projects, when I click on the particular project this loads up a GANTT chart based on this specific project..

This would make it an excellent control to be integrated within Lightswitch

JS Jonesherine Stephen Syncfusion Team October 31, 2016 08:20 PM UTC

Hi Ashley, 
Thanks for the patience 
We have prepared the work around and dynamically changed the Gantt projects. 
Please find the steps below: 
1.      We have created browse screen to show the projects list. 
2.      On click action of these project will re-direct to Gantt project and load Gantt with required datasource. 
Please find the code example below: 
myapp.BrowseProjectTables.ProjectTables_ItemTap_execute = function (screen) { 
    // Write code here.    
    var currentId = screen.ProjectTables.selectedItem.Id; 
    myapp.Gantt["selectedId"] = currentId; 
    // to call the Gantt control initiated screen on click action 
We have also prepared the sample and dynamically changed different Gantt projects for your reference. 
Please find the sample from below location 
Jone sherine P S 

Live Chat Icon For mobile
Up arrow icon