Why Gantt chart not working and not displaying anything

[Ahmed]

Hi,

Why Gantt chart not working and not displaying anything?

In Index.cshtml

<div class="control-section">

    <div class="row">

        <div class="col-md-12">

            <ejs-gantt id='RemoteData' treeColumnIndex="0" actionFailure="failure" width="100%" height="600px" toolbar="@(new List<string>() { "Add","Indent","Outdent", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll" })">

                <e-data-manager url="/ActivityTaskGantt/DataSource" adaptor="UrlAdaptor"></e-data-manager>

                <e-gantt-taskfields id="ID" name="TaskName" startDate="TaskStartTime"

                                    endDate="Deadline" duration="AllowedDuration" progress="Progress" parentID="ParentTaskID">

                </e-gantt-taskfields>

                <e-gantt-columns>

                    <e-gantt-column field="ID"></e-gantt-column>

                    <e-gantt-column field="TaskName"></e-gantt-column>

                    <e-gantt-column field="TaskStartTime"></e-gantt-column>

                    <e-gantt-column field="AllowedDuration"></e-gantt-column>

                    <e-gantt-column field="Progress"></e-gantt-column>

                </e-gantt-columns>

                <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"

                                      allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>

            </ejs-gantt>

        </div>

    </div>

</div>

<script>

        function failure(args) {

            var errorMessage = args.error[0].error.responseText.split("Exception:")[1].split('<br>')[0]; //extract the message from args

            alert(errorMessage);

        }

</script>

In Contoller.cs

     public IActionResult DataSource([FromBody] DataManagerRequest dm)

        {

            var ActivityTaskGanttList = GetAllActivityTaskDTOs().ToList();

            ViewBag.ParentTask = ActivityTaskGanttList.OrderBy(c => c.ID).ToList();

            ViewBag.RespEmp = GetAllEmployeeDTOs();

            var activityTasks = ActivityManagementAPIHandler.GetList<ActivityTaskDTO>("ActivityTask/GetActivityTasksNotDeleted").Result;

            DataOperations operation = new DataOperations();

            var DataSource = _mapper.Map<IEnumerable<ActivityTaskViewModel>>(activityTasks);

            if (dm.Where != null && dm.Where.Count > 0)

            {

                DataSource = operation.PerformFiltering(DataSource, dm.Where, "and"); //perform Filtering based on query passed as well as maintain child records Expand/Collapse

            }

            var count = DataSource.ToList<ActivityTaskViewModel>().Count();

            if (dm.Skip != 0)

            {

                DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging

            }

            if (dm.Take != 0)

            {

                DataSource = operation.PerformTake(DataSource, dm.Take);

            }

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);

        }

When press F12 to show JavaScript Console Messages

The message is :

Uncaught (in promise) TypeError: Cannot read property 'error' of undefined

    at t.failure (ActivityTaskGantt:376)

    at e.notify (ej2.min.js:1)

    at t.e.trigger (ej2.min.js:1)

    at e.actionFailure (ej2.min.js:1)

    at e.notify (ej2.min.js:1)

    at t.e.trigger (ej2.min.js:1)

    at t.triggerEvents (ej2.min.js:1)

    at e.notify (ej2.min.js:1)

    at t.e.trigger (ej2.min.js:1)

    at e.dataManagerFailure (ej2.min.js:1)

[Monisha Sivanthilingam]

Hi Ahmed, 

 

Greetings from Syncfusion support. 

 

We have analyzed your query and would like to inform you that we should use only Camel casing for the taskfields when using the URL Adaptor in Gantt Chart. This is because, by default the JSON results are returned in Camel format. We have modified the code snippets you shared to demonstrate our solution. Please ensure that your casing matches to what we shared below. 

 

Index.cshtml 

 

<e-gantt-taskfields id="id" name="taskName" startDate="taskStartTime" 

     endDate="deadline" duration="allowedDuration" progress="progress" 

     parentID="parentTaskID"> 

</e-gantt-taskfields> 

 

 

We have also prepared a sample for your reference. 

 

You could also follow the below configuration in your application to avoid this issue. 

 

Configuration: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#troubleshoot-grid-render-rows-without-data 

 

Please contact us if you require any further assistance. 

                                                                                                                                            

Regards, 

Monisha. 

[Ahmed]

Perfect,

Thank you very much for your response

[Monisha Sivanthilingam]

Hi Ahmed, 

 

You are welcome. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.