Gannt Chart is not getting displayed

[Manish dhariwal]

Hello,

In Gantt control, i have made a structure similar to shown here : https://help.syncfusion.com/aspnetmvc/gantt/getting-started. 

Issue is, i'm not able to view the chart in the page at all. Entries in my web.config file looks like this

      <add assembly="Syncfusion.Linq.Base, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      <add assembly="Syncfusion.EJ, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      <add assembly="Syncfusion.EJ.Export, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      <add assembly="Syncfusion.Compression.Base, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      <add assembly="Syncfusion.XlsIO.Base, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      <add assembly="Syncfusion.Pdf.Base, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      <add assembly="Syncfusion.DocIO.Base, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      <add assembly="Syncfusion.OfficeChart.Base, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      <add assembly="Syncfusion.EJ.MVC, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

Am i missing something? Using this controls for the first time so don't know the common trouble shooting steps. I tried searching over the internet but as i am not getting any error,i'm unable to find any helpful resources. 

Thanks for visiting the thread. Awaiting any useful inputs.

[Manish dhariwal]

I tried to remove all the nuget packages and isntalled only the mvc4 package. Now the entries are like this:

  <add namespace="Syncfusion.Mvc.Shared" />

      <add namespace="Syncfusion.Mvc.Tools" />

      <add namespace="Syncfusion.Mvc.Chart" />

      <add namespace="Syncfusion.Windows.Forms.Chart" />

      <add namespace="Syncfusion.Mvc.Grid" />

      <add namespace="Syncfusion.Mvc.Schedule" />

      <add namespace="Syncfusion.Mvc.Gauge" />

      <add namespace="Syncfusion.Mvc.Diagram" />

      <add namespace="Syncfusion.Mvc.ChartAdv" />

      <add namespace="Syncfusion.Mvc.GaugeAdv" />

      <add namespace="Syncfusion.PdfViewer.Mvc" />

      <add namespace="Syncfusion.ReportViewer.Mvc" />

        <add namespace="Syncfusion.Mvc.Olap.Grid" />

      <add namespace="Syncfusion.Olap.Manager" />

      <add namespace="Syncfusion.Olap.Reports" />

      <add namespace="Syncfusion.Mvc.Olap.Shared" />

      <add namespace="Syncfusion.Mvc.Olap.Chart" />

      <add namespace="Syncfusion.Mvc.Olap.Client" />

[Jonesherine Stephen]

Hi Manish, 

Please find the response below 

Step1: Create a MVC project 

Step 2: Add the Syncfusion required DLL’s in Reference section like as follows,  

    

DLL Location: [installed Location]\Syncfusion\Essential Studio\XX.X.X.XX\Assemblies  

 

Step 3: We should add the necessary Scripts and themes folders   

To render the Gantt control, we need scripts and themes files. So we should add the scripts and themes folders like as follows,  

Screenshot of themes:   

   

Screenshot of scripts:  

   

 

Script Location: [installed Location]\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets\scripts\web  

CSS Location: [installed Location]\Syncfusion\Essential Studio\ XX.X.X.XX \JavaScript\assets\css\web  

 

Step 4: Webconfig Page  

 [web.config]  

<compilation debug="true" targetFramework="4.5" >  

    <assemblies>  

                <add assembly="Syncfusion.EJ, Version= XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />  

                <add assembly="Syncfusion.EJ.MVC, Version= XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />  

    </assemblies>  

</compilation>  

                                   //… 

<namespaces>              

        <add namespace="Syncfusion.MVC.EJ" /> 

      </namespaces> 

 

Step5: We should refer the necessary scripts and themes in header section of view page like below. 

 

<head> 

<title>Essential Studio for JavaScript : Gantt</title> 

    <script src="~/Scripts/scripts/jquery-1.10.2.min.js"></script> 

    <script src="~/Scripts/scripts/jquery.easing.1.3.min.js"></script> 

    <script src="~/Scripts/scripts/jsrender.min.js"></script> 

    <script src="~/Scripts/scripts/ej.widget.all.min.js"></script> 

    <link rel='nofollow' href="~/Content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" /></head> 

 

Step 6: Define the Gantt control in View page  

