This is a migrated thread and some comments may be shown as answers.
How to control Toolbar Item Position?
3 Answers 101 Views
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 04 Dec 2019, 05:50 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 06 Dec 2019, 03:28 PM

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.
0
Ryan
Top achievements
Rank 1
answered on 06 Dec 2019, 07:16 PM

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();
})
0
Ivan Danchev
Telerik team
answered on 10 Dec 2019, 01:56 PM

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.
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Ryan
Top achievements
Rank 1
Share this question
or