Tab items can be disabled dynamically by passing the index and boolean value with the enableTab method and also passing index or HTML element to select an item from the tab using select method.
Create the following contents for each tab in the wizard.
You can go back on each tab using buttons available in it and tabs are disabled to navigate through tab header click actions. Once you end the wizard all the data get cleared and wizard goes back to starting tab.
In the below demo, designed for simple train reservation module that enable/disable tab items based on sequential validation of each Tab content.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
export class App extends React.Component {
constructor() {
super(...arguments);
this.today = new Date();
this.dlgTarget = document.querySelector(".sb-content-tab.e-tab .e-content.sb-sample-content-area");
this.dateMin = new Date(this.today.getTime());
this.dateMax = new Date(this.today.getTime() + 60 * 24 * 60 * 60 * 1000);
this.fields = { id: "id", text: "text", value: "text" };
this.autoCompleteFields = { text: "name", value: "name" };
this.dateValue = new Date();
this.headerText = [
{ text: "New Booking" },
{ text: "Train List" },
{ text: "Add Passenger" },
{ text: "Make Payment" }
];
this.quotas = [
{ id: "1", text: "Business Class" },
{ id: "2", text: "Economy Class" },
{ id: "4", text: "Common Class" }
];
this.gender = [{ id: "1", text: "Male" }, { id: "2", text: "Female" }];
this.berths = [
{ id: "1", text: "Upper" },
{ id: "2", text: "Lower" },
{ id: "3", text: "Middle" },
{ id: "4", text: "Window" },
{ id: "5", text: "Aisle" }
];
this.cities = [
{ name: "Chicago", fare: 300 },
{ name: "San Francisco", fare: 125 },
{ name: "Los Angeles", fare: 175 },
{ name: "Seattle", fare: 250 },
{ name: "Florida", fare: 150 }
];
this.dlgButtons = [
{
buttonModel: { content: "OK", isPrimary: true },
// tslint:disable-next-line: no-empty
click: () => {
this.alertDlg.hide();
this.tab.enableTab(0, true);
this.tab.enableTab(1, false);
this.tab.enableTab(2, false);
this.tab.enableTab(3, false);
this.tab.select(0);
}
}
];
}
dlgCreated() {
const proxy = this;
proxy.alertDlg.hide();
}
focusIn() {
const proxy = this;
proxy.show();
}
tabSelected(e) {
if (e.isSwiped) {
e.cancel = true;
}
}
trainSelected(args) {
this.selectedTrain = args.data;
}
btnClicked(e) {
switch (e.target.id) {
case "searchNext":
/* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */
if (this.startPoint.value != null &&
this.endPoint.value != null &&
this.ticketType.value != null &&
this.journeyDate.value != null) {
if (this.startPoint.value &&
this.startPoint.value === this.endPoint.value) {
document.getElementById("err1").innerText =
"* Arrival point can't be same as Departure";
}
else {
this.tab.enableTab(0, false);
this.tab.enableTab(1, true);
this.filterTrains(e);
this.tab.select(1);
document.getElementById("err1").innerText = "";
document.getElementById("err2").innerText = "";
}
}
else {
document.getElementById("err1").innerText =
"* Please fill all the details before proceeding";
}
break;
case "bookTickets":
/* Based on the selected station generate Grid content to display trains available */
if (this.availTrainGrid.getSelectedRecords() === undefined ||
this.availTrainGrid.getSelectedRecords().length === 0) {
document.getElementById("err2").innerText =
"* Select your convenient train";
}
else {
this.tab.enableTab(2, true);
this.tab.select(2);
this.tab.enableTab(1, false);
document.getElementById("err2").innerText = "";
}
break;
case "confirmTickets":
/* Get the Passenger details and validate the fields must not be left empty */
const name = document.getElementById("pass_name1");
const age = this.pass_age1.value;
const gender = this.pass_gender1.value;
if (name.value === "" || age === "" || gender === "") {
document.getElementById("err3").innerText =
"* Please enter passenger details";
}
else {
this.tab.enableTab(3, true);
this.tab.select(3);
this.tab.enableTab(2, false);
document.getElementById("err3").innerText = "";
this.finalizeDetails(e);
}
break;
case "makePayment":
this.alertDlg.show();
break;
case "goToSearch":
/* Go back to change class, date or boarding places */
this.selectedTrain = [];
this.tab.enableTab(0, true);
this.tab.select(0);
this.tab.enableTab(1, false);
break;
case "goBackToBook":
/* Change the preferred train chosen already */
this.tab.enableTab(1, true);
this.tab.select(1);
this.tab.enableTab(2, false);
break;
case "goBackDetails":
/* Update passenger detail before confirming the payment */
this.tab.enableTab(2, true);
this.tab.select(2);
this.tab.enableTab(3, false);
break;
}
}
filterTrains(args) {
/* Generating trains based on source and destination chosen */
const result = [];
const fromCity = this.startPoint.value;
const toCity = this.endPoint.value;
const count = Math.floor(Math.random() * 3 + 2);
for (let i = 0; i < count; i++) {
// tslint:disable-next-line: ban-types
const details = {};
details.TrainNo = Math.floor(Math.random() * 20 + 19000);
details.Name = "Train " + i;
details.Departure = fromCity;
details.Arrival = toCity;
details.Availability = Math.floor(Math.random() * 20 + 20);
result.push(details);
}
setTimeout(() => {
this.availTrainGrid.dataSource = result;
this.availTrainGrid.dataBind();
}, 100);
}
finalizeDetails(args) {
/* Get the passenger details and update table with name and other details for confirmation */
const reserved = [];
let passCount = 0;
const name1 = document.getElementById("pass_name1");
const name2 = document.getElementById("pass_name2");
const name3 = document.getElementById("pass_name3");
for (let i = 1; i <= 3; i++) {
if (name1.value !== "") {
// tslint:disable-next-line: ban-types
const details = {};
const gender = (i === 1
? this.pass_gender1.value
: i === 2
? this.pass_gender2.value
: this.pass_gender3.value);
const berth = (i === 1
? this.pass_berth1.value
: i === 2
? this.pass_berth2.value
: this.pass_berth3.value);
details.TrainNo = this.selectedTrain.TrainNo.toString();
details.PassName =
i === 1 ? name1.value : i === 2 ? name2.value : name3.value;
details.Gender = gender === "" ? "Male" : gender;
details.Berth = berth === "" ? berth : "Any";
if (details.PassName !== "") {
reserved.push(details);
}
passCount++;
}
let calcFare = 0;
// tslint:disable-next-line: forin
for (const j in this.cities) {
if (this.startPoint.value === this.cities[j].name) {
calcFare = calcFare + this.cities[j].fare;
}
if (this.endPoint.value === this.cities[j].name) {
calcFare = calcFare + this.cities[j].fare;
}
}
const displayAmt = document.getElementById("amount");
if (this.ticketType.value === "Economy Class") {
displayAmt.innerText =
"Total payable amount: $" + passCount * (300 + calcFare);
}
else if (this.ticketType.value === "Business Class") {
displayAmt.innerText =
"Total payable amount: $" + passCount * (500 + calcFare);
}
else if (this.ticketType.value === "Common Class") {
displayAmt.innerText =
"Total payable amount: $" + passCount * (150 + calcFare);
}
}
setTimeout(() => {
(this.ticketDetailGrid || []).dataSource = reserved;
this.ticketDetailGrid.dataBind();
}, 100);
}
content0() {
return (<div id="booking">
<div className="wizard-title">Plan your journey</div>
<div className="responsive-align">
<div className="row">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<DropDownListComponent ref={dropdownlist => {
this.startPoint = dropdownlist;
}} width="100%" dataSource={this.cities} fields={this.autoCompleteFields} placeholder="From" floatLabelType="Auto"/>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<DropDownListComponent ref={dropdownlist => {
this.endPoint = dropdownlist;
}} width="100%" dataSource={this.cities} fields={this.autoCompleteFields} placeholder="To" floatLabelType="Auto"/>
</div>
</div>
<div className="row">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<DatePickerComponent ref={calendar => (this.journeyDate = calendar)} width="100%" placeholder="Journey Date" floatLabelType="Auto" min={this.dateMin} max={this.dateMax} focus={this.focusIn}/>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<DropDownListComponent ref={dropdownlist => (this.ticketType = dropdownlist)} dataSource={this.quotas} placeholder="Ticket type" floatLabelType="Auto" fields={this.fields}/>
</div>
</div>
<div className="btn-container">
<button id="searchNext" className="e-btn" onClick={this.btnClicked.bind(this)}>
Search Train
</button>
</div>
<span id="err1"/>
</div>
</div>);
}
content1() {
return (<div id="selectTrain">
<div className="wizard-title">Select the train from the list </div>
<GridComponent ref={grid => (this.availTrainGrid = grid)} width="100%" rowSelected={this.trainSelected.bind(this)}>
<ColumnsDirective>
<ColumnDirective field="TrainNo" headerText="Train No" width={120} type="number"/>
<ColumnDirective field="Name" headerText="Name" width={140}/>
<ColumnDirective field="Departure" headerText="Departure" width={120}/>
<ColumnDirective field="Arrival" headerText="Arrival" width={140}/>
<ColumnDirective field="Availability" headerText="Availability" width={140} type="number"/>
</ColumnsDirective>
</GridComponent>
<br />
<div className="btn-container">
<button id="goToSearch" className="e-btn" onClick={this.btnClicked.bind(this)}>
Back
</button>
<button id="bookTickets" className="e-btn" onClick={this.btnClicked.bind(this)}>
Continue
</button>
</div>
<span id="err2"/>
</div>);
}
content2() {
return (<div id="details">
<div className="details-page wizard-title">
Enter the passenger details
</div>
<div id="PassengersList">
<table id="passenger-table">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th className="name-header">Name</th>
<th className="age-header">Age</th>
<th className="gender-header">Gender</th>
<th className="type-header">Berth Preference</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input className="e-input" id="pass_name1" type="text" placeholder="Passenger Name"/>
</td>
<td>
<NumericTextBoxComponent ref={numerictextbox => {
this.pass_age1 = numerictextbox;
}} showSpinButton={false} min={1} max={100} value={18} format="n0"/>
</td>
<td>
<DropDownListComponent ref={dropdownlist => {
this.pass_gender1 = dropdownlist;
}} dataSource={this.gender} text="Male" fields={this.fields}/>
</td>
<td>
<DropDownListComponent ref={dropdownlist => {
this.pass_berth1 = dropdownlist;
}} dataSource={this.berths} placeholder="Optional" fields={this.fields}/>
</td>
</tr>
<tr>
<td>
<input id="pass_name2" className="e-input" type="text" placeholder="Passenger Name"/>
</td>
<td>
<NumericTextBoxComponent showSpinButton={false} min={1} max={100} value={18} format="n0"/>
</td>
<td>
<DropDownListComponent ref={dropdownlist => {
this.pass_gender2 = dropdownlist;
}} dataSource={this.gender} text="Male" fields={this.fields}/>
</td>
<td>
<DropDownListComponent ref={dropdownlist => {
this.pass_berth2 = dropdownlist;
}} dataSource={this.berths} placeholder="Optional" fields={this.fields}/>
</td>
</tr>
<tr>
<td>
<input id="pass_name3" className="e-input" type="text" placeholder="Passenger Name"/>
</td>
<td>
<NumericTextBoxComponent showSpinButton={false} min={1} max={100} value={18} format="n0"/>
</td>
<td>
<DropDownListComponent ref={dropdownlist => {
this.pass_gender3 = dropdownlist;
}} dataSource={this.gender} text="Male" fields={this.fields}/>
</td>
<td>
<DropDownListComponent ref={dropdownlist => {
this.pass_berth3 = dropdownlist;
}} dataSource={this.berths} placeholder="Optional" fields={this.fields}/>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<div className="btn-container">
<button id="goBackToBook" className="e-btn" onClick={this.btnClicked.bind(this)}>
Back
</button>
<button id="confirmTickets" className="e-btn" onClick={this.btnClicked.bind(this)}>
Continue
</button>
</div>
<span id="err3"/>
</div>);
}
content3() {
return (<div id="confirm">
<div className="tab-title1 wizard-title">
Confirm the details and proceed
</div>
<GridComponent ref={grid => (this.ticketDetailGrid = grid)} width="100%">
<ColumnsDirective>
<ColumnDirective field="TrainNo" headerText="Train No" width={120} type="number"/>
<ColumnDirective field="PassName" headerText="Name" width={140}/>
<ColumnDirective field="Gender" headerText="Gender" width={120}/>
<ColumnDirective field="Berth" headerText="Berth" width={140}/>
</ColumnsDirective>
</GridComponent>
<br />
<div id="amount"/>
<br />
<div className="btn-container">
<button id="goBackDetails" className="e-btn" onClick={this.btnClicked.bind(this)}>
Back
</button>
<button id="makePayment" className="e-btn" onClick={this.btnClicked.bind(this)}>
Pay
</button>
</div>
</div>);
}
render() {
return (<div>
<div className="col-lg-12 control-section e-tab-section">
<div className="e-sample-resize-container">
<TabComponent id="tab-wizard" ref={tab => (this.tab = tab)} heightAdjustMode="None" height={390} selecting={this.tabSelected.bind(this)}>
<TabItemsDirective>
<TabItemDirective header={this.headerText[0]} content={this.content0.bind(this)}/>
<TabItemDirective header={this.headerText[1]} content={this.content1.bind(this)} disabled={true}/>
<TabItemDirective header={this.headerText[2]} content={this.content2.bind(this)} disabled={true}/>
<TabItemDirective header={this.headerText[3]} content={this.content3.bind(this)} disabled={true}/>
</TabItemsDirective>
</TabComponent>
<DialogComponent ref={dialog => (this.alertDlg = dialog)} header="Success" width={250} isModal={true} visible={false} showCloseIcon={true} content="Your payment successfully processed" target={this.dlgTarget} buttons={this.dlgButtons} created={this.dlgCreated.bind(this)}/>
</div>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { TabComponent, TabItemDirective, TabItemsDirective, SelectEventArgs } from '@syncfusion/ej2-react-navigations';
import { GridComponent, RowSelectEventArgs, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
export class App extends React.Component<{}, {}> {
public alertDlg: DialogComponent;
public tab: TabComponent;
public ticketDetailGrid: GridComponent;
public pass_gender3: DropDownListComponent;
public pass_gender2: DropDownListComponent;
public listObj: DropDownListComponent;
public pass_gender1: DropDownListComponent;
public pass_berth1: DropDownListComponent;
public pass_berth2: DropDownListComponent;
public pass_berth3: DropDownListComponent;
public pass_age1: NumericTextBoxComponent;
public availTrainGrid: GridComponent;
public ticketType: DropDownListComponent;
public journeyDate: DatePickerComponent;
public endPoint: DropDownListComponent;
public startPoint: DropDownListComponent;
public today: Date = new Date();
public selectedTrain: any;
public dlgTarget: HTMLElement = document.querySelector(
".sb-content-tab.e-tab .e-content.sb-sample-content-area"
);
public dateMin: Date = new Date(this.today.getTime());
public dateMax: Date = new Date(
this.today.getTime() + 60 * 24 * 60 * 60 * 1000
);
public fields: Object = { id: "id", text: "text", value: "text" };
public autoCompleteFields: Object = { text: "name", value: "name" };
public dateValue = new Date();
public headerText: any = [
{ text: "New Booking" },
{ text: "Train List" },
{ text: "Add Passenger" },
{ text: "Make Payment" }
];
public quotas: any = [
{ id: "1", text: "Business Class" },
{ id: "2", text: "Economy Class" },
{ id: "4", text: "Common Class" }
];
public gender: any = [{ id: "1", text: "Male" }, { id: "2", text: "Female" }];
public berths: any = [
{ id: "1", text: "Upper" },
{ id: "2", text: "Lower" },
{ id: "3", text: "Middle" },
{ id: "4", text: "Window" },
{ id: "5", text: "Aisle" }
];
public cities: any = [
{ name: "Chicago", fare: 300 },
{ name: "San Francisco", fare: 125 },
{ name: "Los Angeles", fare: 175 },
{ name: "Seattle", fare: 250 },
{ name: "Florida", fare: 150 }
];
public dlgButtons: any = [
{
buttonModel: { content: "OK", isPrimary: true },
// tslint:disable-next-line: no-empty
click: () => {
this.alertDlg.hide();
this.tab.enableTab(0, true);
this.tab.enableTab(1, false);
this.tab.enableTab(2, false);
this.tab.enableTab(3, false);
this.tab.select(0);
}
}
];
public dlgCreated(): void {
const proxy: any = this;
proxy.alertDlg.hide();
}
public focusIn(): void {
const proxy: any = this;
proxy.show();
}
public tabSelected(e: SelectEventArgs) {
if (e.isSwiped) {
e.cancel = true;
}
}
public trainSelected(args: RowSelectEventArgs): void {
this.selectedTrain = args.data;
}
public btnClicked(e: any): void {
switch (e.target.id) {
case "searchNext":
/* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */
if (
this.startPoint.value != null &&
this.endPoint.value != null &&
this.ticketType.value != null &&
this.journeyDate.value != null
) {
if (
this.startPoint.value &&
this.startPoint.value === this.endPoint.value
) {
(document.getElementById("err1") as HTMLElement).innerText =
"* Arrival point can't be same as Departure";
} else {
this.tab.enableTab(0, false);
this.tab.enableTab(1, true);
this.filterTrains(e);
this.tab.select(1);
(document.getElementById("err1") as HTMLElement).innerText = "";
(document.getElementById("err2") as HTMLElement).innerText = "";
}
} else {
(document.getElementById("err1") as HTMLElement).innerText =
"* Please fill all the details before proceeding";
}
break;
case "bookTickets":
/* Based on the selected station generate Grid content to display trains available */
if (
this.availTrainGrid.getSelectedRecords() === undefined ||
this.availTrainGrid.getSelectedRecords().length === 0
) {
(document.getElementById("err2") as HTMLElement).innerText =
"* Select your convenient train";
} else {
this.tab.enableTab(2, true);
this.tab.select(2);
this.tab.enableTab(1, false);
(document.getElementById("err2") as HTMLElement).innerText = "";
}
break;
case "confirmTickets":
/* Get the Passenger details and validate the fields must not be left empty */
const name: any = document.getElementById("pass_name1");
const age: any = this.pass_age1.value;
const gender: any = this.pass_gender1.value;
if (name.value === "" || age === "" || gender === "") {
(document.getElementById("err3") as HTMLElement).innerText =
"* Please enter passenger details";
} else {
this.tab.enableTab(3, true);
this.tab.select(3);
this.tab.enableTab(2, false);
(document.getElementById("err3") as HTMLElement).innerText = "";
this.finalizeDetails(e);
}
break;
case "makePayment":
this.alertDlg.show();
break;
case "goToSearch":
/* Go back to change class, date or boarding places */
this.selectedTrain = [];
this.tab.enableTab(0, true);
this.tab.select(0);
this.tab.enableTab(1, false);
break;
case "goBackToBook":
/* Change the preferred train chosen already */
this.tab.enableTab(1, true);
this.tab.select(1);
this.tab.enableTab(2, false);
break;
case "goBackDetails":
/* Update passenger detail before confirming the payment */
this.tab.enableTab(2, true);
this.tab.select(2);
this.tab.enableTab(3, false);
break;
}
}
public filterTrains(args: RowSelectEventArgs): void {
/* Generating trains based on source and destination chosen */
const result: never[] | { [key: string]: Object }[] = [];
const fromCity: string = this.startPoint.value as string;
const toCity: string = this.endPoint.value as string;
const count: number = Math.floor(Math.random() * 3 + 2);
for (let i: number = 0; i < count; i++) {
// tslint:disable-next-line: ban-types
const details: { [key: string]: Object } = {};
details.TrainNo = Math.floor(Math.random() * 20 + 19000);
details.Name = "Train " + i;
details.Departure = fromCity;
details.Arrival = toCity;
details.Availability = Math.floor(Math.random() * 20 + 20);
result.push(details);
}
setTimeout(() => {
this.availTrainGrid.dataSource = result;
this.availTrainGrid.dataBind();
}, 100);
}
public finalizeDetails(args: RowSelectEventArgs): void {
/* Get the passenger details and update table with name and other details for confirmation */
const reserved = [];
let passCount: any = 0;
const name1: any = document.getElementById("pass_name1");
const name2: any = document.getElementById("pass_name2");
const name3: any = document.getElementById("pass_name3");
for (let i: number = 1; i <= 3; i++) {
if (name1.value !== "") {
// tslint:disable-next-line: ban-types
const details: { [key: string]: Object } = {};
const gender: string = (i === 1
? this.pass_gender1.value
: i === 2
? this.pass_gender2.value
: this.pass_gender3.value) as string;
const berth: string = (i === 1
? this.pass_berth1.value
: i === 2
? this.pass_berth2.value
: this.pass_berth3.value) as string;
details.TrainNo = this.selectedTrain.TrainNo.toString();
details.PassName =
i === 1 ? name1.value : i === 2 ? name2.value : name3.value;
details.Gender = gender === "" ? "Male" : gender;
details.Berth = berth === "" ? berth : "Any";
if (details.PassName !== "") {
reserved.push(details);
}
passCount++;
}
let calcFare: any = 0;
// tslint:disable-next-line: forin
for (const j in this.cities) {
if (this.startPoint.value === this.cities[j].name) {
calcFare = calcFare + this.cities[j].fare;
}
if (this.endPoint.value === this.cities[j].name) {
calcFare = calcFare + this.cities[j].fare;
}
}
const displayAmt: any = document.getElementById("amount");
if (this.ticketType.value === "Economy Class") {
displayAmt.innerText =
"Total payable amount: $" + passCount * (300 + calcFare);
} else if (this.ticketType.value === "Business Class") {
displayAmt.innerText =
"Total payable amount: $" + passCount * (500 + calcFare);
} else if (this.ticketType.value === "Common Class") {
displayAmt.innerText =
"Total payable amount: $" + passCount * (150 + calcFare);
}
}
setTimeout(() => {
(this.ticketDetailGrid || []).dataSource = reserved;
this.ticketDetailGrid.dataBind();
}, 100);
}
public content0() {
return (
<div id="booking">
<div className="wizard-title">Plan your journey</div>
<div className="responsive-align">
<div className="row">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<DropDownListComponent
ref={dropdownlist => {
this.startPoint = dropdownlist!;
}}
width="100%"
dataSource={this.cities}
fields={this.autoCompleteFields}
placeholder="From"
floatLabelType="Auto"
/>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<DropDownListComponent
ref={dropdownlist => {
this.endPoint = dropdownlist!;
}}
width="100%"
dataSource={this.cities}
fields={this.autoCompleteFields}
placeholder="To"
floatLabelType="Auto"
/>
</div>
</div>
<div className="row">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<DatePickerComponent
ref={calendar => (this.journeyDate = calendar!)}
width="100%"
placeholder="Journey Date"
floatLabelType="Auto"
min={this.dateMin}
max={this.dateMax}
focus={this.focusIn}
/>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
<DropDownListComponent
ref={dropdownlist => (this.ticketType = dropdownlist!)}
dataSource={this.quotas}
placeholder="Ticket type"
floatLabelType="Auto"
fields={this.fields}
/>
</div>
</div>
<div className="btn-container">
<button
id="searchNext"
className="e-btn"
onClick={this.btnClicked.bind(this)}
>
Search Train
</button>
</div>
<span id="err1" />
</div>
</div>
);
}
public content1() {
return (
<div id="selectTrain">
<div className="wizard-title">Select the train from the list </div>
<GridComponent
ref={grid => (this.availTrainGrid = grid!)}
width="100%"
rowSelected={this.trainSelected.bind(this)}
>
<ColumnsDirective>
<ColumnDirective
field="TrainNo"
headerText="Train No"
width={120}
type="number"
/>
<ColumnDirective field="Name" headerText="Name" width={140} />
<ColumnDirective
field="Departure"
headerText="Departure"
width={120}
/>
<ColumnDirective field="Arrival" headerText="Arrival" width={140} />
<ColumnDirective
field="Availability"
headerText="Availability"
width={140}
type="number"
/>
</ColumnsDirective>
</GridComponent>
<br />
<div className="btn-container">
<button
id="goToSearch"
className="e-btn"
onClick={this.btnClicked.bind(this)}
>
Back
</button>
<button
id="bookTickets"
className="e-btn"
onClick={this.btnClicked.bind(this)}
>
Continue
</button>
</div>
<span id="err2" />
</div>
);
}
public content2() {
return (
<div id="details">
<div className="details-page wizard-title">
Enter the passenger details
</div>
<div id="PassengersList">
<table id="passenger-table">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th className="name-header">Name</th>
<th className="age-header">Age</th>
<th className="gender-header">Gender</th>
<th className="type-header">Berth Preference</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
className="e-input"
id="pass_name1"
type="text"
placeholder="Passenger Name"
/>
</td>
<td>
<NumericTextBoxComponent
ref={numerictextbox => {
this.pass_age1 = numerictextbox!;
}}
showSpinButton={false}
min={1}
max={100}
value={18}
format="n0"
/>
</td>
<td>
<DropDownListComponent
ref={dropdownlist => {
this.pass_gender1 = dropdownlist!;
}}
dataSource={this.gender}
text="Male"
fields={this.fields}
/>
</td>
<td>
<DropDownListComponent
ref={dropdownlist => {
this.pass_berth1 = dropdownlist!;
}}
dataSource={this.berths}
placeholder="Optional"
fields={this.fields}
/>
</td>
</tr>
<tr>
<td>
<input
id="pass_name2"
className="e-input"
type="text"
placeholder="Passenger Name"
/>
</td>
<td>
<NumericTextBoxComponent
showSpinButton={false}
min={1}
max={100}
value={18}
format="n0"
/>
</td>
<td>
<DropDownListComponent
ref={dropdownlist => {
this.pass_gender2 = dropdownlist;
}}
dataSource={this.gender}
text="Male"
fields={this.fields}
/>
</td>
<td>
<DropDownListComponent
ref={dropdownlist => {
this.pass_berth2 = dropdownlist;
}}
dataSource={this.berths}
placeholder="Optional"
fields={this.fields}
/>
</td>
</tr>
<tr>
<td>
<input
id="pass_name3"
className="e-input"
type="text"
placeholder="Passenger Name"
/>
</td>
<td>
<NumericTextBoxComponent
showSpinButton={false}
min={1}
max={100}
value={18}
format="n0"
/>
</td>
<td>
<DropDownListComponent
ref={dropdownlist => {
this.pass_gender3 = dropdownlist;
}}
dataSource={this.gender}
text="Male"
fields={this.fields}
/>
</td>
<td>
<DropDownListComponent
ref={dropdownlist => {
this.pass_berth3 = dropdownlist;
}}
dataSource={this.berths}
placeholder="Optional"
fields={this.fields}
/>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<div className="btn-container">
<button
id="goBackToBook"
className="e-btn"
onClick={this.btnClicked.bind(this)}
>
Back
</button>
<button
id="confirmTickets"
className="e-btn"
onClick={this.btnClicked.bind(this)}
>
Continue
</button>
</div>
<span id="err3" />
</div>
);
}
public content3() {
return (
<div id="confirm">
<div className="tab-title1 wizard-title">
Confirm the details and proceed
</div>
<GridComponent
ref={grid => (this.ticketDetailGrid = grid)}
width="100%"
>
<ColumnsDirective>
<ColumnDirective
field="TrainNo"
headerText="Train No"
width={120}
type="number"
/>
<ColumnDirective field="PassName" headerText="Name" width={140} />
<ColumnDirective field="Gender" headerText="Gender" width={120} />
<ColumnDirective field="Berth" headerText="Berth" width={140} />
</ColumnsDirective>
</GridComponent>
<br />
<div id="amount" />
<br />
<div className="btn-container">
<button
id="goBackDetails"
className="e-btn"
onClick={this.btnClicked.bind(this)}
>
Back
</button>
<button
id="makePayment"
className="e-btn"
onClick={this.btnClicked.bind(this)}
>
Pay
</button>
</div>
</div>
);
}
public render() {
return (
<div>
<div className="col-lg-12 control-section e-tab-section">
<div className="e-sample-resize-container">
<TabComponent
id="tab-wizard"
ref={tab => (this.tab = tab!)}
heightAdjustMode="None"
height={390}
selecting={this.tabSelected.bind(this)}
>
<TabItemsDirective>
<TabItemDirective
header={this.headerText[0]}
content={this.content0.bind(this)}
/>
<TabItemDirective
header={this.headerText[1]}
content={this.content1.bind(this)}
disabled={true}
/>
<TabItemDirective
header={this.headerText[2]}
content={this.content2.bind(this)}
disabled={true}
/>
<TabItemDirective
header={this.headerText[3]}
content={this.content3.bind(this)}
disabled={true}
/>
</TabItemsDirective>
</TabComponent>
<DialogComponent
ref={dialog => (this.alertDlg = dialog!)}
header="Success"
width={250}
isModal={true}
visible={false}
showCloseIcon={true}
content="Your payment successfully processed"
target={this.dlgTarget}
buttons={this.dlgButtons}
created={this.dlgCreated.bind(this)}
/>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Tab</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='container'>
<div id='element'>
<div id='loader'>Loading</div>
</div>
</div>
</body>
</html>