Convert Button List to Toolbar

2 posts, 0 answers
  1. Nathan
    Nathan avatar
    1 posts
    Member since:
    Jul 2016

    Posted 29 Dec 2016 Link to this post

    I am trying to convert the main nav bar at the top of my site to a kendo Toolbar.  I have some of the custom functionality for MVC authentication, such as the logout form that I would like to keep in there.  How can I convert this from a list of buttons to a toolbar?  See below for the current HTML.

     

    <ul>

     @if (Request.IsAuthenticated)
        {
            <li class="k-primary k-button">@Html.ActionLink("Label1", "Action1", "Controller")</li>
    <li class="k-primary k-button">@Html.ActionLink("Label2", "Action2", "Controller")</li>
    <li class="k-primary k-button">@Html.ActionLink("Label3", "Action3", "Controller")</li>
    <li class="k-primary k-button">@Html.ActionLink("Label4", "Action4", "Controller")</li>

            using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
            {
                @Html.AntiForgeryToken()

                <li class="k-primary k-button">
                    @Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
                </li>
                <li class="k-primary k-button"><a href="javascript:document.getElementById('logoutForm').submit()">Logout</a></li>
            }
        }
        else
        {
            <li class="k-primary k-button">@Html.ActionLink("Label1", "Action1", "Controller")</li>
    <li class="k-primary k-button">@Html.ActionLink("Label2", "Action2", "Controller")</li>
    <li class="k-primary k-button">@Html.ActionLink("Label3", "Action3", "Controller")</li>
    <li class="k-primary k-button">@Html.ActionLink("Label4", "Action4", "Controller")</li>
            <li class="k-primary k-button">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
            <li class="k-primary k-button">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
        }

    </ul>

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 02 Jan Link to this post

    Hello,

    Please check this demo that shows how to create and use the toolbar component:

    ˚http://demos.telerik.com/kendo-ui/toolbar/index

    Regards,
    Kiril Nikolov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top