Hello everyone!
I am trying to implement a search field component based on kendo-combobox wrapper.
I want to cover via JEST unit tests the changed value but I can not trigger the change event and assert the component value.
I am sharing with you guys this code example : https://codesandbox.io/s/tender-proskuriakova-89bcm?fontsize=14&hidenavigation=1&theme=dark
Can you help me on this assertion : expect(wrapper.vm.$data.value).toEqual(1);
Hello,
please can somebody tell me what can i do with this style issue ? this issue display also with ComboBox and all of this stuff
I use vuejs version
"@progress/kendo-vue-dropdowns": "^3.5.0",
many thanks
We are evaluating kendo vue components for our project.
when typing in combobox, the dropdown doesn't scroll to first match.
Please refer to demos
https://www.telerik.com/kendo-vue-ui/components/dropdowns/combobox/
data items are:
["Baseball", "Basketball", "Cricket",
"Field Hockey", "Football", "Table Tennis", "Tennis",
"Volleyball" ]
when searching for "volley" the dropdown doesn't scroll to volleyball item.
I'm trying to have the Kendo DropDownList wrapper component expand to the viewport height so that there's a maximum amount of items on screen without having a scrollbar on <body>
I'm currently trying it with this approach but I'm wondering if there's a better way:
The main downside of this approach is that it relies on setting the 'height' prop to a number that is larger than the data source would take up when fully rendered. In this case a height of 999px won't work, while a height of 9999px will work. So when I set the height to 9999px I get the desired result but it feels hacky and I'm wondering if there's a better way.
Using Safari 15.0 visit the documentation page for the DropDownList (https://www.telerik.com/kendo-vue-ui/components/dropdowns/).
Try the examples and you will find that it's not possible to change items in the ComboBox (after the 1st selection). Also it is not possible to choose an item in the DropDownList.
Have confirmed this behaviour is consistent with behaviour we're experiencing in our application.
Impacts both mobile and desktop Safari versions.
I have started using the new Vue Native DropDownList and found a few issues when it is used inside a popup (bootstrap-vue modal).
The dropdown list will not display. I can make it display by adding:
.k-animation-container {
z-index: 100000;
}
Now it displays but clicking out side the dropped down list will not close it.
Wayne
Currently using ComboBox, When you select it and a drop down appears, I see you are using Teleport and appending it to the end of the body.
Are you able to either:
Hello,
I would like to call a component that contains only the custom edit template (to create a new task or edit) for my scheduler.
I followed this solution but the edit window just displays "[Object object]"
The code of scheduler
<kendo-scheduler id=
"scheduler"
:data-source=
"localDataSource"
:event-template=
"eventTemplate"
:editable=
"{template:editTemplate}"
>
The code of the method editTemplate()
methods: {
editTemplate:
function
(){
return
{
template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
}
}
},
The code of the component that contains the custom template
<template>
<div class=
"k-edit-form-container"
>
<p> Titre <input type=
"text"
/> </p>
<p>
<span >Start <input data-role=
"datetimepicker"
name=
"start"
/> </span>
<span >End <input data-role=
"datetimepicker"
name=
"end"
/> </span>
</p>
</div>
</template>
<script>
export
default
{
name:
"CustomEditTemplate"
,
}
</script>
I think the problem comes from the method editTemplate but I don't undestand why.
Anyone can help me ?
Thanks.
1
1
SAMPLE https://stackblitz.com/edit/usjgwp?file=index.html
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 = stakeholders.map(a => 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:
01.
<
template
>
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
>
14.
15.
<
button
@
click
=
"updateStakeholders"
>Update form</
button
>
16.
</
div
>
17.
</
template
>
18.
19.
<
script
>
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));
58.
59.
selectedStakeholders.forEach(selectedStakeholder =>
60.
this.selectedStakeholders.push(selectedStakeholder)
61.
);
62.
},
63.
async updateStakeholders() {
64.
console.log(this.selectedStakeholders);
65.
}
66.
}
67.
};
68.
</
script
>
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:
1.
<
kendo-dropdownlist
2.
v-model
=
"selectedStakeholders[index]"
3.
value-primitive
=
"false"
4.
:data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"
5.
data-text-field="name"
6.
data-value-field="Id"
7.
></
kendo-dropdownlist
>
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.
I want to enable/disable a kendo combobox based on the user's selection from a checkbox, which I am storing in a variable.
I already tried setting the variable to the enable property, but this is useful only when the control is being built-in.
Does anybody know If I can do this while creating the control?
<div id="fund" class="col-xs-3"> input class="required" data-bind="title: $parent.selectedFund, kendoComboBox: { placeholder: 'Start typing to search...', value: $parent.test, widget: $parent.searchSource, dataTextField: 'managerName', dataValueField: 'managerId', filter: 'contains', autoBind: false, minLength: 3, enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value change: function(){ if(this.value() && this.selectedIndex == -1){ setTimeout(function () {$parent.selectedManagerId(null);}, 100);}}, dataSource: { serverFiltering: true, transport: { read: $parent.retrieveManager }}}" /></div>