Radwizard hide/disable step from client

[Tony]

I would like to be able to hide/disable or show/enable a step from the client side based on user response.

Hiding would mean i want to hide the step, have it skip that step in the navigation, and disable validation for that page..

Showing it would unhide it, add it back the step navigation, and re-enable validation.

I have been able to remove the step and hide it, but I can't insert it back if needed.

I could possibly hide the step, disable validation, and then override the next button so that it skips that step. But it would still affect that percentage complete, etc.

Also, I am not doing a asp postback as I am saving the data via an ajax post. So corrupting the viewstate is not an issue.

[Ivan Danchev]

Hello Tony,

Hiding a Wizard step is not supported neither on the client nor on the server. As an alternative to hiding/showing steps we would suggest adding and removing them using the add() and remove() client-side methods of the RadWizardStepCollection object.

Regards,
Ivan Danchev
Telerik by Progress

[Sam]

I have achieved this functionality by changing the cssClass of the WizardStep in the code behind. 

.wizardStep {

  height:100%;

}

.wizardStepHidden {

  height:100%;

  display:none;

}

You will still need to handle the skipping of the steps if the cssClass = "wizardStepHidden" though. 

[Ivan Danchev]

Hello Sam,

Thank you for sharing your approach. Indeed although a step can be hidden through the CssClass property the Wizard will still navigate to it (Previous, Next buttons), so additional navigation logic would be needed and the control's API can be used to set the active step. 

Regards,
Ivan Danchev
Telerik by Progress

[Sam]

Hi Ivan, 

You are correct. I mentioned that at the end but I guess I should have been a little more clear and included some example code. Below is a stripped down version of how I am skipping over the steps with the next and previous buttons, as well as handling it on page load. 

 

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadWizardStep4.CssClass = "wizardStepHidden";
        RadWizardStep5.CssClass = "wizardStepHidden";
        Session["VisibilityRatesWizardLaborWorkCategory"] = null;
        Session["VisibilityRatesWizardTravelWorkCategory"] = null;
    }
    else
    {
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
}
protected void RadWizard1_NextButtonClick(object sender, WizardEventArgs e)
{
    int currentStepIndex = e.CurrentStepIndex;
    //Response.Write("<script>alert('" + currentStepIndex + "')</script>");

    if (currentStepIndex == 0)
    {
        if (LaborWorkCategoryCheckBox.Checked == true)
        {
            Session["VisibilityRatesWizardLaborWorkCategory"] = "SHOW";
            RadWizardStep4.CssClass = "wizardStep";
        }
        else
        {
            Session["VisibilityRatesWizardLaborWorkCategory"] = null;
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (TravelWorkCategoryCheckBox.Checked == true)
        {
            Session["VisibilityRatesWizardTravelWorkCategory"] = "SHOW";
            RadWizardStep5.CssClass = "wizardStep";
        }
        else
        {
            Session["VisibilityRatesWizardTravelWorkCategory"] = null;
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
    if (currentStepIndex == 2 && RadWizardStep4.CssClass == "wizardStepHidden" && RadWizardStep5.CssClass == "wizardStepHidden")
    {
        (sender as RadWizard).ActiveStepIndex = 5;
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
    if (currentStepIndex == 2 && RadWizardStep4.CssClass == "wizardStep" && RadWizardStep5.CssClass == "wizardStepHidden")
    {
        (sender as RadWizard).ActiveStepIndex = 3;
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
    if (currentStepIndex == 2 && RadWizardStep4.CssClass == "wizardStepHidden" && RadWizardStep5.CssClass == "wizardStep")
    {
        (sender as RadWizard).ActiveStepIndex = 4;
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
    if (currentStepIndex == 3 && RadWizardStep5.CssClass == "wizardStepHidden")
    {
        (sender as RadWizard).ActiveStepIndex = 5;
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
}
protected void RadWizard1_PreviousButtonClick(object sender, WizardEventArgs e)
{
    int currentStepIndex = e.CurrentStepIndex;

    if (currentStepIndex == 5 && RadWizardStep4.CssClass == "wizardStepHidden" && RadWizardStep5.CssClass == "wizardStepHidden")
    {
        (sender as RadWizard).ActiveStepIndex = 2;
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
    if (currentStepIndex == 5 && RadWizardStep4.CssClass == "wizardStep" && RadWizardStep5.CssClass == "wizardStepHidden")
    {
        (sender as RadWizard).ActiveStepIndex = 3;
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
    if (currentStepIndex == 5 && RadWizardStep4.CssClass == "wizardStepHidden" && RadWizardStep5.CssClass == "wizardStep")
    {
        (sender as RadWizard).ActiveStepIndex = 4;
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
    if (currentStepIndex == 4 && RadWizardStep4.CssClass == "wizardStepHidden")
    {
        (sender as RadWizard).ActiveStepIndex = 2;
        if (Session["VisibilityRatesWizardLaborWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardLaborWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep4.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep4.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep4.CssClass = "wizardStepHidden";
        }
        if (Session["VisibilityRatesWizardTravelWorkCategory"] != null)
        {
            if (Session["VisibilityRatesWizardTravelWorkCategory"].ToString() == "SHOW")
            {
                RadWizardStep5.CssClass = "wizardStep";
            }
            else
            {
                RadWizardStep5.CssClass = "wizardStepHidden";
            }
        }
        else
        {
            RadWizardStep5.CssClass = "wizardStepHidden";
        }
    }
}

[Ivan Danchev]

Hi Sam,

Thank you for posting the logic you use for steps skipping. I posted a link to this thread in the feature request item in our Feedback Portal, as your approach would be helpful to other members of the community who want to hide Wizard steps.

Regards,
Ivan Danchev
Telerik by Progress

[SDI]

So why can you use set_disable with other controls? I can change the title with set_title('blah'), but not set_enable(true/false). This seems kinda of needed property feature for any control on client-side. Only 4 properties you can use for the wizardstep - http://docs.telerik.com/devtools/aspnet-ajax/controls/wizard/client-side-programming/radwizardstep-object

...seems this control got short changed. Any plans on making this control more usable with opening up some more client-side properties?

[Ivan Danchev]

Hello,

Currently the status of this feature is "Approved", but it is still not scheduled for implementation, thus we cannot provide an estimate on when official support for hiding steps will be added to the control. In general the highly demanded features get implemented with precedence. If you have ideas on particular RadWizard client-side properties and methods that could be exposed you can log them as a feature request/s and vote.   

Regards,
Ivan Danchev
Telerik by Progress

[Dayre-Musetti]

Hi Sam,

Thank's for sharing this solution. I'm trying to apply your css on client side and I cant' find a javascript function to do that.

I've tried stuff like sender.get_activeWizardStep().set_cssClass("wizardStepHidden"); in OnClientButtonClicked without succes.

Anyone can give a hint ?

Thank's

[Ivan Danchev]

Hello Dayre-Musetti,

The wizard step has a set_cssClass method, so for instance you can set the class the following way:

var wizard = $find("<%= RadWizard1.ClientID%>");
var step = wizard.get_activeWizardStep();
step.set_cssClass("MyClass");

However the step's css class set on the client is not persisted after a postback, i.e. "MyClass" will be set to the step's li element and will be present until a postback is initiated.

Regards,
Ivan Danchev
Progress Telerik

[Dayre-Musetti]

Thank's Yvan, that will do the job for my needs :-)