Search results

Create wizard using Accordion

Accordion items can be disabled dynamically by passing the index and boolean value with the EnableItem method.

In the below demo, designed for simple payment module that enable/disable Accordion based on sequential validation of each Accordion content.

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

<div class="accordion-control-section">
    <div class="accordion-control-section">
        <div class='template_title'> Online Shopping Payment Module</div>
        <EjsAccordion ID="AccordionElement" @ref="@Accordion" @ref:suppressField>
            <AccordionEvents Created="OnCreate"></AccordionEvents>
            <AccordionItems>
                <AccordionItem>
                    <HeaderTemplate>Sign In</HeaderTemplate>
                    <ContentTemplate>
                        <div id="Sign_In_Form" style="padding:10px">
                            <form id="formId">
                                <div class="form-group">
                                    <div class="e-float-input">
                                        <EjsTextBox @ref="@EmailTextbox" @ref:suppressField Placeholder="Email"></EjsTextBox>
                                    </div>
                                    <div class="e-float-input">
                                        <EjsTextBox @ref="@PasswordTextbox" @ref:suppressField Placeholder="Password" Type="password"></EjsTextBox>
                                    </div>
                                </div>
                            </form>
                            <div style="text-align: center">
                                <EjsButton @onclick="@OnSignIn">Continue</EjsButton>
                                @if (EmptyField)
                                {
                                    <div class="Error">* Please fill all fields</div>
                                }
                            </div>
                        </div>
                    </ContentTemplate>
                </AccordionItem>
                <AccordionItem>
                    <HeaderTemplate>Delivery Address</HeaderTemplate>
                    <ContentTemplate>
                        <div>
                            <div id="Address_Fill" style="padding:10px">
                                <form id="formId_Address">
                                    <div class="form-group">
                                        <div class="e-float-input">
                                            <EjsTextBox @ref="@NameTextbox" @ref:suppressField Placeholder="Name"></EjsTextBox>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="e-float-input">
                                            <EjsTextBox @ref="@AddressTextbox" @ref:suppressField Placeholder="Address"></EjsTextBox>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <EjsNumericTextBox TValue="int" @ref="@MobileNumberTextbox" @ref:suppressField Placeholder="Mobile" FloatLabelType="@FloatLabelType.Auto" ShowSpinButton="false" Format="0"></EjsNumericTextBox>
                                    </div>
                                </form>
                                <div style="text-align: center">
                                    <EjsButton @onclick="@OnContinue">Continue</EjsButton>
                                    @if (EmptyField)
                                    {
                                        <div class="Error">* Please fill all fields</div>
                                    }
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                </AccordionItem>
                <AccordionItem>
                    <HeaderTemplate> Card Details</HeaderTemplate>
                    <ContentTemplate>
                        <div id="Card_Fill" style="padding:10px">
                            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <EjsNumericTextBox TValue="int" @ref="@CardNumberTextbox" @ref:suppressField Placeholder="Card No" FloatLabelType="@FloatLabelType.Auto" ShowSpinButton="false" Format="0"></EjsNumericTextBox>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <div class="e-float-input">
                                        <EjsTextBox @ref="@CardHolderNameTextbox" @ref:suppressField Placeholder="CardHolder Name"></EjsTextBox>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                <EjsDatePicker Width="100%" Placeholder="Expiry Date" Format="MM/YYYY" Readonly="false"></EjsDatePicker>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <EjsNumericTextBox @ref="@CvvTextbox" @ref:suppressField TValue="int" Placeholder="CVV" FloatLabelType=@FloatLabelType.Auto Format="0" ShowSpinButton="false"></EjsNumericTextBox>
                                </div>
                            </div>
                        </div>
                        <div style="text-align: center">
                            <EjsButton @onclick="@GoBack">Back</EjsButton>
                            <EjsButton @onclick="@SaveDetails">Save</EjsButton>
                            @if (EmptyField)
                            {
                                <div class="Error">* Please fill all fields</div>
                            }
                        </div>
                    </ContentTemplate>
                </AccordionItem>
            </AccordionItems>
        </EjsAccordion>
    </div>
    <div>
        <EjsDialog @ref="AlertDialog" @ref:suppressField Width=250 Target="#AccordionElement" IsModal=true Visible=false ShowCloseIcon="true">
            <DialogEvents Created="DialogCreate"></DialogEvents>
            <DialogTemplates>
                <Header><div>Alert</div></Header>
                <Content><div>Your payment successfully processed</div></Content>
            </DialogTemplates>
            <DialogButtons>
                <DialogButton ButtonModel="@OkBtn" OnClick="@OnSubmit" />
            </DialogButtons>
        </EjsDialog>
    </div>
</div>

@code{
    EjsAccordion Accordion;
    EjsTextBox EmailTextbox;
    EjsTextBox PasswordTextbox;
    EjsTextBox NameTextbox;
    EjsTextBox AddressTextbox;
    EjsDialog AlertDialog;
    EjsTextBox CardHolderNameTextbox;
    public EjsNumericTextBox<int> CardNumberTextbox { get; set; }
    public EjsNumericTextBox<int> MobileNumberTextbox { get; set; }
    public EjsNumericTextBox<int> CvvTextbox { get; set; }
    public Boolean EmptyField { get; set; } = false;
    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel OkBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "OK", IsPrimary = true };
    public void OnCreate()
    {
        this.Accordion.EnableItem(1, false);
        this.Accordion.EnableItem(2, false);
    }

    public void OnSignIn()
    {
        if (this.EmailTextbox.Value == null || this.PasswordTextbox.Value == null)
        {
            this.EmptyField = true;
        }
        else
        {
            this.EmptyField = false;
            this.Accordion.EnableItem(1, true);
            this.Accordion.Select(1);
            this.Accordion.ExpandItem(false, 0);
            this.Accordion.ExpandItem(true, 1);
        }
    }
    public void OnContinue()
    {
        if (this.NameTextbox.Value == null || this.AddressTextbox.Value == null || this.MobileNumberTextbox == null)
        {
            this.EmptyField = true;
        }
        else
        {
            this.Accordion.EnableItem(2, true);
            this.Accordion.Select(2);
            this.Accordion.ExpandItem(false, 1);
            this.Accordion.ExpandItem(true, 2);
        }
    }
    public void GoBack()
    {
        this.Accordion.Select(1);
        this.Accordion.ExpandItem(false, 2);
        this.Accordion.ExpandItem(true, 1);
    }
    public void SaveDetails()
    {
        if (this.CardNumberTextbox == null || this.CardHolderNameTextbox == null || this.CvvTextbox == null)
        {
            this.EmptyField = true;
        }
        else
        {
            this.EmptyField = false;
            this.AlertDialog.Show();
        }
    }
    public void DialogCreate()
    {
        this.AlertDialog.Hide();
    }
    public void OnSubmit(Object args)
    {

        this.AlertDialog.Hide();
        this.Accordion.EnableItem(0, true);
        this.Accordion.EnableItem(1, false);
        this.Accordion.EnableItem(2, false);
        this.Accordion.Select(0);
    }

}

<style>
    .Error {
        color: red;
    }
</style>

Output be like the below.

Alt text