Edit this page

ModalView HtmlHelper Overview

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

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

Getting Started

Configuration

Below are listed the steps for you to follow when configuring the hybrid Kendo UI ModalView 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()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
    
            return View();
        }
    
  3. Add a hybrid Kendo UI Button to open the ModalView.

    Example
    
            <% Html.Kendo().MobileView()
                    .Name("modalview-view")
                    .Content(() =>
                    {
                        %>
                        <%: Html.Kendo().MobileButton()
                                .Text("Open")
                                .Rel(MobileButtonRel.ModalView)
                                .Url("#ModalView")
                        %>
                        <%
                    })
                    .Render();
            %>
    
    
            @(Html.Kendo().MobileView()
                .Name("modalview-view")
                .Content(
                    @<text>
                        @(Html.Kendo().MobileButton()
                            .Text("Open")
                            .Rel(MobileButtonRel.ModalView)
                            .Url("#ModalView")
                        )
                    </text>)
            )
    
  4. Add a Kendo UI ModalView to the Index view.

    Example
    
            <% Html.Kendo().MobileModalView()
                    .Name("ModalView")
                    .HtmlAttributes(new { style = "width: 95%; height: 18em;"  })
                    .Content(() =>
                    {
                        %>
                        ModalView Content
                        <%
                    })
                    .Render();
            %>
    
    
            @(Html.Kendo().MobileModalView()
                    .Name("ModalView")
                    .HtmlAttributes(new { style = "width: 95%; height: 18em;"  })
                    .Content(
                        @<text>
                            ModalView Content
                        </text>
                    )
            )
    
  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 ModalView events.

By Handler Name

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

Example

        <% Html.Kendo().MobileModalView()
                .Name("ModalView")
                .HtmlAttributes(new { style = "width: 95%; height: 18em;"  })
                .Content(() =>
                {
                    %>
                    ModalView Content
                    <%
                })
                .Events(events => events
                    .Close("onClose")
                )
                .Render();
        %>

        <script>
        function onClose() {
            //Handle the close event.
        }
        </script>

        @(Html.Kendo().MobileModalView()
                .Name("ModalView")
                .HtmlAttributes(new { style = "width: 95%; height: 18em;"  })
                .Content(
                    @<text>
                        ModalView Content
                    </text>
                )
                .Events(events => events
                    .Close("onClose")
                )
        )

        <script>
        function onClose() {
            //Handle the close event.
        }
        </script>

Reference

Instances

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

Example
    @(Html.Kendo().MobileModalView()
            .Name("ModalView")
            .HtmlAttributes(new { style = "width: 95%; height: 18em;"  })
            .Content(
                @<text>
                    ModalView Content
                </text>
            )
    )
    <script>
    $(function() {
        //Notice that the Name() of the ModalView is used to get its client-side instance.
        var modalview = $("#ModalView").data("kendoMobileModalView");
    });
    </script>

See Also