Hybrid SplitView HtmlHelper Overview

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

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

Configuration

Below are listed the steps for you to follow when configuring the hybrid Kendo UI SplitView 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.

   public ActionResult Index()
   {
       return View();
   }
   

3. Add a Kendo UI SplitView to the Index view.

       <% Html.Kendo().MobileSplitView()
           .Name("MobileSplitView") //SplitView `id`
           .Panes(panes =>
           {
               // Add the side pane.
               panes.Add().Content(() =>
                   {
                       %>
                       <% Html.Kendo().MobileView()
                               .Title("Side View")
                               .Content("Side View Content")
                               .Render();
                       %>
                       <%
                   }
               );
               // Add the main pane.
               panes.Add().Content(() =>
                   {
                       %>
                       <% Html.Kendo().MobileView()
                               .Title("Main View")
                               .Content("Main View Content")
                               .Render();
                       %>
                       <%
                   }
               );
           })
           .Render();
       %>
   

       @(Html.Kendo().MobileSplitView()
           .Name("MobileSplitView") //SplitView `id`
           .Panes(panes =>
           {
               // Add the side pane.
               panes.Add().Content(
                   @<text>
                       @(Html.Kendo().MobileView()
                               .Title("Side View")
                               .Content("Side View Content")
                       )
                   </text>
               );
               // Add the main pane.
               panes.Add().Content(
                   @<text>
                       @(Html.Kendo().MobileView()
                               .Title("Main View")
                               .Content("Main View Content")
                       )
                   </text>
               );
           })
       )
   

4. Initialize the mobile application.

       <%: Html.Kendo().MobileApplication()
               .ServerNavigation(true)
       %>
   

       @(Html.Kendo().MobileApplication()
           .ServerNavigation(true)
       )
   

5. Build and run the application.

Event Handling

You can subscribe to all hybrid SplitView events.

By Handler Name

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

    <% Html.Kendo().MobileSplitView()
            .Name("MobileSplitView")
            .Panes(panes =>
            {
                panes.Add().Content(() =>
                    {
                        %>
                        <% Html.Kendo().MobileView()
                                .Title("Side View")
                                .Content("Side View Content")
                                .Render();
                        %>
                        <%
                    }
                );
            })
            .Events(events => events
                .Init("onInit")
            )
            .Render();
    %>

    <script>
        function onInit() {
            // Handle the init event.
        }
    </script>

    @(Html.Kendo().MobileSplitView()
            .Name("MobileSplitView")
            .Panes(panes =>
            {
                panes.Add().Content(
                    @<text>
                        @(Html.Kendo().MobileView()
                                .Title("Side View")
                                .Content("Side View Content")
                        )
                    </text>
                );
            })
            .Events(events => events
                .Init("onInit")
            )
    )

    <script>
        function onInit() {
            // Handle the init event.
        }
    </script>

Reference

Instances

You can reference a hybrid SplitView instance by using the jQuery.data() method and the value specified through the Name() method. Once a reference is established, use the hybrid SplitView API to control its behavior.

@(Html.Kendo().MobileSplitView()
        .Name("MobileSplitView") //SplitView `id`
        .Panes(panes =>
        {
            panes.Add().Content(
                @<text>
                    @(Html.Kendo().MobileView()
                            .Title("Side View")
                            .Content("Side View Content")
                    )
                </text>
            );
        })
)
<script>
    $(function() {
        // The Name() of the SplitView is used to get its client-side instance.
        var splitview = $("#MobileSplitView").data("kendoMobileSplitView");
    });
</script>

See Also

• Telerik UI for ASP.NET MVC API Reference: SplitViewBuilder
• Overview of the Hybrid UI SplitView Widget
• Overview of Telerik UI for ASP.NET MVC
• Fundamentals of Telerik UI for ASP.NET MVC
• Scaffolding in Telerik UI for ASP.NET MVC
• Telerik UI for ASP.NET MVC API Reference Folder
• Telerik UI for ASP.NET MVC HtmlHelpers Folder
• Tutorials on Telerik UI for ASP.NET MVC
• Telerik UI for ASP.NET MVC Troubleshooting