insert javascript gantt in a browse screen

[Michele becchio]

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

Bye

Michele

[Jonesherine Stephen]

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  

    itemTemplate.appendTo($(element)); 

  

    contentItem.value.oncollectionchange = function () { 

  

        if ($("#sample_data").length && $("#sample_data").data("ejGantt")) { 

            $("#sample_data").ejGantt('destroy'); 

            $("#sample_data").remove(); 

        } 

We have also prepared the sample for your reference 

Please find the sample from the following link: 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantt1302904220 

  

Please let us know if you require further assistance on this.

Regards, 
Jone Sherine.P.S.   

[Michele becchio]

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

Michele

[Jonesherine Stephen]

Hi Michele, 

Thanks for the Update. 

Please let us know if you require further assistance on this. 

Regards, 

Jone Sherine .P.S. 

[Ashley Cresswell]

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

[Jonesherine Stephen]

  

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 

    myapp.showGantt(); 

}; 

 

 

We have also prepared the sample and dynamically changed different Gantt projects for your reference. 

Please find the sample from below location 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantt-projectselection-539148990 

Regards, 

Jone sherine P S