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
    2596 posts

    Posted 02 Jan 2017 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