PanelBar embedded in other kendo controls?

[Mark]

Hi,

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:

@(Html.Kendo().Window()
    .Name("viewJobLogWindow")
    .Draggable()
    .Resizable()
    .Width(640)
    //.Height(350)
    .Actions(actions => actions.Pin().Minimize().Close())
    .LoadContentFrom("ViewJobLogWindowsContent", "TeamsV2")
    .Visible(false)
    .Title("")
)

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

@model TEAMSV2.Models.TeamsV2Model
<div class="page-wrap">
    @(Html.Kendo().TabStrip()
        .Name("JobLogTabs")
        .Animation(false)
        .Events(events => events
            .Select("onSelectJobLogTab")
        )
        .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" });
        })
        .SelectedIndex(Model.SelectedJobLogTabIndex)
    )
</div>

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

@if (SelectedJob != null)
{
    @(Html.Kendo().PanelBar()
        .Name("jobLogOverviewPanels")
        .ExpandMode(PanelBarExpandMode.Multiple)
        .Items(panelbar =>
        {
            panelbar.Add()
                .Text("Job Summary")
                .Expanded(true)
                .LoadContentFrom("GetJobLogOverviewContents", "TeamsV2", new { id = "JobSummary" });
       })
    )
}

Here's my controller action:

[HttpGet]
[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?

Mark.

 

 

[Dimo]

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.

http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#configuration-Name

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

http://screencast.com/t/Zp8zhcsZqa

Regards,
Dimo
Telerik