Recently, I encountered a challenge with my kendo-dropdownlist component. Initially, I was fetching data from an API using the kendo-datasource and everything was working smoothly. However, as I started to implement multiple instances of the kendo-dropdownlist, it became apparent that making separate API calls for each component wasn't efficient.
The solution was to make a single API call and have all the kendo-dropdownlist components retrieve their data from the same JSON response. Each dropdown list is linked to the "currentData" property, making it essential for all components to be synchronized in real-time.
To achieve this, I decided not to assign a data-source-ref to each kendo-dropdownlist. Instead, I used the local data property "source," which stores an array of JSON objects to populate the dropdown items.
During the mounting phase of the component, I trigger an API call to fetch the necessary data and update the "source" property accordingly. This successfully populates the dropdown items, although the "currentData" selection remains unaffected.
Below is a snippet of the component template and script:
<kendo-dropdownlist
v-model="currentData"
:data-source="source.filter(s => s.type == 'something')"
data-text-field="name"
data-value-field="Id"
></kendo-dropdownlist>
export default {
name: "SomeComponent",
props: {
prop1: String
},
data() {
return {
currentData: this.prop1,
source: []
};
},
mounted: async function() {
await this.setDataSource();
},
methods: {
async setDataSource() {
const formDTO = await SERVICE.getDataSource();
this.source = formDTO.stakeholders;
}
}
};
I verified that one of the objects in the sources array has its Id property matching this.prop1.