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

[Lori]

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.

Thanks

_Layout

@(Html.Kendo().Splitter()
.Name("mainSplitter")
.Panes(panes =>
{
panes.Add()
.Size("150px")
.Content(
@<text>
@Html.Partial("_Navigation")
</text>);
panes.Add().Content(@<text>
<section id="main">  -----When I click on a menu item in _Navigation, I want the Partial View to show here
     @RenderBody()
</section>
</text>);
}))

 

_Navigation

@(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.ExpandMode(PanelBarExpandMode.Single)
.Items(items =>
{
items.Add().Text("Refunds").Items(corp =>
{
corp.Add().Text("Refund Summary").Content(@<text> @Html.Partial("_refundGrid") </text>);
    });
}))

<script>
$("#panelbar").kendoPanelBar({
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"
}


}
});
</script>

 

 

[Veselin Tsvetanov]

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') {
        $.ajax({
            url: '@Url.Action("_refundGrid", "Home")',
            success: function (partial) {
                $('#main').html(partial);
            }
        });
    } else {
        $('#main').html('');
    }
}

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.

Regards,
Veselin Tsvetanov
Progress Telerik

[Lori]

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.