How to control Toolbar Item Position?

4 posts, 1 answers
  1. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 04 Dec 2019 Link to this post

    Hi All,

    How can I make my add button and search alignItem = space in between

    Wanted to make add button placed at left  corner and the search on the right corner of the toolbar.

    Search position is okay but cant set the add button be on the left corner.

    Please see pic attached

    .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Search();
        })

     

     

    Thanks!

    Ryan

  2.
  3. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2130 posts

    Posted 06 Dec 2019 Link to this post

    Hi Ryan,

    The Grid should display the "Add new record" button in the left corner by default. Here's a screenshot that shows how it looks like at my end with the ToolBar configuration you posted when using the Bootstrap-v4 theme.

    The search panel is positioned in the right corner through the following CSS rule:

    .k-grid .k-grid-search {
 float: right;
}

    With regard to the "Add new record" button, there is no specific rule that positions it in the left corner, and it should be displayed there unless there is a custom CSS rule that overrides its position. Check whether removing all the custom CSS applied to the page and leaving only the Kendo UI CSS files/-s resolves the issue.

    Alternatively, check whether applying the following CSS rule will have the desired effect:

    .k-grid .k-grid-toolbar .k-grid-add {
	float: left;
}

    Regards,
    Ivan Danchev
    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.
  5. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 06 Dec 2019 in reply to Ivan Danchev Link to this post

    Thank you Ivan Danchev, it works!

    Just a followup, what about for excel, whats the name of css? wanted to put it beside create button.

    Thanks again!

    .ToolBar(toolbar =>
     {
       toolbar.Create();
       toolbar.Excel();
       toolbar.Search();
    })
  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2130 posts

    Posted 10 Dec 2019 Link to this post

    Hello Ryan,

    The class of the Excel toolbar button is .k-grid-excel, so the rule for Create and Excel buttons would look like this:

    .k-grid .k-grid-toolbar .k-grid-add, 
.k-grid .k-grid-toolbar .k-grid-excel {
	float: left;
}

     

    Regards,
    Ivan Danchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
  8.
Back to Top