TabStrip reload undefined

1 Answer 280 Views
TabStrip
Luke
Top achievements
Rank 2
Iron
Iron
Iron
Luke asked on 27 May 2022, 02:03 PM

Hello,

I am trying to reload the content of one of my Tabs in different scenarios. I have different grids and other tabs that when their content changes I need to reload my checklist tab. However, when I call tabStrip.reload("li:first"); I get reload undefined.

Here is my TabStrip:


                  @(
                        Html.Kendo().TabStrip()
                        .Name("CaseTabStrip")
                        .TabPosition(TabStripTabPosition.Left)
                        .Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In).Duration(5)))
                        .Events(events => events.ContentLoad("onContentLoad"))
                        .Items(items =>
                        {
                            items.Add().Text("Checklist")
                                .Selected(true)
                                .LoadContentFrom(Url.Action("Checklist", "Cases", new { caseId = Model.Id }));
                           
// Extra tabs removed for brevity

                            items.Add().Text("Documents")
                                .LoadContentFrom(Url.Action("Index", "Documents", new { caseId = Model.Id }));
                        })
                        .HtmlAttributes(new { @class = "mt-5" })
                    )

And, this is how I am implementing the reload of the Checklist tab.


        var ReloadChecklist = () => {
            var tabStrip = $("#CaseTabStrip").data("kendoTabStrip");
            tabStrip.reload("li:first"); // No console error, but stepping through code shows "reload undefined"
        }

        function DocTypeRequestEnd(e) {
            var grid = $("#Documents").data("kendoGrid");
            if (grid) {
                grid.dataSource.read();
            }
            ReloadChecklist();
            GridRequestEnd(e);
        }
Where I call tabStrip.reload() I don't get a console error but the debugger show "reload undefined." It's odd because I can inspect the tabStrip variable and see my items. I can also see reload as an option under <prototype>

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 01 Jun 2022, 09:29 AM

Hello Luke,

Looking at the snippet provided I do not see an obvious reason for the reported behavior. In this REPL getting a reference to the TabStrip and calling the reload method fires a request to fetch the content.

<script>
    function onClick(){
        var tabstrip = $('#tabstrip').data("kendoTabStrip");;
        tabstrip.reload("li:first")
    }
</script>

@(Html.Kendo().Button()
                .Name("primaryTextButton")
                .ThemeColor(ThemeColor.Primary)
                .Content("Reload first tab")
                .Events(ev=>ev.Click("onClick")))
@(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Items(tabstrip =>
        {
            tabstrip.Add().Text("First Tab")
                .Selected(true)
                .LoadContentFrom("https://run.mocky.io/v3/522f996b-34b8-4fb7-b488-2a8e5ba4ed2f");

            tabstrip.Add().Text("Second Tab")
                .LoadContentFrom("https://run.mocky.io/v3/451dc557-93cc-40d4-9642-22bac68841d6");
        })
)

Can you update the sample REPL so the issue is reproducible? This way I can review the behavior and assist further.

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TabStrip
Asked by
Luke
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Aleksandar
Telerik team
Share this question
or