Search results

Create wizard using Tab

Tab items can be disabled initial control rendering by passing the boolean value and tab index to theEnableTab public method of TabItem class.

In the below Wizard sample, each Tab is integrated with required components to complete the reservation. Each field is provided with validation for all mandatory option to proceed to next tabs. Using Tab item’s template property the components are added into content.

Create the following contents for each tab in the wizard.

  1. Search tab: Created with [DropDownList] to select the source, destination and type of ticket. A [DatePicker] for choosing the date of journey.
  2. Train tab: Based on the selected start and end point, populated Grid with random list of available seats and train list. Initially define the columns and row selected event for validating, after the source and destination chosen update the [DataSource] for the Grid.
  3. Passenger tab: A table with Textbox, Numeric, DropDownList for adding passenger name, age, gender and preferred berth/seat. Add validation on entering passenger details to proceed.
  4. Payment tab: Calculate the ticket cost and generate data for Grid with passenger details, train number and ticket cost summary.

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.

@using Syncfusion.EJ2.Blazor.Navigations
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Calendars
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Inputs
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<div class="control-section e-tab-section">
    <EjsTab @ref="Tab" ID="Ej2Tab" HeightAdjustMode="@HeightStyles.None" Height="390">
        <TabEvents Created="TabCreate"></TabEvents>
        <TabItems>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="New Booking"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div id="booking">
                        <div class="wizard-title">Plan your journey</div>
                        <div class="responsive-align">
                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                                    <EjsDropDownList TValue="string" @ref="StartPoint" Width="100%" DataSource="@CitiesData" Placeholder="From">
                                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
                                    </EjsDropDownList>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                                    <EjsDropDownList @ref="EndPoint" TValue="string" Width="100%" DataSource="@CitiesData" Placeholder="To">
                                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
                                    </EjsDropDownList>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                                    <EjsDatePicker @ref="Date" Width="100%" Placeholder="Journey Date" Value="@(DateTime.Now)" Min="@(DateTime.Now)" Max="@(DateTime.Now.AddMonths(3))"></EjsDatePicker>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                                    <EjsDropDownList @ref="Quota" TValue="string" DataSource="@QuotaList" Placeholder="Ticket type">
                                        <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                    </EjsDropDownList>
                                </div>
                            </div>
                            <div class="btn-container">
                                <EjsButton @onclick="SearchButtonClick">Search Train</EjsButton>
                            </div>
                            @if (EmptyField)
                            {
                                <span class="error">* Please fill all the details before proceeding</span>
                            }
                            @if (SameField)
                            {
                                <span class="error">* Arrival point can't be same as Departure</span>
                            }
                        </div>
                    </div>
                </ContentTemplate>
            </TabItem>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Train List"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div id="selectTrain">
                        <div class="wizard-title">Select the train from the list </div>
                        <EjsGrid @ref="AvailableTrain" Width="100%" TValue="GridFields" DataSource="@GridData">
                            <GridEvents RowSelected="SelectedTrainDetails" TValue="GridFields"></GridEvents>
                            <GridColumns>
                                <GridColumn Field=@nameof(GridFields.TrainNo) HeaderText="Train No" Width="120" Type="@ColumnType.Number"></GridColumn>
                                <GridColumn Field=@nameof(GridFields.Name) Width="140"></GridColumn>
                                <GridColumn Field=@nameof(GridFields.Departure) HeaderText="Departure" Width="120"></GridColumn>
                                <GridColumn Field=@nameof(GridFields.Arrival) HeaderText="Arrival" Width="140"></GridColumn>
                                <GridColumn Field=@nameof(GridFields.Availability) HeaderText="Availability" Width="140" Type="@ColumnType.Number"></GridColumn>
                            </GridColumns>
                        </EjsGrid>
                        <br />
                        <div class="btn-container">
                            <EjsButton @onclick="@SelectTrainBack">Back</EjsButton>
                            <EjsButton @onclick="@SelectTrainContinue">Continue</EjsButton>
                        </div>
                        @if (EmptyField)
                        {
                            <span class="error">* Select your convenient train</span>
                        }
                    </div>
                </ContentTemplate>
            </TabItem>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Add Passenger"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div id="details">
                        <div class="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 class="name-header">Name</th>
                                        <th class="age-header">Age</th>
                                        <th class="gender-header">Gender</th>
                                        <th class="type-header">Berth Preference</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <EjsTextBox @ref="@FirstPassengerName" Placeholder="Passenger Name"></EjsTextBox>
                                        </td>
                                        <td>
                                            <EjsNumericTextBox @ref="FirstPassengerAge" Min="1" Max="100" Value="18" Format=n0 ShowSpinButton="false"></EjsNumericTextBox>
                                        </td>
                                        <td>
                                            <EjsDropDownList @ref="FirstPassengerGender" TValue="string" Text="Male" DataSource="@Gender">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </EjsDropDownList>
                                        </td>
                                        <td>
                                            <EjsDropDownList @ref="FirstPassengerBerth" TValue="string" Placeholder="Optional" DataSource="@Berth">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </EjsDropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <EjsTextBox @ref="@SecondPassengerName" Placeholder="Passenger Name"></EjsTextBox>
                                        </td>
                                        <td>
                                            <EjsNumericTextBox @ref="SecondPassengerAge" Min="1" Max="100" Value="18" Format=n0 ShowSpinButton="false"></EjsNumericTextBox>
                                        </td>
                                        <td>
                                            <EjsDropDownList @ref="SecondPassengerGender" TValue="string" Text="Male" DataSource="@Gender">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </EjsDropDownList>
                                        </td>
                                        <td>
                                            <EjsDropDownList @ref="SecondPassengerBerth" TValue="string" Placeholder="Optional" DataSource="@Berth">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </EjsDropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <EjsTextBox @ref="@ThirdPassengerName" Placeholder="Passenger Name"></EjsTextBox>
                                        </td>
                                        <td>
                                            <EjsNumericTextBox @ref="ThirdPassengerAge" Min="1" Max="100" Value="18" Format=n0 ShowSpinButton="false"></EjsNumericTextBox>
                                        </td>
                                        <td>
                                            <EjsDropDownList @ref="ThirdPassengerGender" TValue="string" Text="Male" DataSource="@Gender">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </EjsDropDownList>
                                        </td>
                                        <td>
                                            <EjsDropDownList @ref="ThirdPassengerBerth" TValue="string" Placeholder="Optional" DataSource="@Berth">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </EjsDropDownList>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <br />
                        <div class="btn-container">
                            <EjsButton @onclick="@PassengerListBack">Back</EjsButton>
                            <EjsButton @onclick="@PassengerListContinue">Continue</EjsButton>
                        </div>
                        @if (EmptyField)
                        {
                            <span class="error">* Please enter passenger details</span>
                        }
                    </div>
                </ContentTemplate>
            </TabItem>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Make Payment"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div id="confirm">
                        <div class="tab-title1 wizard-title">Confirm the details and proceed</div>
                        <EjsGrid @ref="TicketDetailGrid" Width="100%" TValue="PassengerFields" DataSource="@PassengerData">
                            <GridColumns>
                                <GridColumn Field=@nameof(PassengerFields.TrainNo) HeaderText="Train No" Width="120" Type="@ColumnType.Number"></GridColumn>
                                <GridColumn Field=@nameof(PassengerFields.Name) HeaderText="Name" Width="140"></GridColumn>
                                <GridColumn Field=@nameof(PassengerFields.Gender) HeaderText="Gender" Width="120"></GridColumn>
                                <GridColumn Field=@nameof(PassengerFields.Berth) Width="140" Type="@ColumnType.Number"></GridColumn>
                            </GridColumns>
                        </EjsGrid>
                        <br />
                        <div id="amount">Total payable amount: $1700</div>
                        <br />
                        <div class="btn-container">
                            <EjsButton @onclick="@ConfirmBack">Back</EjsButton>
                            <EjsButton @onclick="@ConfirmPayment">Pay</EjsButton>
                        </div>
                    </div>
                </ContentTemplate>
            </TabItem>
        </TabItems>
    </EjsTab>
    <div>
        <EjsDialog @ref="AlertDialog" Width=250 Target="#Ej2Tab" IsModal=true Visible=false ShowCloseIcon="true">
            <DialogEvents Created="DialogCreate"></DialogEvents>
            <DialogTemplates>
                <Header><div>Success</div></Header>
                <Content><div>Your payment successfully processed</div></Content>
            </DialogTemplates>
            <DialogButtons>
                <DialogButton ButtonModel="@OkBtn" OnClick="@OnSubmit" />
            </DialogButtons>
        </EjsDialog>
    </div>
