Toolbar Orientation

2 posts, 0 answers
  1. Joel
    Joel avatar
    132 posts
    Member since:
    Jun 2018

    Posted 06 Aug 2019 Link to this post

         Can I have a vertical toolbar?
  2. Aleksandar
    Admin
    Aleksandar avatar
    37 posts

    Posted 09 Aug 2019 Link to this post

    Hello Joel,

    A vertical toolbar would be possible if you customize the styling, as the native ToolBar does not support this functionality. For a built-in vertical functionality you can check the Menu and the available demo.

    For a simple ToolBar:
    @(Html.Kendo().ToolBar()
        .Name("MyToolBar")
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Button 1").Overflow(ShowInOverflowPopup.Never);
            items.Add().Type(CommandType.Button).Text("Button 2").Overflow(ShowInOverflowPopup.Never);
            items.Add().Type(CommandType.Button).Text("Button 3").Overflow(ShowInOverflowPopup.Never);
            items.Add().Type(CommandType.Button).Text("Button 4").Overflow(ShowInOverflowPopup.Never);
            items.Add().Type(CommandType.Button).Text("Button 5").Overflow(ShowInOverflowPopup.Never);
        })                                             
        )

    you need to specify the following style to make the toolbar vertical:
    <style>
        #MyToolBar {
            display: inline-block;
            width: 200px;
        }
     
        .k-button {
            display: block;
        }
    </style>

    I hope this helps. Let me know if you have further questions.

    Regards,
    Aleksandar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top