PanelBar embedded in other kendo controls?

2 posts, 0 answers
  1. Mark
    Mark avatar
    87 posts
    Member since:
    Jul 2014

    Posted 15 Dec 2015 Link to this post


    I've got a Kendo Window which in turn loads a Kendo Tab Strip and I want to put a Kendo PanelBar on one of the tabs.  Is this feasible?

    My window loads like this:

        .Actions(actions => actions.Pin().Minimize().Close())
        .LoadContentFrom("ViewJobLogWindowsContent", "TeamsV2")

    The action to load the window returns a partial view - here is that code:

    @model TEAMSV2.Models.TeamsV2Model
    <div class="page-wrap">
            .Events(events => events
            .Items(tabstrip =>
                tabstrip.Add().Text("Job Overview")
                    .HtmlAttributes(new { index = 0, id = "JobOverviewTab" })
                    .LoadContentFrom("GetJobLogTab", "TeamsV2", new { id = "JobOverviewTab" });
                tabstrip.Add().Text("Job Log")
                    .HtmlAttributes(new { index = 1, id = "JobLogTab" })
                    .LoadContentFrom("GetJobLogTab", "TeamsV2", new { id = "JobLogTab" });
                tabstrip.Add().Text("Job Documents")
                    .HtmlAttributes(new { index = 2, id = "JobDocumentsTab" })
                    .LoadContentFrom("GetJobLogTab", "TeamsV2", new { id = "JobDocumentsTab" });

    And finally, the GetJobLogTab Action for the first tab is where I want to load the PanelBar.  I've tried this:

    @if (SelectedJob != null)
            .Items(panelbar =>
                    .Text("Job Summary")
                    .LoadContentFrom("GetJobLogOverviewContents", "TeamsV2", new { id = "JobSummary" });

    Here's my controller action:

    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "none")]
    public ActionResult GetJobLogOverviewContents(string id)
        ViewBag.NewMode = false;
        TeamsV2Model Model = new TeamsV2Model(GetOrCreateSessionHelper(false));
        // The Partial views are in a folder of the same name
        return PartialView("JobLog/JobOverviewTab/Panels/" + id, Model);


    I'm expecting the panels to load up straight away as I have set them to "Expanded" but they only load once I actually click the panel bar and then it loads the partial view into the whole screen and not into the tab?

    I've attached an image containing the loaded pop-up window and then what happens when I click the panel bar.

     Any ideas?




  2. Dimo
    Dimo avatar
    8319 posts

    Posted 17 Dec 2015 Link to this post

    Hi Mark,

    The described scenario is possible to achieve and I managed to recreate it with code similar to yours.

    However, I notice that the GetJobLogTab partial view is loaded multiple times, which will lead to a problem with the PanelBars' initialization due to duplicate IDs. Please ensure that each PanelBar instance in each partial view instance has a unique Name.

    Here is a video showing the PanelBars being expanded on initial display:

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET AJAX banner
Back to Top