when adding the gantt control inside a tab, the gantt control is not displayed.

[Patricio Venegas B]

when adding the gantt control inside a tab, the gantt control is not displayed.

when I add it in the third tab it is not seen.

@page

@model Engie.Radar.Pages.ActividadesModel

@{

}

@Html.AntiForgeryToken()

<script type="text/x-template" id="columnTemplateAcciones">

    <a rel='nofollow' href="javascript:void(0);" class="btn btn-white btn-sm"><i class="fal fa-search-plus"></i> Ver</a>

</script>

<div class="row">

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

            <div class="panel-container show">

                <div class="panel-content">

                    <div id="tab_Acciones">

                    </div>

                    <div id="GridTab" style="display:none">

                        <ejs-grid id="grid" load="onLoad" allowSelection="true" allowResizing="true" allowTextWrap="false" allowExcelExport="true" allowPaging="true" allowFiltering="true" toolbar="@(new List<string>() {"Edit", "Delete", "Cancel", "Update","ExcelExport", "Search" })" allowSorting="true">

                            <e-grid-pagesettings pageCount="10"></e-grid-pagesettings>

                            <e-grid-selectionsettings type="Single" persistSelection="true" checkboxMode="ResetOnRowClick" mode="Cell"></e-grid-selectionsettings>

                            <e-data-manager url="Actividades?handler=SetdataAcciones" batchUrl="Actividades?handler=BatchUpdateAcciones" adaptor="UrlAdaptor"></e-data-manager>

                            <e-grid-editSettings showDeleteConfirmDialog="true" allowEditOnDblClick="true" allowAdding="true" allowDeleting="true" allowEditing="true" showConfirmDialog="true" mode="Batch"></e-grid-editSettings>

                            <e-grid-filterSettings type="CheckBox"></e-grid-filterSettings>

                            <e-grid-columns>

                                <e-grid-column field="Id" isPrimaryKey="true" visible="false" width="120"></e-grid-column>

                                <e-grid-column field="Nombre" headerText="Nombre" width="200"></e-grid-column>

                                <e-grid-column field="Responsable" headerText="Responsable" foreignKeyField="Email" foreignKeyValue="DisplayName" dataSource="@ViewBag.Users" width="200"></e-grid-column>

                                <e-grid-column field="FechaInico" headerText="Fecha Inico" type="date" format="dd/MM/yyyy" width="200"></e-grid-column>

                                <e-grid-column field="FechaTermino" headerText="Fecha Termino" type="date" format="dd/MM/yyyy" width="200"></e-grid-column>

                                <e-grid-column field="Descripcion" headerText="Descripción" width="200"></e-grid-column>

                                <e-grid-column field="Estado" foreignKeyField="Id" foreignKeyValue="Value" dataSource="@ViewBag.EstadoAccion" headerText="Estado" width="200"></e-grid-column>

                            </e-grid-columns>

                        </ejs-grid>

                    </div>

                    <div id="KanbanTab" style="display:none">

                        <ejs-kanban id="Kanban" keyField="Estado" dataSource="@ViewBag.Acciones">

                            <e-kanban-columns>

                                <e-kanban-column headerText="Desarrollo" keyField="deb106a5-8491-4d11-82e8-00b159c44984"></e-kanban-column>

                                <e-kanban-column headerText="Atrasadas" keyField="a57e3292-271f-4cdf-97d3-b8a05bbd0e5e"></e-kanban-column>

                                <e-kanban-column headerText="Reprogramadas" keyField="f19d659b-2e80-4315-8d16-24531e4d0c70"></e-kanban-column>

                                <e-kanban-column headerText="Completadas" keyField="5f2b72f0-e905-418b-85ae-51ad1378eb01"></e-kanban-column>

                            </e-kanban-columns>

                            <e-kanban-cardsettings headerField="Nombre" contentField="Descripcion" tagsField="Tags" grabberField="Color" footerCssField="ClassName"></e-kanban-cardsettings>

                        </ejs-kanban>

                    </div>

                    <div id="GanttTab" style="display:none">

                        <div id="ganttdiv" >

                            <ejs-gantt id='ganttChart' dataSource="ViewBag.GanttData" height="450px" highlightWeekends="true" allowSelection="true" treeColumnIndex="1"

                                       projectStartDate="03/27/2019" projectEndDate="07/06/2022">

                                <e-gantt-taskfields id="Id" name="name" startDate="StartDate"

                                                    endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">

                                </e-gantt-taskfields>

                                <e-gantt-labelSettings leftLabel="name"></e-gantt-labelSettings>

                                <e-gantt-splittersettings columnIndex="2"></e-gantt-splittersettings>

                                <e-gantt-selectionsettings mode="Row" type="Single" enableToggle="false"></e-gantt-selectionsettings>

                            </ejs-gantt>

                        </div>

                    </div>

                </div>

            </div>

    </div>

</div>

@section ScriptsBlock {

    <script>

        var pagename = "Seguimiento";

        function onLoad() {

            this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

        }

        var tabObj = new ej.navigations.Tab({

            heightAdjustMode: 'None',

            height: 320,

            showCloseButton: false,

            selecting: tabSelected,

            items: [

                { header: { 'text': 'Acciones' }, content: '#GridTab' },

                { header: { 'text': 'Kanban' }, content: '#KanbanTab' },

                { header: { 'text': 'Gantt' }, content: '#GanttTab' },

            ]

        });

        tabObj.appendTo('#tab_Acciones');

        //tabObj.element.classList.add('e-fill');

        function tabSelected(args) {

            if (args.selectedIndex === 3) {

            }

        }

        function cardRendered(args) {

            var val = args.data.Priority;

            ej.base.addClass([args.element], val);

        }

    </script>

}

[Alagumeena Kalaiselvan]

Hi Patricio, 

Thanks for contacting Syncfusion support. 

Currently we are checking your reported query with Gantt and we will update the further details on tomorrow 6^th October, 2021. 

Regards 

Alagumeena.K 

[Monisha Sivanthilingam]

Hi Patricio, 

 

We apologize for the delay. 

 

We were able to replicate the issue you reported. We will validate it and provide you with further details within two business days(October 21, 2021). 

 

We appreciate your patience till then. 

 

Regards, 

Monisha. 

[Patricio Venegas B]

something new?

[Patricio Venegas B]

I need to know if it will have any solution, otherwise look for another component or another way.

[Monisha Sivanthilingam]

Hi Patricio, 

 

Our development team is validating your query with high priority. We will provide you with further details on October 27, 2021. 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[Patricio Venegas B]

Should I create a support ticket?

[Lokesh Arjunan]

Hi Patrico 

 

Sorry for the inconvenience caused. 

 

We can able to render the Gantt chart in tab and we have prepared sample and attached documentation link for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169402/ze/GanttSample-1226466468.zip 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/tab/how-to/render-the-tab-items-using-content-template/ 

 

Regards, 

Lokesh