JavaScript/jQuery Popup - toolbarItems
In the following code, two items are defined on the toolbar: one is plain text, another is the Button widget:
jQuery
$(function() {
$("#popupContainer").dxPopup({
// ...
toolbarItems: [{
text: "Title",
location: "before"
}, {
widget: "dxButton",
location: "after",
options: {
text: "Refresh",
onClick: function(e) { /* ... */ }
}
}]
});
});
<div id="popupContainer">
<p>Popup content</p>
</div>Angular
<dx-popup ... >
<div *dxTemplate="let data of 'content'">
<p>Popup content</p>
</div>
<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 { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
refresh () { /* ... */ }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxPopupModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxPopupModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }ASP.NET MVC Controls
@(Html.DevExtreme().Popup()
<!-- ... -->
.ContentTemplate(@<text>
<p>Popup content</p>
</text>)
.ToolbarItems(ti => {
ti.Add()
.Text("Title")
.Location(ToolbarItemLocation.Before);
ti.Add()
.Widget(w => w.Button()
.Text("Refresh")
.OnClick("refresh"))
.Location(ToolbarItemLocation.After);
}
)
<script type="text/javascript">
function refresh() { /* ... */ }
</script>Vue
<template>
<DxPopup ... >
<p>Popup content</p>
<DxToolbarItem
text="Title"
location="before">
</DxToolbarItem>
<DxToolbarItem
widget="dxButton"
:options="buttonOptions"
location="after">
</DxToolbarItem>
</DxPopup>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';
export default {
components: {
DxPopup
},
data() {
return {
buttonOptions: {
text: 'Refresh',
onClick: function(e) { /* ... */ }
}
}
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { Popup, ToolbarItem } from 'devextreme-react/popup';
class App extends React.Component {
constructor() {
this.buttonOptions = {
text: 'Refresh',
onClick: function(e) { /* ... */ }
};
}
render() {
return (
<Popup ... >
<p>Popup Content</p>
<ToolbarItem
text="Title"
location="before">
</ToolbarItem>
<ToolbarItem
widget="dxButton"
location="after"
options={this.buttonOptions}>
</ToolbarItem>
</Popup>
);
}
}
export default App;component
An alias for the template option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
location
Use the ToolbarItemLocation enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Before, After, and Center.
options
Specifies a configuration object for the widget that presents a toolbar item.
When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, configure the widget with a lambda expression as follows:
// Instead of Popup here you can use Popover
@(Html.DevExtreme().Popup()
.ToolbarItems(items => {
items.Add().Widget(w => w
// Instead of Button here can be any other widget
.Button()
.Text("Back")
);
})
)' Instead of Popup here you can use Popover
@(Html.DevExtreme().Popup() _
.ToolbarItems(Sub(items)
items.Add().Widget(Function(w)
' Instead of Button here can be any other widget
Return w.Button().Text("Back")
End Function)
End Sub)
)render
An alias for the template option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
template
Whether you use a default or a custom template for widget items, you can specify a specific template for a particular item. To do so, set the template field for the data source object of this item. The following types of the specified value are available.
- Assign a jQuery object of the template's container.
- Assign a DOM Node of the template's container.
- Assign a function that returns the jQuery object or a DOM Node of the template's container.
toolbar
Use the Toolbar enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top and Bottom.
widget
When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, configure the widget with a lambda expression as follows:
// Instead of Popup here you can use Popover
@(Html.DevExtreme().Popup()
.ToolbarItems(items => {
items.Add().Widget(w => w
// Instead of Button here can be any other widget
.Button()
.Text("Back")
);
})
)' Instead of Popup here you can use Popover
@(Html.DevExtreme().Popup() _
.ToolbarItems(Sub(items)
items.Add().Widget(Function(w)
' Instead of Button here can be any other widget
Return w.Button().Text("Back")
End Function)
End Sub)
)