Button ToolBar Command Type
The ToolBar supports and can render the Button as a toolbar command for enabling the user to execute specific actions. You can further configure the Button command type and control its behavior, state, and appearance.
Supported Options
The Button command type of the ToolBar provides the following methods for further configurations:
-
Text()
—Sets the text. -
ShowText()
—Specifies where the text will be displayed. The possible values areToolbar
,Overflow
, orBoth
(default). -
Icon()
—Sets an icon for the item. The icon has to be an existing Kendo UI theme sprite. -
ImageUrl()
—If set, the ToolBar will render an image with a specified URL in the button. -
ShowIcon()
—Specifies where the button icon will be displayed. The possible values areToolbar
,Overflow
, orBoth
(default). -
SpriteCssClass()
—Defines a CSS class (or multiple classes, separated by spaces) which will be used for the button icon. -
Id()
—Specifies the ID of the button. -
Enable()
—Specifies whether the control is initially enabled or disabled. The default value istrue
. -
Primary()
—Specifies whether the button is primary. Primary buttons receive different styling. -
Overflow()
—Specifies how the button behaves when the ToolBar is resized. The possible values areAlways
,Never
, orAuto
(default). -
Togglable()
—Specifies if the button is togglable, for example, has a selected and unselected state. -
Selected()
—Specifies if the toggle button is initially selected. Applicable only for buttons with theTogglable()
method set totrue
. -
Group()
—Assigns the button to a group. Applicable only for buttons with theTogglable()
method set totrue
.
Configuration of the Button
The following example demonstrates how to configure the properties of the button command type in the ToolBar.
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items =>
{
items.Add().Type(CommandType.Button)
.Text("Button")
.ShowText(ShowIn.Both)
.Icon("folder-add")
.SpriteCssClass("myIcon")
.ImageUrl("../content/btnImage.png")
.ShowIcon(ShowIn.Toolbar)
.Id("myButton")
.Enable(true)
.Primary(false)
.Overflow(ShowInOverflowPopup.Auto)
.Togglable(true)
.Selected(true)
.Group("myGroup")
.Toggle("onToggle")
.Click("onClick");
})
)
<script>
function onToggle(e){
// Handle the toggle event of the Button.
}
function onClick(e){
// Handle the click event of the Button.
}
</script>
<kendo-toolbar name="ToolBar">
<toolbar-items>
<item command-type="CommandType.Button"
text="Button"
click="onClick"
toggle="onToggle"
type="CommandType.Button"
icon="folder-add"
image-url="../content/btnImage.png"
sprite-css-class="myIcon"
show-icon="ShowIn.Toolbar"
id="myButton"
enable="true"
primary="false"
overflow="ShowInOverflowPopup.Auto"
togglable="true"
selected="true"
group="myGroup"
show-text="ShowIn.Both">
</item>
</toolbar-items>
</kendo-toolbar>
<script>
function onToggle(e){
// Handle the toggle event of the Button.
}
function onClick(e){
// Handle the click event of the Button.
}
</script>
Overflow of the Button
To control the overflow state of the Button, configure the Overflow()
method with any of the following values:
-
Always
—The button will be rendered and displayed only in the command overflow popup. -
Never
—The button will be rendered and displayed only in the ToolBar wrapper. -
Auto
—The button will be rendered both in the ToolBar wrapper and in the command overflow popup. Depending on the available space in the ToolBar wrapper, it will be displayed in only one of the locations.
When resizing is enabled, the button will be rendered once in the ToolBar and another time in the command overflow popup. If the button has a set
ID
, it will be assigned to the element in the ToolBar wrapper. The corresponding element in the command overflow popup will receive the sameID
with an"_overflow"
suffix. For example, a button withid: "foo"
andoverflow: "auto"
will render an element withid="foo"
in the ToolBar and another element withid="foo_overflow"
in the ToolBar command overflow popup.
The following example demonstrates the properties of the button.
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("Button 1").Overflow(ShowInOverflowPopup.Auto);
items.Add().Type(CommandType.Button).Text("Button 2").Overflow(ShowInOverflowPopup.Always);
items.Add().Type(CommandType.Button).Text("Button 3").Overflow(ShowInOverflowPopup.Never);
})
)
<kendo-toolbar name="ToolBar">
<toolbar-items>
<item type="CommandType.Button" text="Button1" overflow="ShowInOverflowPopup.Auto"></item>
<item type="CommandType.Button" text="Button2" overflow="ShowInOverflowPopup.Always"></item>
<item type="CommandType.Button" text="Button3" overflow="ShowInOverflowPopup.Never"></item>
</toolbar-items>
</kendo-toolbar>
Icons and Images
To control the appearance of the Button, use any of the following methods:
-
Icon()
—The property defines a name of an existing icon from the Kendo UI theme sprite. The icon will be applied as a background image of aspan
element that is rendered inside the Button. For a list of available icon names, refer to the demo on icons. -
ImageUrl()
—The property defines an URL which will be used for animg
element inside the Button. Theimg
element will be rendered automatically by the widget. -
SpriteCssClass()
—The property defines one or more CSS classes that are separated by spaces which will be used for applying a background image to aspan
element inside the Button. To use an icon from the Kendo UI theme sprite background image, use theicon
property.
The following example demonstrates how to use icons in the ToolBar when you set the appearance of the Button.
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("Button 1").Icon("folder-add");
items.Add().Type(CommandType.Button).Text("Button 2").ImageUrl("/images/edit-icon.gif");
items.Add().Type(CommandType.Button).Text("Button 3").SpriteCssClass("myEditIcon");
})
)
<kendo-toolbar name="ToolBar">
<toolbar-items>
<item type="CommandType.Button" text="Button1" icon="folder-add"></item>
<item type="CommandType.Button" text="Button2" image-url="/images/edit-icon.gif"></item>
<item type="CommandType.Button" text="Button3" sprite-css-class="myEditIcon"></item>
</toolbar-items>
</kendo-toolbar>