Search code examples
c#jqueryasp.netajaxajaxcontroltoolkit

Enable or Disable different Panes within an Accordion AJAX control?


I have a checkout process nested within an Accordion control:

Billing Address

Shipping Address

Shipping Method

Credit Card Info

Order Summary

I would like to set the Enabled state to false on page load (except for Billing Address), and sequentially enable each Pane as the user completes the information and clicks the "Continue" button WITHIN each Pane.

Currently, everything works the way I want, except all panes are always enabled.
I need a server side code so that on each continue click I can enable or disable the Accorion pane.

Also I need a code that on clicking Billing Address Pane all other Sectionpane should get disable I have tried below code but its not working.

        BillingInformation.HeaderContainer.Enabled = false;
        ShippingInformation.HeaderContainer.Enabled = false;

Solution

  • Resolved

    On page load event I used to write

            if (!IsPostBack)
            {  
                BillingInformation.HeaderContainer.Style.Add("pointer-events", "auto");
                ShippingInformation.HeaderContainer.Style.Add("pointer-events", "none");
                DelieveryMethodsPanel.HeaderContainer.Style.Add("pointer-events", "none");
                PromoCode.HeaderContainer.Style.Add("pointer-events", "none");
                PaymentInformation.HeaderContainer.Style.Add("pointer-events", "none");
            }
    

    and on continue click of billing information I used to write code as below through which only billing and shipping information will get enable and else all will be disable. I am just changing the style of the class through which it will get enable/disable.

    public void Continue1()
        {            
                BillingInformation.HeaderContainer.Style.Add("pointer-events", "auto");
                BillingInformation.HeaderContainer.Style.Add("cursor", "pointer");
    
                ShippingInformation.HeaderContainer.Style.Add("pointer-events", "auto");
                ShippingInformation.HeaderContainer.Style.Add("cursor", "pointer");
    
                DelieveryMethodsPanel.HeaderContainer.Style.Add("pointer-events", "none");
    
                PromoCode.HeaderContainer.Style.Add("pointer-events", "none");
    
                PaymentInformation.HeaderContainer.Style.Add("pointer-events", "none");
    
        }