or
1 answer
140 views
I am trying to implement virtualization in a dropdown list using Vue.js and Kendo-UI. I have successfully implemented virtualization but I am havign trouble understanding the importance of `ValueMapper`. What this means is that Dropdown options are correctly loading in the DropdownList when the user scrolls down, but the problem occurs when the user makes any selection in the Dropdown list.
When the user selects any value from the dropdown list, I see this error in the console:
> ValueMapper is not provided while the value is being set
I've read the docs and come to a conclusion that implementing a value mapper is only required when the dropdown option needs to be pre-fetched (See https://www.telerik.com/forums/need-help-understanding-virtualization-paging#C3qyuxTFGUSIRVeSxQZgog for detailed explanation).
But I am getting the above entioned error even when I select a dropdown option that has already been loaded. There must be something that I haven't understood about `valuemappers`.
Also, I am using dapper ORM in the backend which doesn't support `IQueryable` and therefor I've writed custom SQL to get paged data.
Here's my vue code:
<template>
<div v-show="visibility=='true'">
<label v-html="label">{{label}}</label>
<kendo-datasource
ref="remoteDatasource"
:transport-read-url="getRequestUrl"
transport-read-type="GET"
transport-read-data-type="JSON"
page-size="20"
schema-data="Data"
schema-total="Total"
server-paging="true"
></kendo-datasource>
<kendo-dropdownlist
ref="dropdownlist"
v-model="cntrlValue"
height="130"
virtual-item-height="26"
:virtual-value-mapper="valueMapper"
data-source-ref="remoteDatasource"
data-text-field="dropdownText"
data-value-field="dropdownValue"
option-label="Select here..."
@close="onSelect"
></kendo-dropdownlist>
</div>
</template>
<script scoped>
import service from "somepath";
export default {
name: "FormGroupSelect",
props: {
id: {
default: "kendo-Dropdown",
type: String
},
name: {
type: String
},
label: String,
visibility: String,
dropdownKey: String
},
data() {
return {
cntrlValue: this.value
};
},
watch: {
value: function(newVal) {
this.cntrlValue = newVal;
}
},
methods: {
onSelect: function() {
this.$emit("Select", this.cntrlValue);
},
getRequestUrl: function() {
return service.getDropdownOptionsRequestUrl(this.dropdownKey);
}
}
};
</script>
So, Should I implement value mapper even when I don't want to allow my user to select a value that hasn't been loaded in the dropdown yet? And if so, what is the best way to implement it without putting burden on the server by reading all the possbile values and then searching for the indices (because that's how it's done in the docs example).
When the user selects any value from the dropdown list, I see this error in the console:
> ValueMapper is not provided while the value is being set
I've read the docs and come to a conclusion that implementing a value mapper is only required when the dropdown option needs to be pre-fetched (See https://www.telerik.com/forums/need-help-understanding-virtualization-paging#C3qyuxTFGUSIRVeSxQZgog for detailed explanation).
But I am getting the above entioned error even when I select a dropdown option that has already been loaded. There must be something that I haven't understood about `valuemappers`.
Also, I am using dapper ORM in the backend which doesn't support `IQueryable` and therefor I've writed custom SQL to get paged data.
Here's my vue code:
<template>
<div v-show="visibility=='true'">
<label v-html="label">{{label}}</label>
<kendo-datasource
ref="remoteDatasource"
:transport-read-url="getRequestUrl"
transport-read-type="GET"
transport-read-data-type="JSON"
page-size="20"
schema-data="Data"
schema-total="Total"
server-paging="true"
></kendo-datasource>
<kendo-dropdownlist
ref="dropdownlist"
v-model="cntrlValue"
height="130"
virtual-item-height="26"
:virtual-value-mapper="valueMapper"
data-source-ref="remoteDatasource"
data-text-field="dropdownText"
data-value-field="dropdownValue"
option-label="Select here..."
@close="onSelect"
></kendo-dropdownlist>
</div>
</template>
<script scoped>
import service from "somepath";
export default {
name: "FormGroupSelect",
props: {
id: {
default: "kendo-Dropdown",
type: String
},
name: {
type: String
},
label: String,
visibility: String,
dropdownKey: String
},
data() {
return {
cntrlValue: this.value
};
},
watch: {
value: function(newVal) {
this.cntrlValue = newVal;
}
},
methods: {
onSelect: function() {
this.$emit("Select", this.cntrlValue);
},
getRequestUrl: function() {
return service.getDropdownOptionsRequestUrl(this.dropdownKey);
}
}
};
</script>
So, Should I implement value mapper even when I don't want to allow my user to select a value that hasn't been loaded in the dropdown yet? And if so, what is the best way to implement it without putting burden on the server by reading all the possbile values and then searching for the indices (because that's how it's done in the docs example).
Plamen
Telerik team
answered
on
23 Jan 2019
6 answers
308 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
Rank 1
Veteran
Iron
answered
on
13 Feb 2020
2 answers
526 views
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.
Filembar
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
answered
on
04 Feb 2022
1 answer
66 views
Hello,
I know that DropdownLisit wrapper component has a Group functionality for list rendering.
I was wondering if such functionality exists within the DropdownList Native component, and if not, is there a way to achieve one?
I can think of several ways using custom template to achieve this (very restrictive on how the data structure must be), but I would like some ideas on ways that other people have or would do this.
Thank you!
Plamen
Telerik team
answered
on
17 Jan 2023
0 answers
59 views
Hello, I'm trying to understand why the following lines of CSS are needed for the DropDownList (configured with filtering and custom height set via popup-settings) to work.
If I uncomment any of these CSS lines, the following unwanted behavior occurs:
1: scroll down a bit, like 100 or 200px so that the the DropDownList button is close the top of the viewport
2: click on the dropdown button
3: notice that the entire page scrolls to the top, almost as if the DropDownlist tried to open to top first but then mid-animation opened to the bottom.
Specifically the scrolling to the top of the page, is a behavior I'm trying to prevent.
Adding the extra lines of CSS is not a problem for me, however when the Vue app's mount target is nested, the unwanted behavior can be observed again. In the stackblitz you can demo this by nesting the mount target inside a <div>. Because my app's mount target is really deeply nested inside a DOM I don't think it's viable to add CSS styles to every wrapping element.
Is there a workaround for this? Thanks in advance
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
Rank 3
Iron
Iron
Iron
updated question
on
16 Nov 2023
1 answer
226 views
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.
Plamen
Telerik team
answered
on
30 Sep 2021
1 answer
228 views
I'm trying to add a custom class name to the DropDownList popup div like so:
Qtavuz (forked) - StackBlitz
But the custom class name isn't applied, while the custom width is. Is there a way to make this work?
Petar
Telerik team
answered
on
16 May 2022
1 answer
23 views
For the data tools filter is it possible to customize the dropdownlist component that is used to display the list of fields assigned to the :fields prop? I have followed the documentation for customizing the editors used for the fields input values , using slots, which works well. However I wanted to add the "filterable" attribute to the fields dropdown list as we have a large number of fields in the list and it would be good to be able to filter the list via a searchbox.
Konstantin Dikov
Telerik team
answered
on
23 Nov 2023
3 answers
141 views
I tried many methods, still I failed to get the working.
<kendo-datasource ref="jobtitleData"
:schema-data="'data'"
:transport-read-url="jobTitleService">
</kendo-datasource>
<kendo-dropdownlist ref="jobtitleList"
:data-source-ref="jobtitleData"
:data-text-field="'name'"
:data-value-field="'id'">
</kendo-dropdownlist>
<kendo-datasource ref="jobLevelData"
:schema-data="'data'"
:serverFiltering='true'
:transport-read-url="jobLevelService">
</kendo-datasource>
<kendo-dropdownlist ref="jobLevelList"
:data-source-ref="'jobLevelData'"
:data-text-field="'name'"
:data-value-field="'id'"
:placeholder="'Select Job Level'"
:cascadeFrom="'jobtitleList'"
:autoBind='false'>
</kendo-dropdownlist>
Ivan Danchev
Telerik team
answered
on
25 Mar 2019
3 answers
76 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
