Edit this page

Hybrid Drawer HtmlHelper Overview

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

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

Configuration

Below are listed the steps for you to follow when configuring the hybrid Kendo UI Drawer 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 the default application view. By default, the Drawer is revealed at the left side when swiping from left to right.

    Example
    
            <%: Html.Kendo().MobileView()
                    .Name("drawer-view")
                    .Title("Deleted Items")
                    .Content(obj =>
                        Html.Kendo().MobileListView()
                            .Items(items =>
                            {
                                items.Add().Icon("trash").Text("Untitled message 4");
                                items.Add().Icon("trash").Text("Untitled message 5");
                            })
                   )
            %>
    
    
            @(Html.Kendo().MobileView()
                    .Name("drawer-view")
                    .Title("Deleted Items")
                    .Content(obj =>
                        Html.Kendo().MobileListView()
                            .Items(items =>
                            {
                                items.Add().Icon("trash").Text("Untitled message 4");
                                items.Add().Icon("trash").Text("Untitled message 5");
                            })
                    )
            )
    
  4. Add a hybrid Drawer to the Index view.

    Example
    
            <%: Html.Kendo().MobileDrawer()
                    .Name("my-drawer")
                    .HtmlAttributes(new { style = "width: 270px" })
                    .Views("drawer-view") //A list of the view ids on which the drawer will appear
                    .Content(obj =>
                        Html.Kendo().MobileListView().Type("group")
                            .Items(root => {
                                root.Add().Text("Tasks").Items(items =>
                                {
                                    items.Add().Text("To Do");
                                    items.Add().Text("In Progress");
                                    items.Add().Text("Done");
                                    items.Add().Text("High Priority");
                                    items.Add().Text("Low Priority");
                                });
    
                                root.Add().Text("Account").Items(items =>
                                {
                                    items.Add().Icon("settings").Text("Settings");
                                    items.Add().Icon("off").Text("Log Out");
                                });
                            })
                    )
            %>
    
    
            @(Html.Kendo().MobileDrawer()
                    .Name("my-drawer")
                    .HtmlAttributes(new { style = "width: 270px" })
                    .Views("drawer-home") //A list of the view ids on which the drawer will appear
                    .Content(obj =>
                        Html.Kendo().MobileListView().Type("group")
                            .Items(root => {
                                root.Add().Text("Tasks").Items(items =>
                                {
                                    items.Add().Text("To Do");
                                    items.Add().Text("In Progress");
                                    items.Add().Text("Done");
                                    items.Add().Text("High Priority");
                                    items.Add().Text("Low Priority");
                                });
    
                                root.Add().Text("Account").Items(items =>
                                {
                                    items.Add().Icon("settings").Text("Settings");
                                    items.Add().Icon("off").Text("Log Out");
                                });
                            })
                    )
            )
    
  5. Initialize the mobile application.

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

Event Handling

You can subscribe to all hybrid Drawer events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

        <%: Html.Kendo().MobileDrawer()
                .Name("MobileDrawer")
                .Events(events => events
                    .BeforeShow("onBeforeShow")
                )
        %>

        <script>
        function onBeforeShow() {
            //Handle the show event.
        }
        </script>

        @(Html.Kendo().MobileDrawer()
                .Name("MobileDrawer")
                .Events(events => events
                    .BeforeShow("onBeforeShow")
                )
        )

        <script>
        function onBeforeShow() {
            //Handle the show event.
        }
        </script>

Reference

Instances

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

Example
    @(Html.Kendo().MobileDrawer()
            .Name("MobileDrawer")
    )
    <script>
    $(function() {
        //Notice that the Name() of the Drawer is used to get its client-side instance.
        var drawer = $("#Mobiledrawer").data("kendoMobileDrawer");
    });
    </script>

See Also