Question T10655
Visible to All Users

Dynamic ChoiceMax in a dropdown

created 2 years ago

Hi,

We have a requirement where we have to bind the years from 1950 to current year in a dropdown. We are able to set ChoicesMin value as it is fixed but current year obtained from new Date().getFullYear() is dynamic we are not able to use ChoicesMax property for the same. We may have multiple dropdown of the years on the page and they can also be added dynamically so we don't want to access the dropdown in the angular component through name and set its choices. Can u pls help us in implementing the scenario?

The name specific approach we have used as shared below and is also working fine but we want the code to be generic so could pls guide us?

Code
loadYearsAndMonths(): void {     //Add years to dropdown     var currentYear = new Date().getFullYear();     var startYear = 1950;     while (startYear <= currentYear) {       var year = new Survey.ItemValue(startYear++);       this.surveyModel.getQuestionByName('CE_panel').template.getQuestionByName("CE_Year").choices.push(year);       this.surveyModel.getQuestionByName('WLF1_Proof').template.getQuestionByName("WLF1_Year").choices.push(year);       this.surveyModel.getQuestionByName('WLF2_Proof').template.getQuestionByName("WLF2_Year").choices.push(year);       this.surveyModel.getQuestionByName('ACLP_M1_Proof').template.getQuestionByName("ACLP_M1_Year").choices.push(year);       this.surveyModel.getQuestionByName('ACLP_M2_Proof').template.getQuestionByName("ACLP_M2_Year").choices.push(year);       this.surveyModel.getQuestionByName('ACLP_M3_Proof').template.getQuestionByName("ACLP_M3_Year").choices.push(year);       this.surveyModel.getQuestionByName('ACLP_M4_Proof').template.getQuestionByName("ACLP_M4_Year").choices.push(year);       this.surveyModel.getQuestionByName('ACLP_M5_Proof').template.getQuestionByName("ACLP_M5_Year").choices.push(year);       this.surveyModel.getQuestionByName('ACLP_E1_And_E2_Proof').template.getQuestionByName("ACLP_E1_And_E2_Year").choices.push(year);       this.surveyModel.getQuestionByName('DDD_LP1_Proof').template.getQuestionByName("DDD_LP1_Year").choices.push(year);       this.surveyModel.getQuestionByName('DDD_LP2_Proof').template.getQuestionByName("DDD_LP2_Year").choices.push(year);       this.surveyModel.getQuestionByName('DDD_LP3_Proof').template.getQuestionByName("DDD_LP3_Year").choices.push(year);       this.surveyModel.getQuestionByName('DDD_LP4_Proof').template.getQuestionByName("DDD_LP4_Year").choices.push(year);       this.surveyModel.getQuestionByName('DDD_LP5_Proof').template.getQuestionByName("DDD_LP5_Year").choices.push(year);       this.surveyModel.getQuestionByName('DDD_LP6_Proof').template.getQuestionByName("DDD_LP6_Year").choices.push(year);       this.surveyModel.getQuestionByName('DDD_LP7_Proof').template.getQuestionByName("DDD_LP7_Year").choices.push(year);     }     //Add months to dropdown     for (let index = 1; index <= 12; index++) {       var element = Months[index];       var month = new Survey.ItemValue(Months[element], element);       this.surveyModel.getQuestionByName('CE_panel').template.getQuestionByName("CE_Month").choices.push(month);       this.surveyModel.getQuestionByName('WLF1_Proof').template.getQuestionByName("WLF1_Month").choices.push(month);       this.surveyModel.getQuestionByName('WLF2_Proof').template.getQuestionByName("WLF2_Month").choices.push(month);       this.surveyModel.getQuestionByName('ACLP_M1_Proof').template.getQuestionByName("ACLP_M1_Month").choices.push(month);       this.surveyModel.getQuestionByName('ACLP_M2_Proof').template.getQuestionByName("ACLP_M2_Month").choices.push(month);       this.surveyModel.getQuestionByName('ACLP_M3_Proof').template.getQuestionByName("ACLP_M3_Month").choices.push(month);       this.surveyModel.getQuestionByName('ACLP_M4_Proof').template.getQuestionByName("ACLP_M4_Month").choices.push(month);       this.surveyModel.getQuestionByName('ACLP_M5_Proof').template.getQuestionByName("ACLP_M5_Month").choices.push(month);       this.surveyModel.getQuestionByName('ACLP_E1_And_E2_Proof').template.getQuestionByName("ACLP_E1_And_E2_Month").choices.push(month);       this.surveyModel.getQuestionByName('DDD_LP1_Proof').template.getQuestionByName("DDD_LP1_Month").choices.push(month);       this.surveyModel.getQuestionByName('DDD_LP2_Proof').template.getQuestionByName("DDD_LP2_Month").choices.push(month);       this.surveyModel.getQuestionByName('DDD_LP3_Proof').template.getQuestionByName("DDD_LP3_Month").choices.push(month);       this.surveyModel.getQuestionByName('DDD_LP4_Proof').template.getQuestionByName("DDD_LP4_Month").choices.push(month);       this.surveyModel.getQuestionByName('DDD_LP5_Proof').template.getQuestionByName("DDD_LP5_Month").choices.push(month);       this.surveyModel.getQuestionByName('DDD_LP6_Proof').template.getQuestionByName("DDD_LP6_Month").choices.push(month);       this.surveyModel.getQuestionByName('DDD_LP7_Proof').template.getQuestionByName("DDD_LP7_Month").choices.push(month);     }   }

Answers approved by surveyjs Support

created 2 years ago (modified 2 years ago)

Hello,
You can extend the library by adding "choicexMaxExpression" property. You can apply a custom code on executing the expression. Here is the documentation. You can use "currentYear" built-in function.

JavaScript
Survey.Serializer.addProperty('dropdown', {   name'choicesMaxExpression:expression',   onExecuteExpression(obj, res) => {     obj.choicesMax = res;   }, });

After that you can use the following JSON:

JavaScript
{   elements: [     {       type'dropdown',       name'year',       isRequiredtrue,       choicesMin1950,       choicesMaxExpression'currentYear()',     },   ], }

Here is the working example.

Thank you,
Andrew
SurveyJS Team

    Show previous comments (6)

      Hello Nistha,
      The following code snippet illustrates how to fetch specific questions at run time by using another property (not the name property).

      • Add a custom property available for questions:
      JavaScript
      Survey.Serializer.addProperty('question', { name: 'myProp' });
      • Use the survey.getAllQuestions method to get a collection of survey questions. In a loop, check if question.myProp matches the specified value.
      JavaScript
      survey.getAllQuestions().forEach((question) => { if(question.myProp === 'Year'){ question.choicesMax = ... ... } });

      Please let us know if this helps.

        Hi Jane,

        Yes, it will help us. Thanks for providing the example.

          You're always welcome, Nistha!
          Please feel free to contact us at your convenience.