CODEWITHSUNDEEP
javascriptvue.jskendo-ui
ravi kumar
ravi kumar

Reputation: 1620

Two way data binding not working on Kendo UI

I have a kendo-dropdownlist component that gets it's data from an API call. I had implemented this using the kendo-datasource component and everything worked fine. But I now have multiple kendo-dropdownlist components and instead of making an API call for every kendo-dropdownlist component, I am supposed to make only one API call and all the kendo-dropdownlist components should get it's data from the same JSON response. This kendo-dropdownlist is bound to a property called "currentData".

So what I am doing now is that I am declaring a kendo-dropdownlist component but not giving it any data-source-ref. Instead I am setting it's data-source attribute to a local data property called "source" which is an array of JSON.

Then in the mount life-cycle hook, I am making an API call and setting the response to the "source" data property. After this, the dropdown-items get populated in the kendo-dropdownlist but the "currentData" is not selected.

Component template:

<kendo-dropdownlist
              v-model="currentData"
              :data-source="source.filter(s => s.type == 'something')"
              data-text-field="name"
              data-value-field="Id"
            ></kendo-dropdownlist>

Component script:

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 can confirm that one of the objects in the sources array has it's Id property equal to this.prop1 .

Upvotes: 4

Views: 1006

Answers (1)

Varit J Patel
Varit J Patel

Reputation: 3520

I can see in your mounted lifecycle hook, you have called setDataSource function. but you missed the reference to that function.

It should be called if you use 

await this.setDataSource()

instead of 

await setDataSource()

You can click on the any of the data and corresponding data is visible under <p></p> tag.

UPDATED StackBlitz Link: Here is the working Stackblitz

Hope this helps!

Upvotes: 2

Related Questions