JavaScript/jQuery Popup - toolbarItems
In the following code, two items are defined on the toolbar: one is plain text, another is the Button widget:
- $(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>
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)
- )
If you have technical questions, please create a support ticket in the DevExpress Support Center.