Hybrid Layout HtmlHelper Overview
The hybrid Telerik UI Layout HtmlHelper for ASP.NET MVC is a server-side wrapper for the hybrid Kendo UI Layout widget.
Basic Configuration
- Create a new ASP.NET MVC 5 application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application. If you decide not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application.
-
Open
HomeController.cs
and modify theIndex
action method.public ActionResult Index() { return View(); }
-
Add a Kendo UI Layout to the
Index
view.@(Html.Kendo().MobileLayout() .Name("layout") .Platform("ios") .Header(obj => Html.Kendo().MobileNavBar() .Content(navbar => @<text> @(Html.Kendo().MobileBackButton() .Align(MobileButtonAlign.Left) .HtmlAttributes(new { @class = "nav-button" }) .Url(Url.RouteUrl(new { controller = "suite" })) .Text("Back")) @navbar.ViewTitle("iOS Platform") </text>) ) .Footer(obj => Html.Kendo().MobileTabStrip() .Items(items => { items.Add().Icon("contacts").Text("Profile"); items.Add().Icon("wrench").Text("Settings"); }) ) )
-
Add the View that will use the Layout.
@(Html.Kendo().MobileView() .Name("layoutView") .Layout("layout") // the `Name` of the layout .Content( @<text> <p> This examples shows the platform specific layouts. Change the OS to see how the header and footer changes. </p> </text>) )
-
Initialize the mobile application.
@(Html.Kendo().MobileApplication() .ServerNavigation(true) )
Build and run the application.
Events
You can subscribe to all hybrid Layout events.
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().MobileLayout()
.Name("MobileLayout")
.Events(events => events
.Show("onShow")
)
)
<script>
function onShow() {
// Handle the show event.
}
</script>
Referencing Existing Instances
You can reference a hybrid Layout instance by using the code from the following example. Once a reference is established, use the hybrid Layout client-side API to control its behavior.
@(Html.Kendo().MobileLayout()
.Name("MobileLayout")
)
<script>
$(function() {
// The Name() of the Layout is used to get its client-side instance.
var layout = $("#MobileLayout").data("kendoMobileLayout");
});
</script>