Alerts and Prompts

The Popup control can be used to implement static methods for showing alert and prompt dialogs. This sample lets you configure the Popup content and modify the style also.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import * as wijmo from '@grapecity/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create form let cmbType = new input.ComboBox('#type', { textChanged: (sender) => { document.querySelector('#btnShow').textContent = 'Show ' + sender.text; }, itemsSource: ['Alert', 'Prompt'] }), header = new input.ComboBox('#header', { text: 'Header' }), body = new input.ComboBox('#body', { text: 'Dialog message.' }), ok = new input.ComboBox('#ok', { text: 'OK' }), cancel = new input.ComboBox('#cancel', { text: 'Cancel' }), clsDialog = new input.ComboBox('#clsDialog', { text: 'modal-dialog' }), clsHeader = new input.ComboBox('#clsHeader', { text: 'modal-header' }), clsBody = new input.ComboBox('#clsBody', { text: 'modal-body' }), clsInput = new input.ComboBox('#clsInput', { text: 'form-control' }), clsFooter = new input.ComboBox('#clsFooter', { text: 'modal-footer' }), clsOK = new input.ComboBox('#clsOK', { text: 'btn btn-primary' }), clsCancel = new input.ComboBox('#clsCancel', { text: 'btn btn-default' }), small = document.querySelector('#small'); // // show the Alert/Prompt document.querySelector('#btnShow').addEventListener('click', () => { let options = getOptions(); // if (cmbType.text == 'Alert') { alertPopup(options, result => alert('you entered: ' + result)); } else { propmtPopup(options, result => alert('you entered: ' + result)); } }); // function getOptions() { return { header: header.text, body: body.text, small: small.checked, ok: ok.text || 'OK', cancel: cancel.text || 'Cancel', clsDialog: clsDialog.text || 'wj-dialog', clsHeader: clsHeader.text || 'wj-dialog-header', clsBody: clsBody.text || 'wj-dialog-body', clsInput: clsInput.text || 'wj-control', clsFooter: clsFooter.text || 'wj-dialog-footer', clsOK: clsOK.text || 'wj-btn', clsCancel: clsCancel.text || 'wj-btn' }; } // // alert popup function alertPopup(options, callback) { let dialog = createDialog(options), popup = new input.Popup(dialog); // popup.show(true, (sender) => { if (callback) { callback(sender.dialogResult); } }); } // // prompt popup function propmtPopup(options, callback) { let dialog = createDialog(options, true), popup = new input.Popup(dialog); // popup.show(true, (sender) => { if (callback) { let result = sender.dialogResult && sender.dialogResult.indexOf('ok') > -1 ? dialog.querySelector('input').value : null; callback(result); } }); } // // create dialog to use as an alert or prompt function createDialog(options, input = false) { // create dialog let template = '<div class="{clsDialog}" role="dialog">' + '<div class="{clsHeader}">' + '<h4>{header}</h4>' + '</div>' + '<div class="{clsBody}">' + '<p>{body}</p>' + (input ? '<input class="{clsInput}">' : '') + '</div>' + '<div class="{clsFooter}">' + '<button class="{clsOK} wj-hide-ok">{ok}</button>' + '<button class="{clsCancel} wj-hide">{cancel}</button>' + '</div>' + '</div>'; // let dialog = wijmo.createElement(wijmo.format(template, options)); // // honor 'small' option dialog.style.width = options.small ? '20%' : '40%'; // // dialog is ready return dialog; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popup Alerts and Prompts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <label for="btnShow">Show</label> <button id="btnShow" class="btn btn-primary">Show Popup</button> </div> <div class="row"> <div class="col-xs-6"> <!-- important options --> <div class="form-group"> <label for="type">Type</label> <div id="type"></div> </div> <div class="form-group"> <label for="header">Header</label> <input id="header"> </div> <div class="form-group"> <label for="body">Body</label> <input id="body"> </div> <div class="form-group"> <label for="small">Small</label> <input id="small" type="checkbox"> </div> <div class="form-group"> <label for="ok">OK Text</label> <input id="ok"> </div> <div class="form-group"> <label for="cancel">Cancel Text</label> <input id="cancel"> </div> </div> <div class="col-xs-6"> <!-- details --> <div class="form-group"> <label for="clsDialog">Dialog Class</label> <input id="clsDialog"> </div> <div class="form-group"> <label for="clsHeader">Header Class</label> <input id="clsHeader"> </div> <div class="form-group"> <label for="clsBody">Body Class</label> <input id="clsBody"> </div> <div class="form-group"> <label for="clsInput">Input Class</label> <input id="clsInput"> </div> <div class="form-group"> <label for="clsFooter">Footer Class</label> <input id="clsFooter"> </div> <div class="form-group"> <label for="clsOK">OK Class</label> <input id="clsOK"> </div> <div class="form-group"> <label for="clsCancel">Cancel Class</label> <input id="clsCancel"> </div> </div> </div> </div> </body> </html> label { width: 90px; text-align: right; margin-right: 6px; } .wj-combobox { width: 140px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { showAlert(popup: input.Popup) { popup.show(true, (sender: input.Popup) => { alert('you entered: ' + sender.dialogResult); }); } // showPrompt(popup: input.Popup) { popup.show(true, (sender: input.Popup) => { let result = sender.dialogResult && sender.dialogResult.indexOf('ok') > -1 ? popup.hostElement.querySelector('input').value : null; alert('you entered: ' + result); }); } } // @NgModule({ imports: [WjInputModule, FormsModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popup Alerts and Prompts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-popup #thePopup [style.width]="small.checked ? '20%' : '40%'" [ngClass]="clsDialog.text || 'wj-dialog'" role="dialog"> <div [ngClass]="clsHeader.text || 'wj-dialog-header'"> <h4>{{ header.text }}</h4> </div> <div [ngClass]="clsBody.text || 'wj-dialog-body'"> <p>{{ body.text }}</p> <input *ngIf="type.text == 'Prompt'" class="{{ clsInput.text || 'form-control' }}"> </div> <div [ngClass]="clsFooter.text || 'wj-dialog-footer'"> <button class="{{ clsOK.text || 'wj-btn' }} wj-hide-ok">{{ ok.text || "OK" }}</button> <button class="{{ clsCancel.text || 'wj-btn' }} wj-hide">{{ cancel.text || "Cancel" }}</button> </div> </wj-popup> <div class="form-group"> <label for="btnShow">Show</label> <button id="btnShow" class="btn btn-primary" (click)="type.text == 'Alert' ? showAlert(thePopup) : showPrompt(thePopup)"> Show {{ type.text }} </button> </div> <div class="row"> <div class="col-xs-6"> <!-- important options --> <div class="form-group"> <label for="type">Type</label> <wj-combo-box #type id="type" [itemsSource]="['Alert', 'Prompt']"></wj-combo-box> </div> <div class="form-group"> <label for="header">Header</label> <wj-combo-box #header id="header" [text]="'Header'"></wj-combo-box> </div> <div class="form-group"> <label for="body">Body</label> <wj-combo-box #body id="body" [text]="'Dialog message.'"></wj-combo-box> </div> <div class="form-group"> <label for="small">Small</label> <input #small id="small" type="checkbox"> </div> <div class="form-group"> <label for="ok">OK Text</label> <wj-combo-box #ok id="ok" [text]="'OK'"></wj-combo-box> </div> <div class="form-group"> <label for="cancel">Cancel Text</label> <wj-combo-box #cancel id="cancel" [text]="'Cancel'"></wj-combo-box> </div> </div> <div class="col-xs-6"> <!-- details --> <div class="form-group"> <label for="clsDialog">Dialog Class</label> <wj-combo-box #clsDialog id="clsDialog" [text]="'modal-dialog'"></wj-combo-box> </div> <div class="form-group"> <label for="clsHeader">Header Class</label> <wj-combo-box #clsHeader id="clsHeader" [text]="'modal-header'"></wj-combo-box> </div> <div class="form-group"> <label for="clsBody">Body Class</label> <wj-combo-box #clsBody id="clsBody" [text]="'modal-body'"></wj-combo-box> </div> <div class="form-group"> <label for="clsInput">Input Class</label> <wj-combo-box #clsInput id="clsInput" [text]="'form-control'"></wj-combo-box> </div> <div class="form-group"> <label for="clsFooter">Footer Class</label> <wj-combo-box #clsFooter id="clsFooter" [text]="'modal-footer'"></wj-combo-box> </div> <div class="form-group"> <label for="clsOK">OK Class</label> <wj-combo-box #clsOK id="clsOK" [text]="'btn btn-primary'"></wj-combo-box> </div> <div class="form-group"> <label for="clsCancel">Cancel Class</label> <wj-combo-box #clsCancel id="clsCancel" [text]="'btn btn-default'"></wj-combo-box> </div> </div> </div> </div> label { width: 90px; text-align: right; margin-right: 6px; } .wj-combobox { width: 140px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <wj-popup :style="{width: small ? '20%' : '40%'}" :class="[clsDialogText || 'wj-dialog', 'wj-popup']" role="dialog" :initialized="initPopup"> <div :class="clsHeaderText || 'wj-dialog-header'"> <h4>{{ headerText }}</h4> </div> <div :class="clsBodyText || 'wj-dialog-body'"> <p>{{ bodyText }}</p> <input v-if="typeText == 'Prompt'" :class="clsInputText || 'form-control'"> </div> <div :class="clsFooterText || 'wj-dialog-footer'"> <button :class="[clsOKText || 'wj-btn',' wj-hide-ok']">{{ okText || "OK" }}</button> <button :class="[clsCancelText || 'wj-btn', 'wj-hide']">{{ cancelText || "Cancel" }}</button> </div> </wj-popup> <div class="form-group"> <label for="btnShow">Show</label> <button id="btnShow" class="btn btn-primary" @click="typeText == 'Alert' ? showAlert(thePopup) : showPrompt(thePopup)"> Show {{ typeText }} </button> </div> <div class="row"> <div class="col-xs-6"> <!-- important options --> <div class="form-group"> <label for="type">Type</label> <wj-combo-box id="type" :itemsSource="itemSource" :selectedIndexChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="header">Header</label> <wj-combo-box id="header" :text="'Header'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="body">Body</label> <wj-combo-box id="body" :text="'Dialog message.'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="small">Small</label> <input id="small" type="checkbox" v-model="small"> </div> <div class="form-group"> <label for="ok">OK Text</label> <wj-combo-box id="ok" :text="'OK'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="cancel">Cancel Text</label> <wj-combo-box id="cancel" :text="'Cancel'" :textChanged="textChanged"></wj-combo-box> </div> </div> <div class="col-xs-6"> <!-- details --> <div class="form-group"> <label for="clsDialog">Dialog Class</label> <wj-combo-box id="clsDialog" :text="'modal-dialog'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="clsHeader">Header Class</label> <wj-combo-box id="clsHeader" :text="'modal-header'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="clsBody">Body Class</label> <wj-combo-box id="clsBody" :text="'modal-body'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="clsInput">Input Class</label> <wj-combo-box id="clsInput" :text="'form-control'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="clsFooter">Footer Class</label> <wj-combo-box id="clsFooter" :text="'modal-footer'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="clsOK">OK Class</label> <wj-combo-box id="clsOK" :text="'btn btn-primary'" :textChanged="textChanged"></wj-combo-box> </div> <div class="form-group"> <label for="clsCancel">Cancel Class</label> <wj-combo-box id="clsCancel" :text="'btn btn-default'" :textChanged="textChanged"></wj-combo-box> </div> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function(){ return { itemSource: ['Alert', 'Prompt'], clsDialogText : 'modal-dialog', small: false, clsHeaderText: 'modal-header', headerText: 'Header', clsBodyText: 'modal-body', bodyText: 'Dialog message.', clsInputText: 'form-control', clsFooterText: 'modal-footer', clsOKText: 'btn btn-primary', okText: 'OK', clsCancelText: 'btn btn-default', cancelText: 'Cancel', typeText: 'Alert' } }, methods: { initPopup: function(popup){ this.thePopup = popup; }, textChanged: function(combo){ this[combo.hostElement.id+'Text'] = combo.text; }, showAlert: function(popup) { popup.show(true, (sender) => { alert('you entered: ' + sender.dialogResult); }); }, showPrompt: function(popup) { popup.show(true, (sender) => { let result = sender.dialogResult && sender.dialogResult.indexOf('ok') > -1 ? popup.hostElement.querySelector('input').value : null; alert('you entered: ' + result); }); } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> label { width: 90px; text-align: right; margin-right: 6px; } .container-fluid .wj-combobox { width: 140px; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popup Alerts and Prompts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjInput from '@grapecity/wijmo.react.input'; // class App extends React.Component { constructor(props) { super(props); this.initPopup = (popup) => { this.setState({ thePopup: popup }); }; this.showAlert = (popup) => { popup.show(true, (sender) => { alert('you entered: ' + sender.dialogResult); }); }; this.showPrompt = (popup) => { popup.show(true, (sender) => { let result = sender.dialogResult && sender.dialogResult.indexOf('ok') > -1 ? popup.hostElement.querySelector('input').value : null; alert('you entered: ' + result); }); }; this.textChanged = (combo) => { switch (combo.hostElement.id) { case "clsHeader": this.setState({ clsHeaderText: combo.text }); break; case "header": this.setState({ headerText: combo.text }); break; case "clsBody": this.setState({ clsBodyText: combo.text }); break; case "body": this.setState({ bodyText: combo.text }); break; case "clsInput": this.setState({ clsInputText: combo.text }); break; case "clsFooter": this.setState({ clsFooterText: combo.text }); break; case "clsOK": this.setState({ clsOKText: combo.text }); break; case "ok": this.setState({ okText: combo.text }); break; case "clsCancel": this.setState({ clsCancelText: combo.text }); break; case "cancel": this.setState({ cancelText: combo.text }); break; case "type": this.setState({ typeText: combo.text }); break; } }; this.updateSmallStatus = (target) => { this.setState({ small: target.checked }); }; this.state = { itemSource: ['Alert', 'Prompt'], clsDialogText: 'modal-dialog', small: false, clsHeaderText: 'modal-header', headerText: 'Header', clsBodyText: 'modal-body', bodyText: 'Dialog message.', clsInputText: 'form-control', clsFooterText: 'modal-footer', clsOKText: 'btn btn-primary', okText: 'OK', clsCancelText: 'btn btn-default', cancelText: 'Cancel', typeText: 'Alert' }; } render() { return <div className="container-fluid"> <wjInput.Popup style={{ width: this.state.small ? '20%' : '40%' }} className={[this.state.clsDialogText || 'wj-dialog', 'wj-popup'].join(' ')} role="dialog" initialized={this.initPopup}> <div className={this.state.clsHeaderText || 'wj-dialog-header'}> <h4>{this.state.headerText}</h4> </div> <div className={this.state.clsBodyText || 'wj-dialog-body'}> <p>{this.state.bodyText}</p> {(this.state.typeText == 'Prompt') ? (<input className={this.state.clsInputText || 'form-control'}></input>) : null} </div> <div className={this.state.clsFooterText || 'wj-dialog-footer'}> <button className={[this.state.clsOKText || 'wj-btn', ' wj-hide-ok'].join(' ')}>{this.state.okText || "OK"}</button> <button className={[this.state.clsCancelText || 'wj-btn', 'wj-hide'].join(' ')}>{this.state.cancelText || "Cancel"}</button> </div> </wjInput.Popup> <div className="form-group"> <label htmlFor="btnShow">Show</label> <button id="btnShow" className="btn btn-primary" onClick={e => this.state.typeText == 'Alert' ? this.showAlert(this.state.thePopup) : this.showPrompt(this.state.thePopup)}> Show {this.state.typeText} </button> </div> <div className="row"> <div className="col-xs-6"> <div className="form-group"> <label htmlFor="type">Type</label> <wjInput.ComboBox id="type" itemsSource={this.state.itemSource} selectedIndexChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="header">Header</label> <wjInput.ComboBox id="header" text={this.state.headerText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="body">Body</label> <wjInput.ComboBox id="body" text={this.state.bodyText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="small">Small</label> <input id="small" type="checkbox" defaultChecked={false} onChange={e => this.updateSmallStatus(e.target)}/> </div> <div className="form-group"> <label htmlFor="ok">OK Text</label> <wjInput.ComboBox id="ok" text={this.state.okText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="cancel">Cancel Text</label> <wjInput.ComboBox id="cancel" text={this.state.cancelText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> </div> <div className="col-xs-6"> <div className="form-group"> <label htmlFor="clsDialog">Dialog Class</label> <wjInput.ComboBox id="clsDialog" text={this.state.clsDialogText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="clsHeader">Header Class</label> <wjInput.ComboBox id="clsHeader" text={this.state.clsHeaderText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="clsBody">Body Class</label> <wjInput.ComboBox id="clsBody" text={this.state.clsBodyText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="clsInput">Input Class</label> <wjInput.ComboBox id="clsInput" text={this.state.clsInputText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="clsFooter">Footer Class</label> <wjInput.ComboBox id="clsFooter" text={this.state.clsFooterText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="clsOK">OK Class</label> <wjInput.ComboBox id="clsOK" text={this.state.clsOKText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> <div className="form-group"> <label htmlFor="clsCancel">Cancel Class</label> <wjInput.ComboBox id="clsCancel" text={this.state.clsCancelText} textChanged={this.textChanged}> </wjInput.ComboBox> </div> </div> </div> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> label { width: 90px; text-align: right; margin-right: 6px; } .wj-combobox { width: 140px; } body { margin-bottom: 24pt; }