PanelBar embedded in other kendo controls?

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

    Posted 15 Dec 2015 Link to this post

    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.

     

     

  2. Dimo
    Admin
    Dimo avatar
    8333 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.

    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
    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 MVC is VS 2017 Ready
Back to Top