Telerik Forums
Kendo UI for Vue Forum
1 answer
23 views

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.

Konstantin Dikov
Telerik team
 answered on 27 Mar 2024
1 answer
77 views

Is it possible to prevent the user from clicking (selecting) a parent node, but still allow selection of any children. Or ideally change the behaviour of the parent node to expand / collapse the node. The current behaviour of the DropDownTree is that all children are selected, and I don't want this, only a single (child)node  should be selectable

So in the example below, the user can select on Apple, Orange etc, but not Fruit / Vegetable 

- Fruit
- Apple
- Orange
- Peach
- Vegetable
- Spinach
- Beans
etc

 

Konstantin Dikov
Telerik team
 answered on 24 Jan 2024
1 answer
24 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
0 answers
60 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


1f9xdq (forked) - StackBlitz

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 16 Nov 2023
0 answers
51 views

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

Matus
Top achievements
Rank 1
 asked on 25 May 2023
0 answers
63 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
1 answer
43 views

The styling for DropdownList with fillmode="outline" appearance option set appears to be broken:

Vue Dropdowns Library & DropDownList Component - Appearance - Kendo UI for Vue Docs & Demos (telerik.com)

When hovering over the dropdown the colors are inverted, showing a black dropdownlist button background and white text
I expected this would be a slightly grey background with black text when hovering over the dropdownlist. 

Petar
Telerik team
 answered on 20 Mar 2023
1 answer
76 views

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.

Vincent
Top achievements
Rank 1
Iron
 updated answer on 24 Jan 2023
1 answer
68 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
82 views
hai i want to ask about multiselect checkbox in native component. is there any reference about using it for server side process? i have a problem with columnsMenu filter to get data from another API. my case is that in grid table i using columnMenu filter multiselect checkbox and that data list in checkbox i got it from another API(master data city for example) but i still fail to implement it. really appreciate your help.
you can ask if my question is hard to understand because bad english
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 05 Jan 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
Grid wrapper
Editor
DatePicker
DropDownTree wrapper
Scheduler
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
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
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?