React Popover - toolbarItems
In the following code, two items are defined on the toolbar: one is plain text, another is the Button widget:
jQuery
$(function() { $("#popoverContainer").dxPopover({ // ... toolbarItems: [{ text: "Title", location: "before" }, { widget: "dxButton", location: "after", options: { text: "Refresh", onClick: function(e) { /* ... */ } } }] }); });
<div id="popoverContainer"> <p>Popover content</p> </div>
Angular
<dx-popover ... > <div *dxTemplate="let data of 'content'"> <p>Popover 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-popover>
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 { DxPopoverModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxPopoverModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
ASP.NET MVC Controls
@(Html.DevExtreme().Popover() <!-- ... --> .ContentTemplate(@<text> <p>Popover 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> <dx-popover ... > <p>Popover content</p> <dx-toolbar-item text="Title" location="before"> </dx-toolbar-item> <dx-toolbar-item widget="dxButton" :options="buttonOptions" location="after"> </dx-toolbar-item> <dx-popover> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxPopover, { DxToolbarItem } from 'devextreme-vue/popover'; export default { components: { DxPopover }, data() { return { buttonOptions: { text: 'Refresh', onClick: function(e) { /* ... */ } } } } } </script>
<template> <dx-component /> </template> <script> import DxComponent from './components/DxComponent'; export default { components: { DxComponent } } </script>
React
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 DxComponent 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 DxComponent;
import React, { Component } from 'react'; import './App.css'; import DxComponent from './DxComponent'; class App extends Component { render() { return ( <div> <DxComponent /> </div> ); } } export default App;
location
Use the ToolbarItemLocation
enum to specify this option when the widget is used as an ASP.NET MVC 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 Controls, configure the widget with a lambda expression in the following manner.
// 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) )
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 Control. This enum accepts the following values: Top
and Bottom
.
widget
When using ASP.NET MVC Controls, configure the widget with a lambda expression in the following manner.
// 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.