Spacer
The Spacer
command type moves the tools that are declared after it to the right side of the ToolBar.
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items => {
items.Add().Type(CommandType.Button).Text("Button 1").Id("button1");
items.Add().Type(CommandType.Spacer);
items.Add().Type(CommandType.Button).Text("Button 2").Id("button2");
})
)
<kendo-toolbar name="ToolBar">
<toolbar-items>
<item type="CommandType.Button" text="Button 1" id="button1" />
<item type="CommandType.Spacer" />
<item type="CommandType.Button" text="Button 2" id="button2" />
</toolbar-items>
</kendo-toolbar>
You can use multiple spacers to create an equal amount of space between several tools.
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items => {
items.Add().Type(CommandType.Button).Text("Button 1").Id("button1");
items.Add().Type(CommandType.Spacer);
items.Add().Type(CommandType.Button).Text("Button 2").Id("button2");
items.Add().Type(CommandType.Spacer);
items.Add().Type(CommandType.Button).Text("Button 3").Id("button3");
})
)
<kendo-toolbar name="ToolBar">
<toolbar-items>
<item type="CommandType.Button" text="Button 1" id="button1" />
<item type="CommandType.Spacer" />
<item type="CommandType.Button" text="Button 2" id="button2" />
<item type="CommandType.Spacer" />
<item type="CommandType.Button" text="Button 3" id="button3" />
</toolbar-items>
</kendo-toolbar>