Edit this page

Hybrid PopOver HtmlHelper Overview

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

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

Configuration

Below are listed the steps for you to follow when configuring the hybrid Kendo UI PopOver 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 Kendo UI PopOver to the Index view. Like most hybrid Kendo UI widgets, the PopOver must be initialized within the hybrid View content.

    Example
    
            <% Html.Kendo().MobileView()
                    .Name("popover-view")
                    .Title("Inbox")
                    .Header(() =>
                    {
                        %>
                        <%: Html.Kendo().MobileButton()
                            .Align(MobileButtonAlign.Right)
                            .Url("#popover") //the id of the popover
                            .Text("Select location")
                            .Rel(MobileButtonRel.PopOver) //rel must be set to open the popover
                        %>
                        <%
                    })
                    .Content(() =>
                    {
                        %>
    
                        <% Html.Kendo().MobilePopOver()
                            .Name("popover")
                               .Popup(popup => popup.Width("20em").Height("10.6em"))
                               .Content(() =>
                                {
                                    %>
                                    PopOver content
                                    <%
                                })
                               .Render();
                        %>
                        <%
                    })
                    .Render();
            %>
    
    
            @(Html.Kendo().MobileView()
                    .Name("popover-view")
                    .Title("Inbox")
                    .Header(obj =>
                        Html.Kendo().MobileButton()
                            .Align(MobileButtonAlign.Right)
                            .Url("#popover") //the id of the popover
                            .Text("Select location")
                            .Rel(MobileButtonRel.PopOver) //rel must be set to open the popover
                    )
                    .Content(obj =>
                        Html.Kendo().MobilePopOver()
                            .Name("popover")
                            .Popup(popup => popup.Width("20em").Height("10.6em"))
                            .Content(
                                @<text>
                                    PopOver content
                                </text>)
                    )
            )
    
  4. Initialize the mobile application.

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

Event Handling

You can subscribe to all hybrid PopOver events.

By Handler Name

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

Example

        <% Html.Kendo().MobilePopOver()
                .Name("popOver")
                .Content(() =>
                {
                    %>
                    PopOver content
                    <%
                })
                .Events(events => events
                    .Close("onClose")
                )
                .Render();
        %>

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

        @(Html.Kendo().MobilePopOver()
            .Name("popOver")
            .Content(
                @<text>
                    PopOver content
                </text>)
                .Events(events => events
                    .Close("onClose")
                )
        )

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

Reference

Instances

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

Example
    @(Html.Kendo().MobilePopOver()
            .Name("popOver")
            .Content(
            @<text>
                PopOver content
            </text>)
    )
    <script>
    $(function() {
        // Notice that the Name() of the popover is used to get its client-side instance
        var popover = $("#popOver").data("kendoMobilePopOver");
    });
    </script>

See Also