Opening Partial View in Main pane on Layout View from Navigation View PanelBar

3 posts, 1 answers
  1. Lori
    Lori avatar
    2 posts
    Member since:
    Dec 2013

    Posted 28 Jan 2018 Link to this post

    In my _Layout view, I am using a splitter and have panes for Navigation and Main content.    In my navigation pane, I am opening a _Navigation partial view with a panelbar where I have my menu items.   When I click on a menu item, it is returning the partial view into the Navigation pane in the _Layout.   How Can I direct this to the main pane in the _Layout view?

    I see why this is happening but now sure how to modify it.



    .Panes(panes =>
    <section id="main">  -----When I click on a menu item in _Navigation, I want the Partial View to show here



    .Items(items =>
    items.Add().Text("Refunds").Items(corp =>
    corp.Add().Text("Refund Summary").Content(@<text> @Html.Partial("_refundGrid") </text>);

    animation: {
    // fade-out closing items over 1000 milliseconds
    collapse: {
    duration: 100,
    effects: "fadeOut"
    // fade-in and expand opening items over 500 milliseconds
    expand: {
    duration: 500,
    effects: "expandVertical fadeIn"




  2. Answer
    Veselin Tsvetanov
    Veselin Tsvetanov avatar
    1241 posts

    Posted 30 Jan 2018 Link to this post

    Hi Lori,

    In order to load content in an external container upon a PanelBar item click, you will need to handle the select event of the widget. There you could manually request the partial in question and inject it in the view:
    function onSelect(e) {
        var item = e.item;
        if (item.textContent === 'Refund Summary') {
                url: '@Url.Action("_refundGrid", "Home")',
                success: function (partial) {
        } else {

    Note also, that you will have to remove the JavaScript initialization of the PanelBar ($("#panelbar").kendoPanelBar({...), as it has been already initialized with the HTML helper.

    Attached you will find a simple solution implementing the above suggestion.

    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Lori
    Lori avatar
    2 posts
    Member since:
    Dec 2013

    Posted 30 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    Thank you so much it works perfectly now.    I am new to MVC so the explanation and sample project really helped.   

    I appreciate you responding quickly.

Back to Top