How to control Toolbar Item Position?

[Ryan]

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

[Ivan Danchev]

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

[Ryan]

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();
})

[Ivan Danchev]

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