[Solved] How to render multiple partial views inside splitter

[Sid]

I am trying to create a dasboard page which will have multiple grids and various other controls. I can get a simple split to work with 2 grids inside RenderAction calls, but if I put this inside a more comple splitter scenario it does not render properly.  I've broken the grids into partial views and call them through the RenderAction method.

Here is my Razor view page:

@{
    ViewBag.Title = "TestSplitter";
}

<h2>TestSplitter</h2>

@{Html.Telerik().Splitter().Name("TestSplit")
      .Orientation(SplitterOrientation.Horizontal)
      .Panes(hPanes =>
                 {
                     hPanes.Add()
                         .Content(@<p>Text inside splitter</p>);

                     hPanes.Add()
                         .Content(
                     Html.Telerik().Splitter().Name("TestSplit2")
                     .Orientation(SplitterOrientation.Vertical)
                     .HtmlAttributes(new { style = "height: 1200px;" })
                     .Panes(vpanes =>
                         {
                             vpanes.Add()
                                 .MinSize("100px")
                                 .Content(() => { @Html.RenderAction("UserJourneys"); });
                             vpanes.Add()
                                 .HtmlAttributes(new { style = "padding:1" })
                                 .MinSize("100px")
                                 .Content(() => { @Html.RenderAction("UserQuests"); });
                         }).ToString());
                 }).Render();
    }
@Html.Telerik().ScriptRegistrar()

 

I've attached the actual browser image to show what's happening.   Just not sure how the RenderAction impacts the splitter javascripting and HTML connection. 

 

Any ideas?

Thanks,
-Sid.

[Dimo]

Hi Sid,

The correct syntax is:

@{Html.Telerik().Splitter().Name("TestSplit")
    .Orientation(SplitterOrientation.Horizontal)
    .Panes(hPanes =>
        {
            hPanes.Add()
                .Content(@<p>Text inside splitter</p>);
 
            hPanes.Add()
                .Content(() => {
            Html.Telerik().Splitter().Name("TestSplit2")
            .Orientation(SplitterOrientation.Vertical)
            .HtmlAttributes(new { style = "height: 1200px;" })
            .Panes(vpanes =>
                {
                    vpanes.Add()
                        .MinSize("100px")
                        .Content(() => { @Html.RenderAction("AjaxView_Grid"); });
                    vpanes.Add()
                        .HtmlAttributes(new { style = "padding:1px" })
                        .MinSize("100px")
                        .Content(() => { @Html.RenderAction("AjaxView_Grid"); });
                }).Render();
                });
        }).Render();
}


or

@{Html.Telerik().Splitter().Name("TestSplit")
    .Orientation(SplitterOrientation.Horizontal)
    .Panes(hPanes =>
        {
            hPanes.Add()
                .Content(@<p>Text inside splitter</p>);
 
            hPanes.Add()
                .Content(@<text>
            @{ Html.Telerik().Splitter().Name("TestSplit2")
            .Orientation(SplitterOrientation.Vertical)
            .HtmlAttributes(new { style = "height: 1200px;" })
            .Panes(vpanes =>
                {
                    vpanes.Add()
                        .MinSize("100px")
                        .Content(() => { @Html.RenderAction("AjaxView_Grid"); });
                    vpanes.Add()
                        .HtmlAttributes(new { style = "padding:1px" })
                        .MinSize("100px")
                        .Content(() => { @Html.RenderAction("AjaxView_Grid"); });
                }).Render(); }
                </text>);
        }).Render();
}


Using ToString() causes the partial views to be rendered before their container.

Greetings,
Dimo
the Telerik team

[Sid]

Dimo,

Perfect! Thank you.
-Sid.

[Jon]

This was a very handy example, thanks. I am evaluating the MVC controls, and want to build exactly the same kind of dashboard. The code here let me do that. On clicking column sort in the grid, however, the entire page rerenders, so that I lose the splitter and only see the grid control, sorting as requested. The behavior I'd like, of course, is for just the grid to rerender, within the splitter container. Any idea what I'm missing? I'm very new with the control set, sorry, so feel free to ask me a basic question or give me a basic suggestion. I am using renderaction with a partial view displaying the grid. I'm just doing basic binding on the server side, nothing yet with Ajax.

Thanks!

Jon