Specifying the Content Template
The template implementation depends on the used framework or library. Examples of jQuery, Angular, and ASP.NET MVC are presented below. They show how to create a template consisting of static (text) and dynamic (the Button UI component) content.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Popup } from 'devextreme-react/popup';
- import { Button } from 'devextreme-react/button';
- const renderContent = () => {
- return (
- <p>Static content</p>
- <Button
- text="Click me"
- onClick={buttonClick}
- />
- );
- }
- const buttonClick = () => {
- // ...
- }
- 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"
- contentRender={renderContent}
- onHiding={this.onHiding}
- />
- );
- }
- }
- export default App;
Switching Templates On the Fly
If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Popup } from 'devextreme-react/popup';
- import { Button } from 'devextreme-react/button';
- const firstTemplate = () => {
- return (
- <p>First template</p>
- );
- }
- const secondTemplate = () => {
- return (
- <p>Second template</p>
- );
- }
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isPopupVisible: true,
- renderContent: firstTemplate
- };
- this.changeTemplate = this.changeTemplate.bind(this);
- this.onHiding = this.onHiding.bind(this);
- }
- changeTemplate() {
- this.setState({
- renderContent: this.state.renderContent === firstTemplate ? secondTemplate : firstTemplate
- });
- }
- onHiding() {
- this.setState({
- isPopupVisible: false
- });
- }
- render() {
- return (
- <div>
- <Popup
- title="Popup Title"
- visible={this.state.isPopupVisible}
- onHiding={this.onHiding}
- contentRender={this.state.renderContent}
- />
- <Button
- text="Change the Template"
- onClick={this.changeTemplate}
- />
- </div>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.