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>

See Also

• Server-Side API