Questions on Kendo UI for Vue Forum

3 answers

144 views

Setting Custom Editors .appendTo(container) .kendoDropDownList is not a function

We like to use dropdown inside the grid , so we using this (https://www.telerik.com/kendo-vue-ui/components/grid/editing/#toc-setting-custom-editors) example in our project we are getting this error

Uncaught TypeError: $(...).appendTo(...).kendoDropDownList is not a function
at VueComponent.categoryDropDownEditor (git.vue?26ca:154)

Anyone help me on this ?

answered on 17 Jan 2019

1 answer

5.1K+ views

Switch between Light and dark theme for whole site

Hi,

I am using Kendo UI Material theme. I would like to switch between light and dark themes without reloading the whole site. May I know what are variables available that I can set in the code?

Styling / Themes

updated answer on 10 Aug 2021

1 answer

9.3K+ views

add css class to kendo-grid-column

Using the kendo vue grid wrapper how can I add a css class to a kendo-grid-column ?

answered on 13 May 2019

7 answers

282 views

TypeError: cyclic object value

I see this error when I'm going to convert data of treeview's datasource to stringify.

I use kendo vue js like :

JSON.stringify( ....data("kendoTreeview").dataSource.data() )

General Discussions

answered on 02 Dec 2020

1 answer

756 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.