</div>

@code{
    EjsTab Tab;
    public EjsDropDownList<string> StartPoint;
    public EjsDropDownList<string> EndPoint;
    public EjsDropDownList<string> Quota;
    public EjsGrid<GridFields> AvailableTrain;
    public EjsGrid<PassengerFields> TicketDetailGrid;
    public int SelectedTrain { get; set; }
    public string SelectedTrainName { get; set; }
    public Boolean IsSelectedTrain { get; set; } = false;
    EjsDialog AlertDialog;
    EjsDatePicker Date;
    EjsTextBox FirstPassengerName;
    EjsTextBox SecondPassengerName;
    EjsTextBox ThirdPassengerName;
    public EjsNumericTextBox<int> FirstPassengerAge;
    public EjsNumericTextBox<int> SecondPassengerAge;
    public EjsNumericTextBox<int> ThirdPassengerAge;
    public EjsDropDownList<string> FirstPassengerGender;
    public EjsDropDownList<string> SecondPassengerGender;
    public EjsDropDownList<string> ThirdPassengerGender;
    public EjsDropDownList<string> FirstPassengerBerth;
    public EjsDropDownList<string> SecondPassengerBerth;
    public EjsDropDownList<string> ThirdPassengerBerth;
    public bool EmptyField { get; set; } = false;
    public bool SameField { get; set; } = false;
    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel OkBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "OK", IsPrimary = true };
    public List<PassengerFields> PassengerData;

    public class CitiesFields
    {
        public string Name { get; set; }
        public int Fare { get; set; }
    }


    public List<CitiesFields> CitiesData = new List<CitiesFields>()
{
        new CitiesFields() { Name = "Chicago", Fare = 300 },
        new CitiesFields() { Name = "San Francisco", Fare = 125 },
        new CitiesFields() { Name = "Los Angeles", Fare = 175 },
        new CitiesFields() { Name = "Seattle", Fare = 250 },
        new CitiesFields() { Name = "Florida", Fare = 150 }
    };

    public class DropdownFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    public List<DropdownFields> QuotaList = new List<DropdownFields>()
{
        new DropdownFields { ID = "1", Text = "Business Class" },
        new DropdownFields { ID = "2", Text = "Economy Class" },
        new DropdownFields { ID = "3", Text = "Common Class" }
    };

    public void SearchButtonClick()
    {
        if ((this.StartPoint.Value == null) || (this.EndPoint.Value == null) || (this.Quota.Value == null))
        {
            this.EmptyField = true;
            this.StateHasChanged();
        }
        else if (this.StartPoint.Value == this.EndPoint.Value)
        {
            this.SameField = true;
            this.StateHasChanged();
        }
        else
        {
            this.EmptyField = false;
            this.SameField = false;
            this.GridData = new List<GridFields>() {
                new GridFields
                {
                    TrainNo = 1000,
                    Name = "Train" + "1",
                    Departure = this.StartPoint.Value,
                    Arrival = this.EndPoint.Value,
                    Availability = 30
                },
                new GridFields
                {
                    TrainNo = 1002,
                    Name = "Train" + "2",
                    Departure = this.StartPoint.Value,
                    Arrival = this.EndPoint.Value,
                    Availability = 28
                }
            };

            this.Tab.EnableTab(1, true);
            this.Tab.Select(1);
            this.StateHasChanged();
        }
    }

    public void SelectedTrainDetails(RowSelectEventArgs<GridFields> args)
    {
        this.IsSelectedTrain = true;
        if (this.IsSelectedTrain)
        {
            this.EmptyField = false;
            this.SelectedTrain = args.Data.TrainNo;
        }
        else
        {
            this.EmptyField = true;
        }
    }

    public class GridFields
    {
        public int TrainNo { get; set; }
        public string Name { get; set; }
        public string Departure { get; set; }
        public string Arrival { get; set; }
        public int Availability { get; set; }
    }

    public class PassengerFields
    {
        public int TrainNo { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Berth { get; set; }
    }

    public List<GridFields> GridData;

    public List<DropdownFields> Gender = new List<DropdownFields>() {
        new DropdownFields { ID = "1", Text = "Male" },
        new DropdownFields { ID = "2", Text = "Female" }
    };

    public List<DropdownFields> Berth = new List<DropdownFields>()
{
        new DropdownFields { ID = "1", Text = "Upper" },
        new DropdownFields { ID = "2", Text = "Lower" },
        new DropdownFields { ID = "2", Text = "Middle" },
        new DropdownFields { ID = "2", Text = "Window" },
        new DropdownFields { ID = "2", Text = "Aisle" }
    };
    public void TabCreate()
    {
        this.Tab.EnableTab(1, false);
        this.Tab.EnableTab(2, false);
        this.Tab.EnableTab(3, false);
    }
    public void SelectTrainBack()
    {
        this.Tab.Select(0);
    }
    public void SelectTrainContinue()
    {
        if (this.IsSelectedTrain)
        {
            this.EmptyField = false;
            this.Tab.EnableTab(2, true);
            this.Tab.Select(2);
        }
        else
        {
            this.Tab.EnableTab(2, false);
            this.EmptyField = true;
        }
    }

    public void PassengerListBack()
    {
        this.Tab.Select(1);
    }

    public void PassengerListContinue()
    {
        if (this.FirstPassengerName.Value == null)
        {
            this.EmptyField = true;
        }
        else
        {
            this.EmptyField = false;
            this.Tab.EnableTab(3, true);
            this.Tab.Select(3);
            this.PassengerData = new List<PassengerFields>();
            if (this.FirstPassengerName.Value != null)
            {
                PassengerData.Add(new PassengerFields
                {
                    TrainNo = this.SelectedTrain,
                    Name = this.FirstPassengerName.Value,
                    Gender = this.FirstPassengerGender.Value,
                    Berth = this.FirstPassengerBerth.Value
                });
            }
            if (this.SecondPassengerName.Value != null)
            {
                PassengerData.Add(new PassengerFields
                {
                    TrainNo = this.SelectedTrain,
                    Name = this.SecondPassengerName.Value,
                    Gender = this.SecondPassengerGender.Value,
                    Berth = this.SecondPassengerBerth.Value
                });
            }
            if (this.ThirdPassengerName.Value != null)
            {
                PassengerData.Add(new PassengerFields
                {
                    TrainNo = this.SelectedTrain,
                    Name = this.ThirdPassengerName.Value,
                    Gender = this.ThirdPassengerGender.Value,
                    Berth = this.ThirdPassengerBerth.Value
                });
            }
        }
    }

    public void ConfirmBack()
    {
        this.Tab.Select(2);
    }
    public void ConfirmPayment()
    {
        this.AlertDialog.Show();
        this.StateHasChanged();
    }
    public void DialogCreate()
    {
        this.AlertDialog.Hide();
    }
    public void OnSubmit(Object args)
    {

        this.AlertDialog.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);
    }
}

<style>
    .wizard-title {
        font-size: 15px;
    }

    .responsive-align {
        width: 75%;
        margin: 0 auto;
    }

    .error {
        color: red;
    }

    #amount {
        text-align: right;
        font-size: 15px;
        padding: 15px 0px;
    }

    #passenger-table th {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        border: 1px solid gainsboro;
    }

    #passenger-table td, th {
        padding: 10px;
    }

    #passenger-table td {
        border: 1px solid gainsboro;
    }
</style>

Output be like the below.

Tab Wizard