[cshtml] 

        @(Html.EJ().Gantt("GanttContainer") 

            .TaskIdMapping("TaskID") 

            .TaskNameMapping("TaskName") 

            .StartDateMapping("StartDate") 

            .DurationMapping("Duration") 

            .ProgressMapping("Progress") 

            .ScheduleStartDate("02/01/2014")             

            .ScheduleEndDate("03/14/2014") 

            .ChildMapping("SubTasks")            

            .EnableContextMenu(true) 

            .AllowGanttChartEditing(true) 

            .PredecessorMapping("Predecessor")  

            .ToolbarSettings(toolbar => 

                   { 

                       toolbar.ShowToolbar(true); 

                       toolbar.ToolbarItems(new List<GanttToolBarItems>() 

                       { 

                           GanttToolBarItems.Add, 

                           GanttToolBarItems.Edit, 

                           GanttToolBarItems.Delete, 

                           GanttToolBarItems.Update, 

                           GanttToolBarItems.Cancel, 

                           GanttToolBarItems.Indent, 

                           GanttToolBarItems.Outdent, 

                           GanttToolBarItems.ExpandAll, 

                           GanttToolBarItems.CollapseAll, 

                                  }); 

                   }) 

            .EditSettings(edit => 

            { 

            edit.AllowEditing(true); 

            edit.AllowAdding(true); 

            edit.AllowDeleting(true); 

            edit.AllowIndent(true); 

            edit.EditMode("cellEditing"); 

            }) 

            .AllowSorting(true) 

            .AllowMultiSorting(true) 

            .ResourceInfoMapping("ResourceID ") 

            .ResourceNameMapping("ResourceName ") 

            .ResourceIdMapping("ResourceID ") 

            .Resources(ViewBag.resources) 

            .Datasource(ViewBag.datasource)             

            ) 

    @(Html.EJ().ScriptManager()) 

 

Please refer to the following help documentation and our online demo samples for further reference 

UG: https://help.syncfusion.com/js/api/ejgantt 

Online Demo: http://mvc.syncfusion.com/demos/web/gantt/default 

 

We need to refer Syncfusion.EJ and Syncfusion.EJ.MVC dlls alone to render the Gantt control in ASP.NET MVC.As per your webconfig we have prepared the sample in version 14.1.0.46 for your reference. Is this the version you are working? If not could you please share your exact product version with us so that we can provide the sample in that version. 

Please find the sample from below link. 

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

Disclaimer: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.MVC dlls to render the Gantt control which is available in Essential studio installed location. 

Syncfusion.EJ Installed location:  

[Installed Location]\Syncfusion\Essential Studio\14.1.0.46\Assemblies\4 \ Syncfusion.EJ.dll 

Syncfusion.EJ.MVC Installed location:  

[Installed Location \Syncfusion\Essential Studio\14.1.0.46\Assemblies\MVC\MVC4\ Syncfusion.EJ.MVC.dll 

 

Please let us know if you need further assistance on this 

Regards, 

Jone sherine P S 

[Manish dhariwal]

I'm really getting confused now. There is no helpful response on any of the threads or on incident i've already opened. You have shown here tons of scripts. Where as i'm not able to understand for a single control like Gantt,how many scripts are actually being used?

Apart from that, the folder structure you have shown here is not at all available in the source i have downloaded/Installed(14.2.0.26). Each file is in different folder. Let me ask you a straight forward question, forget about every control, how many scripts are necessary for Gantt to work properly? Is it necessary to follow similar structure for script folders as shown in the picture above? 

I made the same structure as in picture but still i'm getting blank page. 

[Jonesherine Stephen]

Hi Manish, 

We regret about the inconvenience caused. 

Query: how many scripts are necessary for Gantt to work properly? Is it necessary to follow similar structure for script folders as shown in the picture above?  

Solution: 

It is mandatory to include the below scripts and theme files to render the Gantt. Please find the below steps to render Gantt: 

Step 1: Create MVC project 

Step 2: Include the below scripts in the script folder: 

 

 

Step 3: Include below themes in the Content folder 

 

Step 4: Refer the scripts and themes in the below order 

 

Step 5: Please find the web config file: 

 

 

We have also prepared the Gantt sample in version 14.2.0.26 for your reference. Please find the sample from below location: 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample_mvcgantt-373012303 

If still you are facing the same problem means, please share your full project with us, it would be helpful for us to serve you.  

 

Please let us know if you need further assistance on this 

Regards, 

Jone sherine P S