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

vuejs wrappers- support for dataSource refresh?

3 Answers 926 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
milind
Top achievements
Rank 1
milind asked on 30 Jan 2018, 06:05 AM

I am trying to bind a combobox to a dynamic array defined on Vue instance. The values on the array are not known until the control is databound. I can't seem to figure why change to the array won't refresh the combo. Here's the code snippet. Does current version pf kendo-vue support this behavior?

 

//javascript

var that = this;

that.$set(that, 'countryArray', [{text: 'canada', value:'2' }]);

//html

<kendo-combobox v-model="countrySel"
:placeholder="'Select country...'"
:data-source="countryArray"
:data-text-field="'text'"
:data-value-field="'value'"
:filter="'contains'"
>
</kendo-combobox>

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 31 Jan 2018, 12:57 PM
Hello Milind,

The described behavior is already implemented and is part of the new reactivity changes that are scheduled to be released with the next Service Pack (2018 R1 SP1) in late February.

Currently, as a workaround for the issue, a watcher can be defined which will use the setDataSource() method to update the widget data:
<script>
new Vue({
el: "#vueapp",
data: function() {
return {
dataSourceArray: [ 'Football', 'Basketball']
}
},   
mounted: function() {
 this.dataSourceArray = ['New value 1', 'New value 2']
},
watch: {
dataSourceArray (val) {
 this.$refs.combobox.kendoWidget().setDataSource(val)
}
}
})
</script>

The above is demonstrated in action on the following Plunker.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
milind
Top achievements
Rank 1
answered on 13 Feb 2018, 11:13 PM
@Dimitar - Does 2018.1.212 address this issue? 
0
Dimitar
Telerik team
answered on 14 Feb 2018, 09:48 AM
Hello Milind,

I can confirm that the reactivity changes for the Kendo Vue wrappers are released with the specified version (2018.1.212). You can test it out to verify that everything is working as expected.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
milind
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
milind
Top achievements
Rank 1
Share this question
or