Edit this page

Hybrid NavBar HtmlHelper Overview

The hybrid NavBar HtmlHelper extension is a server-side wrapper for the hybrid Kendo UI NavBar widget.

It allows you to configure the hybrid Kendo UI NavBar from server-side code.

Getting Started

Configuration

Below are listed the steps for you to follow when configuring the hybrid Kendo UI NavBar for ASP.NET MVC.

  1. Create a new ASP.NET MVC 4 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.

  2. Open HomeController.cs and modify the Index action method.

    Example
       public ActionResult Index()
        {
            return View();
        }
    
  3. Add a hybrid NavBar to the Index view. Like most hybrid Kendo UI widgets, the NavBar must be initialized within the hybrid View content.

    Example
    
            <% Html.Kendo().MobileView()
                    .Name("navbar-home")
                    .Title("Index")
                    .Header(() =>
                    {
                        %>
                        <% Html.Kendo().MobileNavBar()
                               .Content(navbar =>
                                {
                                    %>
                                    <%: Html.Kendo().MobileBackButton()
                                            .Align(MobileButtonAlign.Left)
                                            .Text("Back")
                                    %>
                                    <%: navbar.ViewTitle("") %>
                                    <%
                                })
                               .Render();
                        %>
                        <%
                    })
                    .Content(() =>
                    {
                        %>
                        View Content
                        <%
                    })
                    .Render();
            %>
    
    
            @(Html.Kendo().MobileView()
                .Name("navbar-home")
                .Title("Index")
                .Header(obj =>
                    Html.Kendo().MobileNavBar()
                           .Content(navbar =>
                            @<text>
                                @(Html.Kendo().MobileBackButton()
                                        .Align(MobileButtonAlign.Left)
                                        .Text("Back"))
                                @navbar.ViewTitle("")
                            </text>)
                    )
                .Content(@<text>View Content</text>)
            )
    
  4. Initialize the mobile applic1.###### Example

    
            <%: Html.Kendo().MobileApplication()
                    .ServerNavigation(true)
            %>
    
    
            @(Html.Kendo().MobileApplication()
                .ServerNavigation(true)
            )
    
  5. Build and run the application.

Reference

Instances

You can reference a hybrid NavBar instance by using the code from the example below. Once a reference is established, use the hybrid NavBar API to control its behavior.

Example
    @(Html.Kendo().MobileView()
            .Name("navbar-home")
            .Title("Index")
            .Header(obj =>
                Html.Kendo().MobileNavBar()
                        .Name("MobileNavBar")
                        .Content(navbar =>
                            @<text>
                                @(Html.Kendo().MobileBackButton()
                                        .Align(MobileButtonAlign.Left)
                                        .Text("Back"))
                                @navbar.ViewTitle("")
                            </text>)
            )
            .Content(@<text>View Content</text>)
        )
    <script>
    $(function() {
        //Notice that the Name() of the NavBar is used to get its client-side instance.
        var navbar = $("#MobileNavBar").data("kendoMobileNavBar");
    });
    </script>

See Also