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

Multipage as a wizard

1 Answer 73 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 2
Veteran
MBEN asked on 05 Aug 2015, 11:24 PM

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.

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 06 Aug 2015, 08:10 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TabStrip
Asked by
MBEN
Top achievements
Rank 2
Veteran
Answers by
Dimitar
Telerik team
Share this question
or