Radwizard hide/disable step from client

8 posts, 0 answers
  1. Tony
    Tony avatar
    1 posts
    Member since:
    Jul 2012

    Posted 19 Sep 2016 Link to this post

    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.

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1094 posts

    Posted 22 Sep 2016 Link to this post

    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
  3. Sam
    Sam avatar
    3 posts
    Member since:
    Dec 2015

    Posted 20 Feb Link to this post

    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. 

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1094 posts

    Posted 23 Feb Link to this post

    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.
  5. Sam
    Sam avatar
    3 posts
    Member since:
    Dec 2015

    Posted 23 Feb Link to this post

    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";
            }
        }
    }
  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1094 posts

    Posted 28 Feb Link to this post

    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.
  7. RSI
    RSI avatar
    90 posts
    Member since:
    Nov 2011

    Posted 23 Mar in reply to Ivan Danchev Link to this post

    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?

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1094 posts

    Posted 28 Mar Link to this post

    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.
Back to Top