How to refresh kendo multiselect drop down after adding new item to list using angular js

[developer]

Hi,
I'm using kendo multi select drop down,if items are not available in multi select drop down i'm giving option to add items.after adding items multi select drop down is not getting refreshed with added details,and im using multi select drop down in ng-repeat.

Here is the my code.

View:

<div class="row form-group" ng-repeat="questionOption in questionnaireAdd.questions">

     <div class="col-sm-10">

         <label class="label">

             Select follow up Questions<span class="mg-right-align">

                 <a href="" uib-tooltip="Manage question group" tooltip-placement="left"

                    data-target="#addQuestion" data-toggle="modal">Add Question</a>

             </span>

         </label>

         <label class="select">

             <select id="followupQueId" kendo-multi-select ng-model="questionOption.followupQuestionDetails" required

                     k-data-text-field="'questionName'"

                     k-data-value-field="'parentId'"

                     k-options="questionnaireAdd.questionDropdownOptions" k-rebind="questionnaireAdd.questionDropdownOptions"></select>

         </label>

     </div>

 </div>

 

Controller:

function onGetQuestionsSuccess(data: Array<Reactore.CMS.Models.Question>) {

         var questionsList = data.filter((o) => o.id !== questionnaireAddVm.questionDetailId);

         questionnaireAddVm.questionsList = .map(questionsList, ((i) => { return .extend({}, i, { parentId: i.id }); }));

 

         questionnaireAddVm.questionDropdownOptions = {

             dataSource: {

                 data: questionnaireAddVm.questionsList,

                 sort: { field: "questionName", dir: "asc" }

             }

         };

     }

 

     function onGetQuestionsFail(error) {

         console.log("Failed to get questions" + error);

     }

 

     function loadQuestions(questionGroupId) {

         cmsFacade.questionGroupApi.getQuestionsByQuestionGroupId(questionGroupId).then((data) => onGetQuestionsSuccess(data), (error) => onGetQuestionsFail(error));

     }

 

If i used $('#followupQueId').data("kendoMultiSelect").dataSource.add(data); like this its adding to list but as I'm using dropdown in repeat its not pushing item to all repeated drop down its adding to first drop down.

Appreciate your support!

Thanks!

[Boyan Dimitrov]

Hello developer,

The problem with the provided code is that the id for the MultiSelect element 

<select id="followupQueId" kendo-multi-select

is static and for each question in questionnaireAdd.questions it will create an element with same id value. It is not allowed to have more than one HTML element with same id value on same page. I would suggest to include some identifier to the generated id in order each select element to have a unique id value. 

Regards,
Boyan Dimitrov
Telerik

 

 

[developer]

Hi Boyan Dimitrov,

Thanks for your reply.

I changed the view according to your suggestion like below
 

<select id="followupQueId{{questionOption.id}}"
 kendo-multi-select ng-model="questionOption.followupQuestionDetails"
 k-data-text-field="'questionName'"
 k-open="questionnaireAdd.onOpen(questionOption)"
 k-data-value-field="'parentId'"
 k-placeholder="'Select Question'"
 k-options="questionnaireAdd.questionDropdownOptions"
 k-rebind="questionnaireAdd.questionDropdownOptions">
</select>

still its not working.

can you please create a demo for refreshing multi-select when it is inside ng-repeat

Thanks

[Petyo]

Hello,

I am afraid that we don't have such a demo available. You may use our dojo to demonstrate your case - we will examine it and advise you further.

Regards,
Petyo
Telerik