Questions on Kendo UI for Vue Forum

1 answer

758 views

Kendo vue dropdownlist binding updating but not showing on UI

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.

answered on 02 Apr 2019

1 answer

65 views

Kendo Dropdown Wrapper + Kendo data source not working as expected when filtering

I'm trying to use the Kendo Dropdownlist wrapper (I need the grouping functionality) and the Kendo datasource.

However when I change the data prop of the KendoDatasource, the changes aren't immediately reflected in the Kendo Dropdownlist.

Repro:
D1kq29 (forked) - StackBlitz
Steps:
1: Open dropdown, see 2 dropdown items
2: click on 'turn filter on'
3: See that the datasource now only has 1 item
4: open the dropdown, see 2 dropdown items <- not expected
5: click on 'turn filter on' again
6: open dropdown, see 1 dropdown item, despite datasource now actually having 2 items

DataSource wrappers (package)

DropDownList wrapper

answered on 10 Mar 2023

1 answer

76 views

Native DropDownTree when?

I'm experiencing severe clashes when using native packages with the DropDownTree wrapper. I was only using the wrapper packages before and everything was working fine, however now that I added the native grid to the app the wrapper DropDownTree is giving me Uncaught ReferenceError: jQuery is not defined

I remove all non standard code and still it comes out like the CSS is never applied on top of some other broken stuff.

I'm on VueJS 2.7.14

"@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.3",
    "@progress/kendo-dropdowntree-vue-wrapper": "^2023.1.117",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-svg-icons": "^1.1.1",
    "@progress/kendo-theme-default": "^6.0.3",
    "@progress/kendo-ui": "^2023.1.117",
    "@progress/kendo-vue-animation": "^3.8.1",
    "@progress/kendo-vue-data-tools": "^3.8.1",
    "@progress/kendo-vue-dateinputs": "^3.8.1",
    "@progress/kendo-vue-dropdowns": "^3.8.1",
    "@progress/kendo-vue-excel-export": "^3.8.1",
    "@progress/kendo-vue-grid": "^3.8.1",
    "@progress/kendo-vue-indicators": "^3.8.1",
    "@progress/kendo-vue-inputs": "^3.8.1",
    "@progress/kendo-vue-intl": "^3.8.1",
    "@progress/kendo-vue-popup": "^2.7.3"

I used these packages before and everything was fine:

    "@progress/kendo-dropdowntree-vue-wrapper": "^2021.3.1207",
    "@progress/kendo-licensing": "^1.2.1",
    "@progress/kendo-theme-default": "^4.43.0",
    "@progress/kendo-ui": "^2021.3.1207"

If anyone could tell me how to use the css file from @progress/kendo-theme-default": "^4.43.0" inside a component I think that would solve my problem.

DropDownList

DropDownTree wrapper

updated answer on 24 Jan 2023

2 answers

83 views

DropDownList Remote Data Binding

Hi,

Where can I find an example on how to load remote data on a dropdownlist, the remote data it's a JSON.

Any help would be appreciated.

DataSource wrappers (package)

DropDownList

answered on 17 Mar 2022

0 answers

52 views

VueJS DropDownList style issue

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

DropDownList

asked on 25 May 2023

1 answer

24 views

Filter with data item key and text field in dropDownList

Hello,

I have a queastion. When I use DropDownList in Navtive components of Vue3, I want to filter with both data item key and text field.
but the method I found is only using one field.

The field properties of a DropDownList are strings or functions.
I need Array<string> like ['dataItemKey', 'textFiled']. Can I?

example :

data-Item-list = [
{text : 'A', value : 1},
{text : 'B', value : 2},
{text : 'C', value : 3},
{text : 'D', value : 4}
]

When I put 3, C is searched.
At the same time I put D, D is searched.

DropDownList

answered on 27 Mar 2024

1 answer

110 views

DropDownTree Wrapper component, how to save value?

How do I save the value from this dropdowntree component onChange?:

https://www.telerik.com/kendo-vue-ui/components/dropdowntree-wrapper/

With the multiselect and dropdownlist components I can use

e.sender.dataItems();

and

e.sender.dataItem(e.sender.select());

respectively

But for the dropdowntree component there isnt't a dataItem attached to the event sender object.

DropDownTree wrapper

answered on 20 Oct 2021

1 answer

171 views

PopupAppendTo props in Kendo UI Components

Hi, I have used Kendo UI for Vue for quite some time now. I noticed that Kendo Dropdownlist components have the PopupAppendTo props to bind the dropdown to the element in template, while majority of the other components do not have and ending up appended to the body-tag (outside of <div id='app'>).

I'm quite surprised to see this because Vue.js only has control over the <div id='app'> element and Vue.js recommends against using body-tag. Why don't other components have this props as well so that Vue.js has full control over the Kendo UI components?

answered on 19 Aug 2019

13 answers

296 views

Scheduler - call another component for custom edit template

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.

General Discussions

answered on 12 Apr 2021

1 answer

63 views

Drag items from dropdown lists

I have implemented a drop down list as follows. i want to drag items from this list. :draggable="true" :dropzone="true"

doesn't seems to trigger this. Items cannot be dragged. How to achieve this? Thank you in advance

<kendo-dropdownlist

v-model="dropdownlistValue"

:data-source="dataSourceArray"

:data-text-field="'text'"

:data-value-field="'value'"

:filter="'contains'"

:draggable="true"

:dropzone="true">

</kendo-dropdownlist>

dataSourceArray:any []=[{ text: 'Small', value: '1' }, { text: 'Medium', value: '2' }, { text: 'Large', value: '3' }, { text: 'X-Large', value: '4' }, { text: '2X-Large', value: '5' } ];

dropdownlistValue= "";