Issues when displaying gantt chart in modal

[Abirami Varadharajan]

hi!



I've got troubles displaying GANTT charts in modal PartialViews.



when in standalone views, I have no issues, but when in partial views (ajax call), it seems the width of the gantt is always 0%.



so I've worked around this by adding a css attribute of width:100% to ".e-gantt-splitter" class, and it kinda works, but as it hasn't properly been displayed, it doesn't display dependencies properly (see picture enclosed).



whe, the splitter is moved, the control is automatically refreshed, and the links show up normal.



and my chrome js console shows lots of errors. could it be linked ? (see other pic)



here's my init code :

@model List<amar.viewmodels.tachelienviewmodel>

@using Syncfusion.EJ2

<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/28.2.12/fluent.css">





<div class="ganttContainer">

@Html.EJS().Gantt("Gantt").DataSource(

(IEnumerable<object>)Model).Height(

"700px").Width(

"100%").EditSettings(edit =&gt;

{

edit.AllowEditing(true);

edit.AllowTaskbarEditing(true);

}).AllowParentDependency(

true).AllowResizing(

true).AllowTaskbarDragAndDrop(

true).AllowSorting(

true).TaskFields(

ts =&gt; ts.Id(

"TaskId").Name(

"TaskName").StartDate(

"StartDate").EndDate(

"EndDate").Duration(

"Duration").Progress(

"Progress").Dependency(

"Predecessor").Child(

"SubTasks")).Columns(col =&gt;

{

col.Field("OrdreLien").Width(50).Add();

col.Field("OrdreGamme").Width(50).Add();

col.Field("StartDate").Width(100).Add();

col.Field("TaskId").Width(50).Add();

col.Field("TaskPredName").Width(0).Add();

col.Field("TaskName").Width(250).Add();

col.Field("TaskSuccName").Width(0).Add();

}).WorkWeek(new string[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" }).SortSettings(

ss =&gt; ss.Columns(col =&gt;

{

col.Field("StartDate").Direction(Syncfusion.EJ2.Gantt.SortDirection.Ascending).Add();

})).SplitterSettings(ss =&gt; ss.Position("50%")).Render()





@Html.EJS().ScriptManager()



here's my ajax call (including the 100%width :



$.ajax({

url: configLIST.urlGammeLiens,

data: {

gammeId: gammeId

},

type: 'POST',

cache: false,

success: function (partial) {

$('#prep-body-container').html(partial);

$('.e-gantt-splitter').addClass('autoWidth')

$('#prep-modal').modal('show');

//eval(document.getElementById('prep-body-container').querySelector('script').innerHTML);

}

});



thank you for your time !
</object></div></amar.viewmodels.tachelienviewmodel>

Attachment: image190_60e28255.png

[Ajithkumar Gopalakrishnan]

Hi Johnny,

 

Greetings from Syncfusion Support,
 

We have validated the shared details on our end using version 28.2.12. We analyzed the reported issue regarding the dependency line script error on loading but were unable to reproduce the problem. We have prepared sample by rendering Gantt Chart on partial view for reference.

 

Video reference: https://www.syncfusion.com/downloads/support/directtrac/general/ze/partial

 

To help us identify the root cause and provide a solution, we kindly request the following details:

 

• The complete Gantt chart code snippet.
• Confirmation of the Gantt chart patch and script version (including a screenshot).
• Share the code snippet of partial view rendering with the Gantt chart.
• Details about the dataSource, including its structure and a sample (dummy) dataset similar to what is used in your application.
• Any observations or attempts made to reproduce the issue using the provided sample.

 

Sample link:   https://www.syncfusion.com/downloads/support/directtrac/general/ze/PartialView

Once we receive this information, we will be better equipped to identify the root cause of the issue and provide you with the necessary assistance.

Regards,
Ajithkumar G

[PAIN JOHNNY]

thank you for reaching out to me.

unfortunately, I don't have the exact code snippets anymore as I've moved on to display the gantt chart in a full view instead of a partial view.

it now works exactly as I need, but will recreate a ticket if I ever need to.

I'm keeping your sample solution to examine for further use.

thank you for your time.

[PAIN JOHNNY]

as I'm not the owner of the thread, I cannot close it.

please close it on my behalf if possible.

have a nice day.

[Getsy Edwin]

Hi Johnny,

Thanks for the update! Please get back to us if you need any other assistance.

Regards,

Getsy