React Popover - toolbarItems
In the following code, two items are defined on the toolbar: one is plain text, another is the Button widget:
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { Popover, ToolbarItem } from 'devextreme-react/popover';
- class App extends React.Component {
- constructor() {
- this.buttonOptions = {
- text: 'Refresh',
- onClick: function(e) { /* ... */ }
- };
- }
- render() {
- return (
- <Popover ... >
- <p>Popover Content</p>
- <ToolbarItem
- text="Title"
- location="before">
- </ToolbarItem>
- <ToolbarItem
- widget="dxButton"
- location="after"
- options={this.buttonOptions}>
- </ToolbarItem>
- </Popover>
- );
- }
- }
- 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)
- )
If you have technical questions, please create a support ticket in the DevExpress Support Center.