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

Kendo vue dropdownlist binding updating but not showing on UI

1 Answer 68 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
ravi asked on 31 Mar 2019, 07:19 PM

I want to show a number of kendo dropdownlist(s) on a page. The exact number depends on an API call. This API call will give me an array of objects. The objects have the following properties: Id, name, type, role and isSelected.
The number of dropdownlist that has to be shown on this page should be equal to the number of unique type values in the API response array. i.e, numberOfDropdowns = => a.type).distinct().count().
Now, each dropdown will have a datasource based on the type property. i.e, For a dropdown for type = 1, dataSource will be stakeholders.filter(s => s.type == 1).
Also the default values in the dropdowns will be based on the isSelected property. For every type, only one object will have isSelected = true.
I have achieved these things by using the following code:

02.  <div
03.    v-if="selectedStakeholders.length > 0"
04.    v-for="(stakeholderLabel, index) in stakeholderLabels"
05.    :key="stakeholderLabel.Key"
06.  >
07.    <label>{{ stakeholderLabel.Value }}:</label>
08.    <kendo-dropdownlist
09.      v-model="selectedStakeholders[index].Id"
10.      :data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"
11.      data-text-field="name"
12.      data-value-field="Id"
13.    ></kendo-dropdownlist>
15.    <button @click="updateStakeholders">Update form</button>
16.  </div>
20.import STAKEHOLDER_SERVICE from "somePath";
21.export default {
22.  name: "someName",
23.  props: {
24.    value1: String,
25.    value2: String,   
26.  },
27.  data() {
28.    return {
29.      payload: {
30.        value1: this.value1,
31.        value2: this.value2
32.      },
33.      stakeholders: [],
34.      selectedStakeholders: [],
35.      stakeholderLabels: [] // [{Key: 1, Value: "Stakeholder1"}, {Key: 2, Value: "Stakeholder2"}, ... ]
36.    };
37.  },
38.  mounted: async function() {
39.    await this.setStakeholderLabels();
40.    await this.setStakeholderDataSource();
41.    this.setSelectedStakeholdersArray();
42.  },
43.  methods: {  
44.    async setStakeholderLabels() {
45.      let kvPairs = await STAKEHOLDER_SERVICE.getStakeholderLabels();
46.      kvPairs = kvPairs.sort((kv1, kv2) => (kv1.Key > kv2.Key ? 1 : -1));
47.      kvPairs.forEach(kvPair => this.stakeholderLabels.push(kvPair));
48.        },
49.    async setStakeholderDataSource() {
50.      this.stakeholders = await STAKEHOLDER_SERVICE.getStakeholders(
51.        this.payload
52.      );
53.    }
54.    setSelectedStakeholdersArray() {
55.      const selectedStakeholders = this.stakeholders
56.        .filter(s => s.isSelected === true)
57.                .sort((s1, s2) => (s1.type > s2.type ? 1 : -1));
59.      selectedStakeholders.forEach(selectedStakeholder =>
60.        this.selectedStakeholders.push(selectedStakeholder)
61.      );     
62.    },
63.    async updateStakeholders() {
64.      console.log(this.selectedStakeholders);
65.    }
66.  }

The problem is that I am not able to change the selection in the dropdownlist the selection always remains the same as the default selected values. Even when I choose a different option in any dropdownlist, the selection does not actually change.
I've also tried binding like this:

      :data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"


If I bind like this, I am able to change selection but then the default selection does not happen, the first option is always the selection option i.e, default selection is not based on the isSelectedproperty.
My requirement is that I have to show the dropdown with some default selections, allow the user to choose different options in all the different dropdowns and then retrieve all the selection then the update button is clicked.
UPDATE: When I use the first method for binding, The Id property of objects in the selectedStakeholders array is actually changing, but it does not reflect on the UI, i.e, on the UI, the selected option is always the default option even when user changes selection. Also when I subscribe to the change and select events, I see that only select event is being triggered, change event never triggers.

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 02 Apr 2019, 10:58 AM
Hello Ravi,

The reason for all those problems is that the implemented code attempts to pass objects as selected values, but the model is bound via the value field of the object. That contradicts with Vue paradigms and principles. You should rather bind the models to a primitive array with only strings or numbers. And then use computed properties and watchers to manipulate data and return the array of selected objects. Here you are a possible solution:

Progress 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
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question