Search code examples
model-view-controllerkendo-uipartial-viewssplitterpanelbar

Kendo splitter control load right panel contents asynchronously

I have a Kendo splitter control with left/right panes. Inside the left pane I have a Kendo panel bar control that builds a navigation menu. Unfortunately I inherited this from another developer that left the company and I'm not familiar with the Kendo control.

It all works, but when the user clicks on a menu item, the entire page refreshes, That's for the birds! I want only the right panel to refresh.

Here's the code for the for the layout page:

<body>
@(Html.Kendo().Splitter().Name("splitter").Panes(panes => {
    panes.Add().Size("220px").Collapsible(true).Content(@<text>
    @Html.Partial("_Panelbar")
    </text>);
panes.Add().Content(@<text>
<section id="main">
    @RenderBody()
</section>
</text>);
}))
<script type="text/javascript">
    $(document).ready(function () {
        $('input[type=text]').addClass('k-textbox');
    });
</script>
@RenderSection("scripts", required: false)
</body>

and here's the code for the panel partial view:

@(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.Items(items => {
items.Add().Text("Corporate").Items(corp =>
{
    corp.Add().Text("Vendors").Action("Index", "Vendor");
    corp.Add().Text("Materials").Action("Index", "CostMaterials");
    corp.Add().Text("Packaging").Action("Index", "CostPackaging");
    corp.Add().Text("Reports").Action("UnderConstruction", "Home", new { pageTitle = "Reports" });
});
}))

I tried replacing the .Action method on the PanelBar with LoadContentsFrom method. That replaced the content in the left pane. So I guess my question is, how do I target the right side of the splitter control?

Any help would be appreciated.

Thanks

-Alex

Solution

  • Your code maybe like this: 

    @(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.Items(items => {
items.Add().Text("Corporate").Items(corp =>
{
    corp.Add().Text("Vendors").Url("javascript:void(0);")
    .HtmlAttributes(
    new { 
      @class= "helloWorld",
      @data-href="/Vendor/Index"
    });
});
}))        
    <script>
        $document.ready(function(){
            $('.helloWorld').click(function(){
                var href = $(this).attr('data-href');
                $('#main').load(href);
            });
        });
    </script

    UPDATE

    There is one thing very important: I think the view /Vendor/Index have the same template with your current page.

    It means that when you load /Vendor/Index into the right side. The right side will include entire content (include left panel again).

    Solution

    1. You have to create a new view(a template) , which just include your left menu,banner,...

    Then, You have to remove all template of other views (which will be loaded into right side - /Vendor/Index , /CostMaterials/Index,...)

    2.This way is not a good approach. But I think It will work.

    //Reference : Use Jquery Selectors on $.AJAX loaded HTML?

        <script>
    $document.ready(function(){
        $('.helloWorld').click(function(){
            var href = $(this).attr('data-href');
            $.ajax({
              type: 'GET',
              url: href,
              success: function (data){
                var rHtml = $('<html />').html(data);
                $('#main').html(rHtml.find('#main'));
              }   
            });
        });
    });
</script