ResponsivePanel TagHelper Overview

The Telerik UI ResponsivePanel TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI ResponsivePanel widget.

The ResponsivePanel allows you to hide part of a page content on small screens.

The ResponsivePanel is part of Telerik UI for ASP.NET Core, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

• Demo page for the ResponsivePanel

Initializing the ResponsivePanel

The following example demonstrates how to define the ResponsivePanel by using the ResponsivePanel TagHelper.

    <kendo-responsivepanel name="slidebar" breakpoint="1000" orientation="left">
        <div id="profile" class="widget">
            <h3>Profile</h3>
            <div>
                <div class="profile-photo"></div>
                <h4>Lynda Schleifer</h4>
                <p>Sales Associate</p>
            </div>
        </div>
        <div id="teammates" class="widget">
            <h3>Teammates</h3>
            <div>
                <div class="team-mate">
                    <img src="@Url.Content("~/content/web/panelbar/andrew.jpg")" alt="Andrew Fuller">
                    <h4>Andrew Fuller</h4>
                    <p>Team Lead</p>
                </div>
                <div class="team-mate">
                    <img src="@Url.Content("~/content/web/panelbar/nancy.jpg")" alt="Nancy Leverling">
                    <h4>Nancy Leverling</h4>
                    <p>Sales Associate</p>
                </div>
                <div class="team-mate">
                    <img src="@Url.Content("~/content/web/panelbar/robert.jpg")" alt="Robert King">
                    <h4>Robert King</h4>
                    <p>Business System Analyst</p>
                </div>
            </div>
        </div>
    </kendo-responsivepanel>

Basic Configuration

The configuration options of the ResponsivePanel TagHelper are passed as attributes of the tag.

        @(Html.Kendo().ResponsivePanel()
            .Name("sidebar")
            .Breakpoint(1000)
            .Orientation("left")
            .Content(@<text>
                <div id="profile" class="widget">
                    <h3>Profile</h3>
                    <div>
                        <div class="profile-photo"></div>
                        <h4>Lynda Schleifer</h4>
                        <p>Sales Associate</p>
                    </div>
                </div>
                <div id="teammates" class="widget">
                    <h3>Teammates</h3>
                    <div>
                        <div class="team-mate">
                            <img src="@Url.Content("~/content/web/panelbar/andrew.jpg")" alt="Andrew Fuller">
                            <h4>Andrew Fuller</h4>
                            <p>Team Lead</p>
                        </div>
                        <div class="team-mate">
                            <img src="@Url.Content("~/content/web/panelbar/nancy.jpg")" alt="Nancy Leverling">
                            <h4>Nancy Leverling</h4>
                            <p>Sales Associate</p>
                        </div>
                        <div class="team-mate">
                            <img src="@Url.Content("~/content/web/panelbar/robert.jpg")" alt="Robert King">
                            <h4>Robert King</h4>
                            <p>Business System Analyst</p>
                        </div>
                    </div>
                </div>
            </text>)
        )

        <kendo-responsivepanel name="slidebar" breakpoint="1000" orientation="left">
            <div id="profile" class="widget">
                <h3>Profile</h3>
                <div>
                    <div class="profile-photo"></div>
                    <h4>Lynda Schleifer</h4>
                    <p>Sales Associate</p>
                </div>
            </div>
            <div id="teammates" class="widget">
                <h3>Teammates</h3>
                <div>
                    <div class="team-mate">
                        <img src="@Url.Content("~/content/web/panelbar/andrew.jpg")" alt="Andrew Fuller">
                        <h4>Andrew Fuller</h4>
                        <p>Team Lead</p>
                    </div>
                    <div class="team-mate">
                        <img src="@Url.Content("~/content/web/panelbar/nancy.jpg")" alt="Nancy Leverling">
                        <h4>Nancy Leverling</h4>
                        <p>Sales Associate</p>
                    </div>
                    <div class="team-mate">
                        <img src="@Url.Content("~/content/web/panelbar/robert.jpg")" alt="Robert King">
                        <h4>Robert King</h4>
                        <p>Business System Analyst</p>
                    </div>
                </div>
            </div>
        </kendo-responsivepanel>

See Also

• Basic Usage of the ResponsivePanel TagHelper for ASP.NET Core (Demo)