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.

    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>

     

     

  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1209 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') {
            $.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
    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