This website is no longer actively supported
Written by John DeVight on 24 Jun 2011 12:28
Download RAZOR Source Code
Download ASPX Source Code
* Note: the Telerik.Web.Mvc.dll, Telerik "Contents" and Telerik "Scripts" have all been removed to reduce the zip file size
Overview
ExtJS has a really nice Layout Manager that can be used to create a nice desktop application look-and-feel to a web application. The same can be accomplished with the Telerik Splitter extension and a little bit of jQuery.
What you will end up with in the end is this:
Creating the (_Layout.cshtml or Site.Master) Page
The (_Layout.cshtml or Site.Master) page contains an outer splitter and an inner splitter. The outer splitter (or main splitter) creates a "pane" at the top of the page for the heading and a "pane" for the rest of the page for the content. The "content pane" contains the inner splitter with a pane on the left for navigation and a pane on the right for the page content.
Here is the markup:
@using Telerik.Web.Mvc.UI;
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
@(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.telerik.css"))
)
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="main">
@{Html.Telerik().Splitter().Name("MainSplitter")
.HtmlAttributes(new { style = "height: 300px;" })
.Orientation(SplitterOrientation.Vertical)
.Panes(vPanes =>
{
vPanes.Add()
.Size("50px")
@* Added the following HTML styles to allow the menu to display over top of all other div's.
* overflow:visible - needed for Firefox 3.x and IE 8.
* position:absolute; z-index:100; - needed for IE 7.
*@
.HtmlAttributes(new { style = "overflow:visible; position:absolute; z-index:100;" })
.Collapsible(false)
.Resizable(false)
.Scrollable(false)
.Content(
@<text>
<div class="splitterContent" style="width:100%;"><h1>My Application</h1></div>
</text>
);
vPanes.Add()
.Scrollable(false)
.Content(Html.Telerik().Splitter().Name("InnerSplitter")
.HtmlAttributes(new { style = "height: 100%; width: 100%; border: 0; overflow: hidden;" })
.Orientation(SplitterOrientation.Horizontal)
.Panes(hPanes =>
{
hPanes.Add()
.Size("250px")
.Collapsible(true)
.Content(@<h2>Navigation Here</h2>);
hPanes.Add()
.Content(@<div class="splitterContent">@RenderBody()</div>);
}).ToString());
vPanes.Add()
.Size("25px")
.Collapsible(false)
.Resizable(false)
.Scrollable(false)
.Content(@<div class="splitterContent"></div>);
})
.Render();
}
</div>
</div>
@{
Html.Telerik().ScriptRegistrar()
.Scripts(scripts =>
scripts.AddGroup("LayoutGroup", group =>
group.Add("~/Scripts/Shared/Layout.js")
)
)
.OnDocumentReady(
@<text>
Layout.Init();
</text>
);
}
@Html.Telerik().ScriptRegistrar()
</body>
</html>
Creating the Layout.js
The Layout javascript class contains the Layout.Init function that resizes the main splitter and also subscribes to the window's resize event so that the main splitter is resized whenever the browser is resized.
Here is the code:
var Layout = {};
Layout.Init = function() {
Layout.MainSplitter_Resize();
$(window).resize(Layout.MainSplitter_Resize);
}
Layout.MainSplitter_Resize = function() {
var height = $(window).height();
var splitter = $('#MainSplitter');
splitter.height(height - 25);
splitter.resize();
}
