New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Events

The BottomNavigation exposes a Select() event that you can handle to customize the functions of the component. Using this event allows you to switch between the content of the BottomNavigation items.

For a complete example on basic BottomNavigation events, refer to the demo on using the events of the BottomNavigation.

    @using Kendo.Mvc.UI

    <div class="demo-app" style="position:relative">
        @(Html.Kendo().BottomNavigation()
            .Name("bottomNavigation")
            .PositionMode(BottomNavigationPositionMode.Absolute)
            .HtmlAttributes( new { style="bottom:0;"})
            .Items(i=> {
                i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user").Selected(true);
                i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
            })
            .Events(e => e.Select("onSelect"))
        )
        <div id="profile" class="demo-view" style="display: initial;position:absolute;">
            <h3>Your Profile</h3>
        </div>
        <div id="calendar" style="display: none;position:absolute" class="demo-view">
            @(Html.Kendo().Calendar().Name("calendar-widget"))
        </div>
    </div>
    <script>
        function onSelect(e) {
            var id = e.data.view
            $(".demo-view").hide();
            $("#" + id).show();
        }
    </script>
    <style>
        .demo-app {
            margin: auto;
            width: 234px;
            height: 400px;
        }
    </style>

Next Steps

See Also

In this article