Multipage as a wizard

[MBEN]

Hi,

I need to create a questionnaire in my website. I was using standalone multipage explained here:

http://demos.telerik.com/aspnet-ajax/tabstrip/examples/multipage/standalone-multipage/defaultcs.aspx

I have a set of radio button questions and I use page views to divide them into pages.On the last page I show a​ result graph based on the answers chosen. I need the questions to be required without defaulting a radio button value. Howevere, I am not able to do the validation on a page basis.

Below is the code that I am using.​ Please advise:

<script type="text/javascript">

       var minIndex = 0,
           maxIndex = 5,
           globalSelectedIndex,
           multiPage,
           NextPage,
           PreviousPage;

       function pageLoad() {
           multiPage = $find("<%= rmRiskTolerance.ClientID %>");
           PreviousPage = $find("<%= PreviousPage.ClientID %>");
           NextPage = $find("<%= NextPage.ClientID %>");

           //Initialization of the global selected index of the RadMultiPage control
           globalSelectedIndex = multiPage.get_selectedIndex();
       }

       function PrevClicked(sender, args) {

           globalSelectedIndex--;
           multiPage.set_selectedIndex(globalSelectedIndex);

           if (globalSelectedIndex == minIndex) {
               sender.set_enabled(false);
           }

           if (!NextPage.get_enabled()) {
               NextPage.set_enabled(true);
           }
       }

       function NextClicked(sender, args) {
           Page_ClientValidate("QuestionnaireValidationGroup");
           if (Page_IsValid) {

               globalSelectedIndex++;
               multiPage.set_selectedIndex(globalSelectedIndex);

               if (globalSelectedIndex == maxIndex) {
                   sender.set_enabled(false);
               }

               if (!PreviousPage.get_enabled()) {
                   PreviousPage.set_enabled(true);
               }
               return true;
           }
           else {
               return false;
           }

       }
   </script>
   <div class="page_header">
       <h1>Risk Tolerance Questionnaire</h1>
   </div>
   <div>
       <telerik:RadMultiPage ID="rmRiskTolerance" runat="server" SelectedIndex="0">
           <telerik:RadPageView ID="pvStep1" runat="server">

               <h2>Step 1 : Complete the Questionnaire</h2>
               <p>
                   <h4>1. When do you expect to begin distributions from the Plan?
                   </h4>
                   <asp:RequiredFieldValidator ID="rbBeginDistributionRequired" runat="server" ControlToValidate="rbBeginDistribution" ErrorMessage="* Required" SetFocusOnError="true"
                       ValidationGroup="QuestionnaireValidationGroup"></asp:RequiredFieldValidator>
                   <asp:RadioButtonList ID="rbBeginDistribution" runat="server">
                       <asp:ListItem Text="Within 5 years" Value="2"></asp:ListItem>
                       <asp:ListItem Text="In 5–10 years" Value="4"></asp:ListItem>
                       <asp:ListItem Text="In 5–10 years" Value="8"></asp:ListItem>
                       <asp:ListItem Text="In more than 15 years" Value="12"></asp:ListItem>
                   </asp:RadioButtonList>
               </p>
               <p>
                   <h4>2. Once you begin taking distributions from the Plan, how long do you expect the distributions to last?
                   </h4>
                   <asp:RequiredFieldValidator ID="rbDistributionTimeRequired" runat="server" ControlToValidate="rbDistributionTime" ErrorMessage="* Required" SetFocusOnError="true"
                       ValidationGroup="QuestionnaireValidationGroup"></asp:RequiredFieldValidator>
                   <asp:RadioButtonList ID="rbDistributionTime" runat="server">
                       <asp:ListItem Text="I plan to take a lump sum distribution" Value="1"></asp:ListItem>
                       <asp:ListItem Text="1 to 5 years" Value="2"></asp:ListItem>
                       <asp:ListItem Text="5 to 10 years" Value="3"></asp:ListItem>
                       <asp:ListItem Text="10 years or more" Value="4"></asp:ListItem>
                   </asp:RadioButtonList>
               </p>

           </telerik:RadPageView>
           <telerik:RadPageView ID="pvStep2" runat="server">

               <h2>Step 1 : Continued</h2>
               <p>
                   <h4>3. Investing involves a trade-off between risk and return.  Which statement best describes your investment goals?
                   </h4>
                   <asp:RequiredFieldValidator ID="rbInvestmentGoalsRequired" runat="server" ControlToValidate="rbInvestmentGoals" ErrorMessage="* Required" SetFocusOnError="true"
                       ValidationGroup="QuestionnaireValidationGroup"></asp:RequiredFieldValidator>
                   <asp:RadioButtonList ID="rbInvestmentGoals" runat="server">
                       <asp:ListItem Text="Protect the value of my account. In order to minimize the chance for loss, I am willing to accept the lower long-term returns provided by conservative investments." Value="1"></asp:ListItem>
                       <asp:ListItem Text="Keep risk to a minimum while trying to achieve slightly higher returns than the returns provided by investments that are more conservative." Value="3"></asp:ListItem>
                       <asp:ListItem Text="Balance moderate levels of risk with moderate levels of returns." Value="6"></asp:ListItem>
                       <asp:ListItem Text="Maximize long-term investment returns. I am willing to accept large and sometimes dramatic fluctuations in the value of my investments." Value="10"></asp:ListItem>
                   </asp:RadioButtonList>

               </p>
               <p>
                   <h4>4. Select the portfolio you would be most comfortable investing in:
                   </h4>
                   <asp:RequiredFieldValidator ID="rbPortfolioRequired" runat="server" ControlToValidate="rbPortfolio" ErrorMessage="* Required" SetFocusOnError="true"
                       ValidationGroup="QuestionnaireValidationGroup"></asp:RequiredFieldValidator>
                   <asp:RadioButtonList ID="rbPortfolio" runat="server">
                       <asp:ListItem Text="Portfolio 1—Annual investment return of 5% or loss of 4%." Value="2"></asp:ListItem>
                       <asp:ListItem Text="Portfolio 1—Annual investment return of 10% or loss of 8%." Value="3"></asp:ListItem>
                       <asp:ListItem Text="Portfolio 1—Annual investment return of 20% or loss of 16%." Value="5"></asp:ListItem>
                       <asp:ListItem Text="Portfolio 1—Annual investment return of 30% or loss of 25%." Value="6"></asp:ListItem>
                   </asp:RadioButtonList>
               </p>
           </telerik:RadPageView>
           <telerik:RadPageView ID="pvStep3" runat="server">
               <h2>Step 1 : Continued</h2>

               <p>
                   <h4>5. If the value of your portfolio decreased by more than 20% in one year, how would you react?
                   </h4>
                   <asp:RequiredFieldValidator ID="rbPortfolioDecreaseRequired" runat="server" ControlToValidate="rbPortfolioDecrease" ErrorMessage="* Required" SetFocusOnError="true"
                       ValidationGroup="QuestionnaireValidationGroup"></asp:RequiredFieldValidator>
                   <asp:RadioButtonList ID="rbPortfolioDecrease" runat="server">
                       <asp:ListItem Text="I would not change my portfolio." Value="11"></asp:ListItem>
                       <asp:ListItem Text="I would wait at least one year before changing to options that are more conservative." Value="8"></asp:ListItem>
                       <asp:ListItem Text="I would wait at least three months before changing to options that are more conservative." Value="3"></asp:ListItem>
                       <asp:ListItem Text="I would immediately change to options that are more conservative." Value="1"></asp:ListItem>
                   </asp:RadioButtonList>

               </p>
               <p>
                   <h4>6. If the stock market increased by 15% in one year while the value of your portfolio (invested primarily in bonds and cash) increased by 4% in the same year, how would you react?
                   </h4>
                   <asp:RequiredFieldValidator ID="rbStockMarketIncreaseRequired" runat="server" ControlToValidate="rbStockMarketIncrease" ErrorMessage="* Required" SetFocusOnError="true"
                       ValidationGroup="QuestionnaireValidationGroup"></asp:RequiredFieldValidator>
                   <asp:RadioButtonList ID="rbStockMarketIncrease" runat="server">
                       <asp:ListItem Text="I would replace the bond and cash positions of my portfolio with stocks." Value="10"></asp:ListItem>
                       <asp:ListItem Text="I would add more stocks to my portfolio but not enough to make them a majority position." Value="3"></asp:ListItem>
                       <asp:ListItem Text="I would not change my portfolio." Value="1"></asp:ListItem>
                   </asp:RadioButtonList>

               </p>
           </telerik:RadPageView>
           <telerik:RadPageView ID="pvResult" runat="server">
               <h2>Step 2 : Score your Questionnaire</h2>
               <p>
                   Your score is <b>
                       <asp:Literal ID="litScore" runat="server"></asp:Literal></b> and the corresponding M Portfolio Allocation Model is <b>
                           <asp:Literal ID="litAllocationModel" runat="server"></asp:Literal></b>.
               </p>

           </telerik:RadPageView>
       </telerik:RadMultiPage>
       <div class="buttonContainer">
           <telerik:RadButton ID="PreviousPage" Text="Previous" ToolTip="Click to see previous page" runat="server" Enabled="false" AutoPostBack="false" OnClientClicked="PrevClicked">
           </telerik:RadButton>
           <telerik:RadButton ID="NextPage" Text="Next" ToolTip="Click to see next page" runat="server" CausesValidation="true" AutoPostBack="true" OnClientClicked="NextClicked" OnClick="NextPage_Click">
           </telerik:RadButton>
       </div>
   </div>

code behind:

 protected void NextPage_Click(object sender, EventArgs e)
        {
            if (rmRiskTolerance.SelectedPageView.ID == "pvResult")
            {
                List<int> scoreList = new List<int>();
                GetRadioButtonListValues(rmRiskTolerance, scoreList);
                GetQuestionnaireResult(scoreList);
            }
        }​

I could not find any other tool to design a questionnaire. I will be happy to give something else a try if this scenario isn't possible.

[Dimitar]

Hi,

We have a special TabStrip - Wizard demo that showcases how this control could be used to design a Wizard. And recently we have released the RadWizard control, which is specifically designed for such scenarios. In addition, there is a demo that features a survey with RadWizard.

I would suggest you to browse the rest of the RadWizard demos as well. And you may find further reference about this control in its online documentation.

I hope it will allow you to achieve the desired functionality much easier.

Regards,
Dimitar
Telerik