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

4 posts, 0 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 20 Apr Link to this post

    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!

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 22 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 27 Apr in reply to Boyan Dimitrov Link to this post

    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
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready