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

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

3 Answers 1243 Views

DropDownList

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

developer asked on 21 Apr 2016, 04:55 AM

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!

3 Answers, 1 is accepted

answered on 27 Apr 2016, 06:30 AM

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