This is a migrated thread and some comments may be shown as answers.

Radwizard hide/disable step from client

10 Answers 578 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 19 Sep 2016, 11:44 PM

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.

10 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 22 Sep 2016, 06:23 AM
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
0
Sam
Top achievements
Rank 1
answered on 20 Feb 2017, 06:41 PM

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. 

0
Ivan Danchev
Telerik team
answered on 23 Feb 2017, 12:50 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sam
Top achievements
Rank 1
answered on 23 Feb 2017, 03:35 PM

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";
        }
    }
}
0
Ivan Danchev
Telerik team
answered on 28 Feb 2017, 11:17 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
SDI
Top achievements
Rank 1
answered on 23 Mar 2017, 11:31 PM

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?

0
Ivan Danchev
Telerik team
answered on 28 Mar 2017, 02:33 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dayre-Musetti
Top achievements
Rank 1
answered on 15 Jun 2017, 03:59 PM

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

0
Ivan Danchev
Telerik team
answered on 20 Jun 2017, 11:50 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dayre-Musetti
Top achievements
Rank 1
answered on 20 Jun 2017, 06:11 PM

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

 

Tags
Wizard
Asked by
Tony
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Sam
Top achievements
Rank 1
SDI
Top achievements
Rank 1
Dayre-Musetti
Top achievements
Rank 1
Share this question
or