Redraw entire tabs after ajax reload by partialview

[Massimo]

Hi, 

i need to update an entire partialview section via ajax containing an "ejs-tab" control and 5 tabs with other syncfusion controls inside.

The problem is that when I update the partialview with "$('.modal-body').html(response);" the "ejs-tab" remains without any parameter "<div id="NavigationItems"></div>". At the first execution in get everything works correctly.

I have seen your example  https://www.syncfusion.com/forums/150157/loading-tab-content-from-partial-views-in-ej2 where you update the content of the single tabs, but I need to update the whole ejs-tab, how can I do that?

Best regards,
Massimo

[Satheesh Kumar Balasubramanian]

Hi Massimo,

We have prepared sample to load all the tab content through partial view. Also, we let you know that tab content will render in on demand mode. So, we have rendered the first tab content in created event and second tab content in selecting event.

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

Index.cshtml:

<ejs-tab id="MainTab" created="Created" selecting="Selecting">

    <e-tab-tabitems>

        <e-tab-tabitem header="ViewBag.headerText0" content="<br/><div id='GridOrder1'></div>"></e-tab-tabitem>

        <e-tab-tabitem header="ViewBag.headerText1" content="<br/><div id='GridOrder2'></div>"></e-tab-tabitem>

    </e-tab-tabitems>

</ejs-tab>

<script>

    function Created() {

        var ajax = new ej.base.Ajax('@Url.Action("PartialView1", "Home")', 'GET', true);

        ajax.send().then();

         ajax.onSuccess = function (data) {

            $("#GridOrder1").html(data);

        }

    }

    function Selecting(e) {

        if (e.selectingIndex != 0){

            var ajax = new ej.base.Ajax('@Url.Action("PartialView2", "Home")', 'GET', true);

            ajax.send().then();

            ajax.onSuccess = function (data) {

                $("#GridOrder2").html(data);

            }

        }

    }

</script>

Kindly try the attached sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible.

• Replicate the issue in attached sample (or) share simple issue replicating sample if possible with proper replication steps
• Share all tab and partial view related code snippets
• Share issue depicting video

Regards,

Satheesh Kumar B

Attachment: EJ2_Tab_Core_ac43af50.zip

[Massimo]

Thanks for the reply, but my problem is at the level of the tabs control, not the individual tab.

I need to update an entire section that contains a tabs control. It works when it is first loaded, but not when it is reloaded via ajax.

I am attaching a small example, I hope it is clear.

Best regards,
Massimo

Attachment: SyncAjaxTabs_c20c08b8.zip

[Satheesh Kumar Balasubramanian]

Hi Massimo,

We have checked the shared sample and suggest you to use <ejs-scripts></ejs-scripts> in partial view file to resolve the reported issue.

 

TabsSample.cshtml:

<div>

    <div>

        <label>Field 1</label>

        <input type="text" name="textForm" asp-for="@Model.Field1" />

    </div>

    <div>

        <label>Field 2</label>

        <input type="text" name="textForm" asp-for="@Model.Field2" />

    </div>

    <hr />

    <div>

        <label>Tabs control</label>

        <ejs-tab id="NavigationItems" items="@NavigationItems" enablePersistence="true"></ejs-tab>

    </div>

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

        <div class="row">

            <div class="col-sm">

                <br />

                <h5>

                    $Posizione1

                </h5>

                <input type="text" name="text1" />

            </div>

        </div>

    </div>

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

        <div class="row">

            <div class="col-sm">

                <br />

                <h5>

                    $Posizione2

                </h5>

                <input type="text" name="text1" />

            </div>

        </div>

    </div>

</div>

<ejs-scripts></ejs-scripts>

Could you please check the attached sample and confirm whether the above solution resolves the problem at your end? 

  

Regards, 

Satheesh Kumar B

Attachment: SyncAjaxTabs_c1b3e2da.zip