DevExtreme jQuery - Specify Item Type
A Toolbar item may be plain text or a widget. Text items should have the text field specified.
jQuery
JavaScript
$(function() {
$("#toolbarContainer").dxToolbar({
items: [{
text: 'Delete',
location: 'before'
}, {
text: 'Products',
location: 'center'
}, {
text: 'Add',
location: 'after'
}]
});
});Angular
HTML
TypeScript
<dx-toolbar>
<dxi-item text="Delete" location="before"></dxi-item>
<dxi-item text="Products" location="center"></dxi-item>
<dxi-item text="Add" location="after"></dxi-item>
</dx-toolbar>
import { DxToolbarModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxToolbarModule
],
// ...
})Items that contain a widget should have the widget field specified. In addition, you need to declare the options object that will configure the widget. For a full list of fields this object has, refer to the API reference of the widget.
jQuery
JavaScript
$(function() {
$("#toolbarContainer").dxToolbar({
items: [{
widget: 'dxButton',
options: {
type: 'back',
text: 'Back',
onClick: function () {
// ...
}
},
location: 'before'
}, {
widget: 'dxSelectBox',
options: {
width: 140,
items: ['All', 'Family', 'Favorites'],
onItemClick: function (e) {
// ...
}
},
location: 'after'
},
// ...
]
});
});Angular
HTML
TypeScript
<dx-toolbar>
<dxi-item
widget="dxButton"
[options]="buttonOptions"
location="before">
</dxi-item>
<dxi-item
widget="dxSelectBox"
[options]="selectBoxOptions"
location="after">
</dxi-item>
</dx-toolbar>
import { DxToolbarModule, DxButtonModule, DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
buttonOptions = {
type: 'back',
text: 'Back',
onClick: function () {
// ...
}
};
selectBoxOptions = {
width: 140,
items: ['All', 'Family', 'Favorites'],
onItemClick: function (e) {
// ...
}
};
}
@NgModule({
imports: [
// ...
DxToolbarModule,
DxButtonModule,
DxSelectBoxModule
],
// ...
})See Also
Feedback