Specify Toolbar Items
The Popup has two toolbars: top and bottom. Items on these toolbars can be plain text or UI components. To configure the items, populate the toolbarItems array with objects. Each object configures an individual toolbar item. For example, the following code adds two toolbar items to the Popup: one is plain text, another is the Button UI component. They both occupy the top toolbar, because their toolbar property assumes its default value.
jQuery
HTML
JavaScript
<div id="popupContainer">
<p>Popup content</p>
</div>
$(function() {
$("#popupContainer").dxPopup({
title: "Popup Title",
visible: true,
toolbarItems: [{
text: "Title",
location: "before"
}, {
widget: "dxButton",
location: "after",
options: {
text: "Refresh",
onClick: function() {
// ...
}
}
}]
});
});Angular
HTML
TypeScript
<dx-popup
title="Popup Title"
[(visible)]="isPopupVisible">
<dxi-toolbar-item
text="Title"
location="before">
</dxi-toolbar-item>
<dxi-toolbar-item
widget="dxButton"
location="after"
[options]="{
text: 'Refresh',
onClick: refresh
}">
</dxi-toolbar-item>
</dx-popup>
import { DxPopupModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
isPopupVisible: boolean = true;
refresh () {
// ...
}
}
@NgModule({
imports: [
// ...
DxPopupModule,
DxButtonModule
],
// ...
})Vue
<template>
<DxPopup
:visible="isPopupVisible"
title="Popup Title">
<template>
<p>Popup content</p>
</template>
<DxToolbarItem
text="Title"
location="before"
/>
<DxToolbarItem
:options="buttonOptions"
widget="dxButton"
location="after"
/>
</DxPopup>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import {
DxPopup,
DxToolbarItem
} from 'devextreme-vue/popup';
export default {
components: {
DxPopup,
DxToolbarItem
},
data() {
return {
isPopupVisible: true,
buttonOptions: {
text: 'Refresh',
onClick: function() {
// ...
}
}
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Popup, ToolbarItem } from 'devextreme-react/popup';
const buttonOptions = {
text: 'Refresh',
onClick: function() {
// ...
}
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isPopupVisible: true
};
this.onHiding = this.onHiding.bind(this);
}
onHiding() {
this.setState({
isPopupVisible: false
});
}
render() {
return (
<Popup
visible={this.state.isPopupVisible}
title="Popup Title"
onHiding={this.onHiding}>
<ToolbarItem
text="Title"
location="before"
/>
<ToolbarItem
options={buttonOptions}
widget="dxButton"
location="after"
/>
</Popup>
);
}
}
export default App;See Also
Feedback