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

Gantt as a partial view

I tried a lot but doesn't get success till now. I'm trying to return partial view which contains Gantt Chart.

1) AJAX call to refresh the View

$("#GanttContainer").ejGantt("destroy");
        $.ajax({
            type: "POST",
            url: "gantt",
            dataType: 'html',
            data: "{'Id':'" + parseInt(Id) + "'}",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $("#dv_Gantt").empty().html(data);
            }
        });

2) Method which returns Gantt

    [HttpPost]
    public ActionResult gantt(int Id)
    {
        GanttData objGanttData = new GanttData();
        if (iteration != 0)
        {
            objGanttData.LstTaskData = GetData(Id);
            objGanttData.LstTaskData = GetData(Id);
            objGanttData.StripLines = GetStriplines();
        }
        objGanttData.LstAllResource = GetResources();
        objGanttData.objPriorityCodes = JsonConvert.SerializeObject(GetPriorities(), Formatting.None);
        objGanttData.objProjectWiseStatus = JsonConvert.SerializeObject(GetStatus(), Formatting.None);
        objGanttData.objWorkItemTypes = JsonConvert.SerializeObject(GetWorkItemType(), Formatting.None);

        DataManagerConverter.Serializer = new DMSerial();

        return PartialView("gantt", objGanttData );
    }
3) Attached is the Gantt View file

4) Layout page contains following files

 <script src="~/JsScript/Gantt/jquery-2.1.4.min.js"></script>
 <script src="~/JsScript/Gantt/jquery.easing-1.3.min.js"></script>
 <script src="~/JsScript/Gantt/jsrender.min.js"></script>    
 <script src="~/JsScript/Gantt/ej.web.all.min.js"></script>

5) web config contains <add key="UnobtrusiveJavaScriptEnabled" value="false" />
After doing all these, I'm not getting anything. Blank Div is being rendered. Please find the attached Result.txt file which is the html of the rendered div. I'm not clear what is missing. Request you to provide solution with this setup. The samples you send works as expected always. I want my own set up to run as expected.

Awaiting your prompt response.




Attachment: _Gantt_d577bef.zip

6 Replies

JS Jonesherine Stephen Syncfusion Team December 12, 2016 01:12 PM UTC

Hi Kuntal, 
Thanks for contacting Syncfusion support. 
We have analyzed the attached files. As per the “Result.txt” file “ej.web.all.min.js” file is not referred while loading Gantt. Please ensure whether the scripts and theme files are properly referred in the view page while loading Gantt and also ensure whether the server side method is triggered and the partial view is returned properly in an Ajax success action. Please share us your entire project file along with the controllers, main view, partial view and _Layout page with us. This would be helpful for us to serve you better. 
Regards, 
Jone sherine P S 



KP Kuntal Patel December 13, 2016 02:12 PM UTC

Please find the attached Sample project which shows the exact setup we have in place.

Request you to reply at the earliest as we are working on commited delivery.

Attachment: WebApplication2_2a156e45.zip


JS Jonesherine Stephen Syncfusion Team December 14, 2016 12:38 PM UTC

Hi Kuntal, 
Sorry for the inconvenience caused. 
We have analyzed the attached sample and noticed that the server side property names are not properly referred while mapping them in view. And also partial view is not properly returned in the controller file.   
We have performed the below changes in your file. 
1. Included the master page path in _ViewStart.cshtml page. 
2. Included the correct property names while mapping with Gantt. 
3. Rendered the Gantt in “Gantt.cshtml” page [partial view].  
4. In Index.cshtml page [main view] rendered the button. In button click action we have loaded the Gantt [partial view] by using ajax for your reference. 
Please find the code example below: 
[Index.cshtml(main view)] 
<div id="main"> 
      <button onclick="clickme()">Navigate To Gantt</button>       
    </div> 
    <script type="text/javascript"> 
         //Triggered on drop down change action 
        function clickme() { 
            //ajax call to server side method to refresh partialView 
            $.ajax({   
            //serverside method name and controller name 
                url: '@Url.Action("_Gantt", "Gantt")', 
                success: function (data) {                                 
                   $("#main").html(data); 
                } 
            }); 
        } 
    </script> 
 
[Gantt.cshtml(partial view)] 
@(Html.EJ().Gantt("GanttContainer") 
        .TaskNameMapping("TaskName") 
) 
@(Html.EJ().ScriptManager()) 
 
[controller] 
public class BusinessObject 
    { 
         public string TaskName{get; set;}                 
              // 
    } 
[HttpGet] 
        public ActionResult _Gantt() 
        { 
            var DataSource = this.GetPlanDataSource(); 
            ViewBag.datasource = DataSource;           
            return PartialView("Gantt", DataSource); 
            
        } 
5. While returning the partial view, the view name must be similar to created partial view file. 
6. We need to include common images folder along with the themes to refer the required icons to render Gantt. 
 
 
Please let us know if you need further assistance on this 
Regards, 
Jone sherine P S 



KP Kuntal Patel December 14, 2016 01:21 PM UTC

Thanks for the reply.

All the things you've mentioned was in place as required. I somehow managed to get gantt rendered. Now, current issues are

1) No header is being displayed for any columns
2) On first load,no custom columns getting displayed,only defaults are available. On subsequent refresh, required columns getting rendered
3) Right side portion from the splitter which shows baseline,striplines etc. is blank. It gets rendered on refresh but goes off when i drag the splitter
4) Please find attached snapshots for better understanding of above mentioned issues. 

Please reply at the earliest.

Attachment: Gantt_Issues_31c263ff.zip


JS Jonesherine Stephen Syncfusion Team December 15, 2016 04:58 PM UTC

Hi Kuntal, 
We have analyzed the reported issues.  
Theme files are not properly referred while loading Gantt. 
We can refer the theme files by two ways: 
1. If the folder structure is like below then we can refer the ej.web.all.min.css alone is enough to render the Gantt. No need to refer “ej.widgets.core.min.css”, “ej.theme.min.css” along with “ej.web.all.min.css”, this may leads to css over-ride. Because in ej.web.all.min.css we have called the ej.theme.min.css and ej.widget.core.min.css files only. 
 
 
2. Otherwise we can refer both “ej.widgets.core.min.css” and “ej.theme.min.css” to render the Gantt as per the below order. 
And refer the theme files along with the scripts in the”_GanttMaster” page as below 
  
We have also prepared the sample and rendered the Gantt with baseline and custom field for your reference.  
Please find the sample from below location: 
 
Regards, 
Jone sherine P S 



JS Jonesherine Stephen Syncfusion Team December 15, 2016 04:58 PM UTC

Hi Kuntal, 
We have analyzed the reported issues.  
Theme files are not properly referred while loading Gantt. 
We can refer the theme files by two ways: 
1. If the folder structure is like below then we can refer the ej.web.all.min.css alone is enough to render the Gantt. No need to refer “ej.widgets.core.min.css”, “ej.theme.min.css” along with “ej.web.all.min.css”, this may leads to css over-ride. Because in ej.web.all.min.css we have called the ej.theme.min.css and ej.widget.core.min.css files only. 
 
 
2. Otherwise we can refer both “ej.widgets.core.min.css” and “ej.theme.min.css” to render the Gantt as per the below order. 
And refer the theme files along with the scripts in the”_GanttMaster” page as below 
  
We have also prepared the sample and rendered the Gantt with baseline and custom field for your reference.  
Please find the sample from below location: 
 
Regards, 
Jone sherine P S 


Loader.
Up arrow icon