Getting Started with the Responsive Panel
This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC Responsive Panel and highlights the major steps in the configuration of the component.
You will initialize a Responsive Panel component that collapses a Menu when the screen is less than 768 pixels in width, and the Menu is then expanded or collapsed by a button. Next, you will handle the Open event of the component and disable a specified Menu item.
Prerequisites
To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:
To create a new pre-configured project for the Telerik UI for ASP.NET MVC components, you can use a project template.
To manually configure an existing project by using NuGet, see the Adding Telerik UI through NuGet.
1. Prepare the CSHTML File
The first step is to add the required directives at the top of the .cshtml document:
-
To use the Telerik UI for ASP.NET MVC HtmlHelpers:
@using Kendo.Mvc.UI
Optionally, you can structure the View content by adding the desired HTML elements like headings, divs, paragraphs, and others.
@using Kendo.Mvc.UI
<div class="main-container">
<a class="app-header">Your .NET Core Application</a>
</div>
2. Initialize the Responsive Panel
Use the Responsive Panel HtmlHelper to add the component to a page:
- The
Name()configuration method is mandatory as its value is used for theidand thenameattributes of the Responsive Panel element. - The
Breakpoint()option specifies the page width at which the Responsive Panel will hide, and its toggle button will be visible. - The
Orientation()method sets the direction from which the hidden element will open when the toggle button is activated. - The
Content()method contains the HTML content of the Responsive Panel.
@using Kendo.Mvc.UI
<div class="main-container">
<a class="app-header">Your .NET Core Application</a>
</div>
<div class="responsive-panel-container">
@(Html.Kendo().ResponsivePanel()
.Name("responsive-panel")
.Breakpoint(768)
.Orientation(ResponsivePanelOrientation.Top)
.Content("<ul id='MainMenu'><li>Home</li><li>About</li><li>Contacts</li></ul>")
)
</div>
3. Configure the Menu and the Toggle Button
The next step is to define the Menu as a content of the Responsive Panel and the toggle button that will be displayed when the screen width is less than 768 pixels.
When using the Responsive Panel HtmlHelper configuration, you can initialize the Menu component as Kendo UI for jQuery widget since the Content() method accepts only HTML.
Also, hide the toggle button with CSS and define a media query to show it when the 768 pixels breakpoint is reached.
@using Kendo.Mvc.UI
<div class="main-container">
<a class="app-header">Your .NET Core Application</a>
<button id="menu-button" class="k-rpanel-toggle k-button k-button-md k-button-rectangle k-button-solid-secondary btn-toggle">
<span class="menu-icon"></span>
</button>
</div>
<div class="responsive-panel-container">
@(Html.Kendo().ResponsivePanel()
.Name("responsive-panel")
.Breakpoint(768)
.Orientation(ResponsivePanelOrientation.Top)
.Content("<ul id='MainMenu'><li>Home</li><li>About</li><li>Contacts</li></ul>")
)
</div>
<script>
$(document).ready(function () {
$("#MainMenu").kendoMenu();
});
</script>
<style>
#menu-button {
display: none;
}
@@media (max-width: 767px) {
#responsive-panel {
transition: all linear .1s;
}
#menu-button {
display: block;
float: right;
}
.k-rpanel-expanded ul {
flex-direction: column;
}
}
</style>
4. Handle the Responsive Panel Events
The Responsive Panel exposes events that you can handle and implement a custom logic. In this tutorial, you will use the Open event that triggers before the Responsive Panel is opened, get a reference to the nested Menu, and disable the second Menu item.
@using Kendo.Mvc.UI
@(Html.Kendo().Responsive Panel()
.Name("responsive-panel")
.Events(e => e.Open("onOpen"))
.Content("<ul id='MainMenu'><li>Home</li><li>About</li><li>Contacts</li></ul>")
... // Other configuration.
)
<script>
$(document).ready(function () {
$("#MainMenu").kendoMenu();
});
</script>
<script>
function onOpen(e) {
// Custom logic when the Responsive Panel opens.
$("#MainMenu").data("kendoMenu").enable(".k-menu-item:nth-child(2)", false);
}
</script>
5. (Optional) Reference Existing Responsive Panel Instances
You can reference the Responsive Panel instances that you have created and build on top of their existing configuration:
-
Use the
idattribute of the component instance to get its reference.<script> $(document).ready(function() { var responsivePanelReference = $("#responsive-panel").data("kendoResponsivePanel"); // responsivePanelReference is a reference to the existing Responsive Panel instance of the helper. }); </script> -
Use the Responsive Panel client-side API to control the behavior of the component. In this example, you will use the
open()andclose()methods to programmatically toggle the Responsive Panel when a button is clicked.@(Html.Kendo().Button() .Name("menu-button") .Content("Toggle ResponsivePanel") .Events(ev => ev.Click("onBtnClick")) )<script> function onBtnClick(e) { e.stopPropagation(); var responsivePanelReference = $("#responsive-panel").data("kendoResponsivePanel"); if($("#responsive-panel").hasClass("k-rpanel-expanded")) { $("#responsive-panel").data("kendoResponsivePanel").close(); } else { $("#responsive-panel").data("kendoResponsivePanel").open(); } } </script>
For more information on referencing specific helper instances, see the Methods and Events article.