CancelCommandDirective
Represents the cancel command button directive of the Kendo UI ListView for Angular.
Provides the cancel
command of the ListView. You can apply this directive to any button
element inside a EditTemplateDirective
template.
When you click an associated button with the directive, the
cancel
event
triggers (see example).
<kendo-listview>
<ng-template kendoListViewEditTemplate>
<button kendoListViewCancelCommand>Cancel changes</button>
</ng-template>
</kendo-listview>
You can control the content of the button based on the state of the item.
<kendo-listview>
<ng-template kendoListViewEditTemplate let-isNew="isNew">
<button kendoListViewCancelCommand>{{isNew ? 'Discard' : 'Cancel changes'}}</button>
</ng-template>
</kendo-listview>
Selector
[kendoListViewCancelCommand]
Inputs
Name | Type | Default | Description |
---|---|---|---|
disabled |
|
|
When |
fillMode |
|
|
Sets the background and border styles of the Button. See Button Appearance. |
icon |
|
Sets the name of an existing font icon in the Kendo UI theme. | |
iconClass |
|
Defines a CSS class, or multiple classes separated by spaces applied to a | |
imageUrl |
|
Specifies a URL for an | |
rounded |
|
|
Sets the border radius of the Button. See Button Appearance. |
selected |
|
|
Sets the selected state of the Button.
Use with the |
size |
|
|
Sets the padding of the Button. See Button Appearance. |
svgIcon |
|
Sets an SVG icon to display inside the Button. | |
themeColor |
|
|
Sets a predefined theme color for the Button. The theme color applies as a background and border color and adjusts the text color. See Button Appearance. |
toggleable |
|
|
Adds visual styling to indicate when the Button is active. |
Events
Name | Type | Description |
---|---|---|
click |
|
Fires when the user clicks the Button. |
selectedChange |
|
Fires when the selected state of a toggleable button changes.
The event argument is the new selected state ( |
Methods
blur |
---|
Removes focus from the Button component. |
focus |
---|
Focuses the Button component. |