Kendo splitter control load right panel contents asynchronously

Question

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

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

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

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

edited May 23 '17 at 12:14

Community

1
1

answered Feb 18 '13 at 07:15

Hung Doan

1,167
12
19

SO close... It's refreshing the right side of the panel now, however it puts the entire content on the right, instead of just loading the main div. The left menu shows on top of the right side with the rest of the content below. Do you have any idea why that would happen? – AlexFreitas Feb 19 '13 at 13:59
Second approach didn't quite work. For the first suggestion, how do I remove the template from a view?? I thought that the @RenderBody would just render the html of the view inside of the main DIV tag. There's no reference in the view – AlexFreitas Feb 19 '13 at 20:23
@AlexFreitas I'm really sorry about `2nd approach`. I have updated it, You can try it. But I think you should work with #1. To remove the `template` (I mean `Layout` in ASP MVC) you have to set `Layout = null` in your View (or _ViewStart.cshtml - if you have it). – Hung Doan Feb 20 '13 at 06:46
YES! Setting the Layout to null did the trick. Thanks so much for your help! I really appreciated it. – AlexFreitas Feb 20 '13 at 13:41
The problem I'm running into now is that I may have a grid in the content side of the splitter. If the grid contains several pages and the user click on the next page button of the grid, the whole page refreshes taking the user backl to the Home content page. Is there any way to get around this? – AlexFreitas Feb 21 '13 at 23:04
@AlexFreitas : Your Grid do `'Server Binding'` right ?. If yes, You should change your `Binding Method` `to 'Ajax Binding'` (http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding) . If you have to use `Server Binding` ,.. I think there is no way (Except iframe) and you have to back to the old version(which come from the developer - the one left your company) – Hung Doan Feb 22 '13 at 05:49

Kendo splitter control load right panel contents asynchronously

1 Answers1