Tabs component disappear after reloading Partial View

[fireholder]

​​​My Tabs component is a part of Partial View. Tabs is successfully loaded in initial load, but when reload of partial View section ,where tabs placed, happens, my Tabs just disappear. What am i doind wrong?



Index. chtml

<div class="row border-top">
    <div class="col-md-3">
        <div class="row mt-3 mx-4">
            <div class="col-md-6">
                <ejs-dropdownbutton id="dropFilter" content="Формат" items="FilterItem"></ejs-dropdownbutton>
            </div>
        </div>
        <div class="row">
            <ejs-treeview id="listdata" nodeSelected="onSelect">
                <e-treeview-fields child="ViewBag.child" dataSource="@ViewBag.data" id="code" text="name" selected="selected" expanded="expanded" hasChildren="hasChild">
                </e-treeview-fields>
            </ejs-treeview>
            <ejs-contextmenu id="contextmenu" target="#listdata" items="menuItems"></ejs-contextmenu>
        </div>
    </div>
    <div id="dvContentPage" class="col-md-9">
        @{
            Html.RenderPartial("ContentPage");
        }
    </div>
</div>


<script>
    function onSelect(args) {
        if (args.nodeData.hasChildren == 0) {
            var nodeId = args.nodeData.id;
            $("#dvContentPage").load('@(Url.Action("Selected", "Classifier", null))?value=' + nodeId);
        }
    }
</script>

ContentPage.chtml

@model Classifier.Models.FactorysModel
@using Syncfusion.EJ2.Navigations;


@{
    var content0 = "Twitter is an online social networking service that enables users to send and read short 140-character";


    var content1 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was";


    var content2 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates";
    var headerText0 = new TabHeader { Text = "Twitter" };
    var headerText1 = new TabHeader { Text = "Facebook" };
    var headerText2 = new TabHeader { Text = "Whatsapp" };
}




<div class="row">
    <div class="col-md-6">
        <div class="row">
            <h1>
                @ViewBag.Var1
            </h1>
        </div>
        <div class="row">
            <h1>
                @ViewBag.Var1
            </h1>
        </div>
    </div>
    <div class="col-md-6">
        <h1>
            @ViewBag.Var1
        </h1>
    </div>
</div>


<div class="row">
    <ejs-tab id="ej2Tab">
        <e-tab-tabitems>
            <e-tab-tabitem header="headerText0" content="@content0"></e-tab-tabitem>
            <e-tab-tabitem header="headerText1" content="@content1"></e-tab-tabitem>
            <e-tab-tabitem header="headerText2" content="@content2"></e-tab-tabitem>
        </e-tab-tabitems>
    </ejs-tab>
</div>


​

[Vijay Ravi]

Hi fireholder, 
 

Based on your requirement, we have prepared an ASP.NET Core sample that demonstrates how to load the Tab component using a Partial View. The provided sample includes the necessary setup for rendering the PartialView file, which contains the Tab component.

Partial View UG: https://ej2.syncfusion.com/aspnetcore/documentation/tab/how-to/load-the-content-as-partial-view

[index.cshtml]
 

@{

    List<object> items = new List<object>();

    items.Add(new

    {

        text = "Tab"

    });

}

 

<div class="row border-top">

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

        <div class="row mt-3 mx-4">

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

                <ejs-dropdownbutton id="dropFilter" content="Формат" items="items" select="onSelectFilter"></ejs-dropdownbutton>

            </div>

        </div>

        <div class="row">

            <ejs-treeview id="listdata" nodeSelected="onSelect">

                <e-treeview-fields child="ViewBag.child" dataSource="@ViewBag.data" id="code" text="name" selected="selected" expanded="expanded" hasChildren="hasChild">

                </e-treeview-fields>

            </ejs-treeview>

            <ejs-contextmenu id="contextmenu" target="#listdata"></ejs-contextmenu>

        </div>

    </div>

    <div id="dvContentPage" class="col-md-9">

        @* Initially, don't render any partial view *@

    </div>

</div>

 

<script>

    var FilterItem = [

        { text: 'Tab' },

    ];

 

    function onSelect(args) {

        if (args.nodeData.hasChildren == 0) {

            var nodeId = args.nodeData.id;

            $("#dvContentPage").load('@(Url.Action("Selected", "Classifier", null))?value=' + nodeId);

        }

    }

 

    function onSelectFilter(args) {

        if (args.item.text === 'Tab') {

            $("#dvContentPage").load('@(Url.Action("PartialView1", "Home"))');

        }

    }

</script>

 

<ejs-scripts></ejs-scripts>

[PartialView1.cshtml]
 

@using Syncfusion.EJ2.Navigations;

@{

    var content0 = "Twitter is an online social networking service that enables users to send and read short 140-character";

    var content1 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was";

    var content2 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates";

    var headerText0 = new TabHeader { Text = "Twitter" };

    var headerText1 = new TabHeader { Text = "Facebook" };

    var headerText2 = new TabHeader { Text = "Whatsapp" };

}

 

<div class="row">

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

        <div class="row">

            <h1>

                @ViewBag.Var1

            </h1>

        </div>

        <div class="row">

            <h1>

                @ViewBag.Var1

            </h1>

        </div>

    </div>

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

        <h1>

            @ViewBag.Var1

        </h1>

    </div>

</div>

 

 

<div class="row">

    <ejs-tab id="ej2Tab">

        <e-tab-tabitems>

            <e-tab-tabitem header="headerText0" content="@content0"></e-tab-tabitem>

            <e-tab-tabitem header="headerText1" content="@content1"></e-tab-tabitem>

            <e-tab-tabitem header="headerText2" content="@content2"></e-tab-tabitem>

        </e-tab-tabitems>

    </ejs-tab>

</div>

 

<ejs-scripts></ejs-scripts>

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

Attachment: ej2coreinpartialview_a778ae12.zip