Telerik Forums
Kendo UI for Vue Forum
51 questions
Sort by
1 answer
84 views

I have some grids that have a date/time column. The default equality operators for the filter match both the date and time. I am trying to customize the equality operator (or add a new operator) that ignores the time and only compares the date. Using a custom operator works the first time I select the operator. When I go back to the filter menu after setting it the first time, the dropdown has no operator selected and I changing the value again doesn't work until after I select equals again.

How can I have the equals operator remain selected or add a new operator?

If this isn't supported, are there any other ways I can accomplish the same thing? I want to display both the date and time, but have equals only filter on the date.

Here is some example code: https://stackblitz.com/edit/custom-filter-only?file=src/main.vue

Petar
Telerik team
 answered on 30 Jun 2021
1 answer
66 views

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.

Plamen
Telerik team
 answered on 30 Mar 2023
2 answers
1.0K+ views
Hello,

I am receiving the following error when I try to implement ListView in my current project, "Uncaught (in promise) ReferenceError: kendo is not defined". I have seen similar issues posted but none of those solutions seem to apply to my situation.

In my current project I have implemented Kendo Grid and Dropdown. You can see below that the error is originating from the KendoListViewMixin.js file. I have installed the latest version of both "@progress/kendo-listview-vue-wrapper" & "@progress/kendo-ui", which should be all I need for what I am doing. Any insight into what I might be missing?

Ken
Top achievements
Rank 1
Iron
 answered on 28 Jul 2022
1 answer
719 views

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.

Ianko
Telerik team
 answered on 02 Apr 2019
6 answers
291 views

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

 

Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
 answered on 13 Feb 2020
3 answers
65 views

I'm using TreeList component and I want to rend dropdown list in column filters, I have set filterable to true and filterable-ui to rend function, but still failed, while it works in jquery TreeList. Failed meaning is rending default string type filters, not dropdown list. And I'm sure the attribute is received by component from vue chrome plugin.

Hoping some demoes to show how to work fine.

 

Code as following

HTML:

<kendo-treelist :data-source="resourceDataSource"
:filterable="true">
<kendo-treelist-column :field="'name'" :width="140"></kendo-treelist-column>
<kendo-treelist-column :field="'resourceType'" :width="100" :filterable="true" :filterable-ui="resourceTypeFilterableUi" :template="typeTemplate"></kendo-treelist-column>
</kendo-treelist>

 

JS:

resourceDataSource:

new kendo.data.TreeListDataSource({
serverPaging:true,
serverFiltering:true,
transport:{
read:{
url:'/api/RBAC/Resource/GetResouceListByTid',
type:"post",
dataType:'json',
data:{
companyId:vm.companyId
}
}
},
page:1,
pageSize:10,
schema: {
model: {
id: "id",
parentId: "parentId",
fields:{
resourceType:{ type:'string' }
}
},
data:function (res) {
return res.data.data
},
total:function (res) {
return res.data.total
}
}
})

 

Rend Function:

resourceTypeFilterableUi:function(element){
element.kendoDropDownList({
dataSource: resourceType,
dataTextField: "value",
dataValueField: "id"
})
}

 

 

 

Plamen
Telerik team
 answered on 05 Dec 2018
0 answers
54 views
How do I ensure the selected value is always visible when DropDownlist with virtualization and value primitive = true?



9s23we (forked) - StackBlitz

Repro:

  1. select item 1
  2. scroll down until subset containing item 1 is out of view
  3. see that the dropdown button no longer shows 1
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
 asked on 19 Apr 2023
0 answers
40 views

Hello,

 

I need to use a column filter with checkboxes on my current grid. I want the checkboxes to have values from all the possible data from the server instead of only the data that I got on the current page.

This means that when the column filter is getting open, I need to make a call to the server in order to get all the data I need.

Can you please provide me a way to do, because I can't find one.

Thanks

 

Nevermind, I solved it. I saw that there is a property dataItems. This raised another question. How can I make a loading animation for the dropdown while I m waiting to get my data?

Daniel
Top achievements
Rank 2
Iron
Iron
 updated question on 18 May 2023
1 answer
12 views

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:

  1. Set a prefix for kendo to use on all its CSS classes as to stop vendor conflicts (using other kendo ui products in ASP for example) OR
  2. Choose which element Kendo uses for its teleports.
Filip
Telerik team
 answered on 27 Jan 2024
3 answers
132 views

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 ?

 

 

Viktor Tachev
Telerik team
 answered on 17 Jan 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Scheduler
Editor
Editor wrapper
Input
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
DataSource wrappers (package)
Styling / Themes
Calendar
DateTimePicker
Gantt wrapper
Localization
Pager
Chart
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?