Telerik Forums
Kendo UI for Vue Forum
1 answer
18 views

Hi,


Is it possible to implement a filter in a multiSelectTree so that when a search term matches a parent item, it automatically displays all of its children as well?

example:

data = [
    {
        text: 'Furniture'id: 1items: [
            { text: 'Tables & Chairs'id: 2 },
            { text: 'Sofas'id: 3 },
            { text: 'Occasional Furniture'id: 4 }
        ]
    }, {
        text: 'Decor'id: 5items: [
            { text: 'Bed Linen'id: 6 },
            { text: 'Curtains & Blinds'id: 7 },
            { text: 'Carpets'id: 8 }
        ]
    }
];

 

For instance, if one were to search for "decor," would the system also show "Bed Linen," "Curtains & Blinds," and "Carpets"?

Thanks in advance,
Ziggy

Konstantin Dikov
Telerik team
 answered on 15 Apr 2024
1 answer
96 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
80 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
0 answers
77 views
hi i want to ask about wrapper and naative component. is that possible to combine wrapper and native component in 1 feature? for example im using grid table from native component and filter columnMenu checkbox from wrapper component. i already try it but still not working until now
appreciate your help. thanks
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 06 Jan 2023
1 answer
135 views

We have a Vuejs app that is using the Kendo DropDownTree control, with checkboxes, to display a hierarchy of data.

The problem is, there is a difference with how the control returns the checked IDs when the parent node is expanded VS collapsed.

To illustrate the problem:

Both parents nodes below have 2 child nodes.

Parent1 happens to be expanded. If I check parent1, the control then checks child1+child2 automatically. And the "@change" function sends all three IDs. This is the desired affect.

Parent2 has 2 child nodes. But the child nodes can't be seen because parent2 is collapsed. When Parent2 is checked, the "@change" only sends parent2 ID. The child Ids are NOT sent. Why is this? Why the difference vs parent1 example?

Also, the child nodes for parent2 do get checked properly by the control. I can see this if I expand parent2. The child nodes IDs just never got sent to the "@change" when it's parent2 was clicked and collapsed.

 

 _parent1
    -child1
    -child2
 _parent2

 

Is there a way to get all the checked IDs from "$event.sender._values" whenever any node is checked?

Here is how my dropdowntree is configured along with the change function:

<dropdowntree
  :data-source="items"
  tagMode="single"
  :autoClose="false"
  :checkboxes-check-children="checkChildren"
  :check-all="true"
  :placeholder="placeholder"
  dataTextField="text"
  dataValueField="id"
  @change="onChange"
  :value="selectedItems"
  style="width: 100%"
  height="400px"
  :load-on-demand="true"
>

onChange($event) {
let vm = this
vm.$emit('onHierarchyChange', $event.sender._values)
}

 

Petar
Telerik team
 answered on 18 Mar 2022
1 answer
163 views

We have a Vuejs and Vuetify application.

We are using the DropDownTree control to display a hierarchy. In some cases, the list can be very long and scrolls off the page.

I tried using the "Height" property. This works for the DropDownTree controls that are NOT in a v-dialog.

But one of our DropDownTree controls displays in a v-dialog. The "Height" property has no effect here.

How can I make the "Height" property work for the DropDownTree in a v-dialog?

Or how can I specify a height for the DropDownTree or add scroll bars when the DropDownTree appears in a v-dialog?

 

Petar
Telerik team
 answered on 03 Mar 2022
1 answer
263 views

We are using the kendo-ui Dropdowntree control in our VueJS app.

If we have around 1100+ rows of data in our hierarchy, we find that the Browser screen freezes until the Dropdowntree control is finished populating.

Most of our hierarchies are much smaller and the control populates quickly as expected.

But we have 1135 rows in our hierarchy in one of our examples. The data is fetched from our API and returned to our Vuejs app, in a few seconds. But after the Vuejs load function finishes and the code is about to return to the UI, the screen freezes for about 10 seconds while the Dropdowntree control is populating. Nothing can be clicked while the screen is frozen.

How can we avoid the screen freezing while the Dropdowntree control is populating where the hierarchy rows are large?

 

Petar
Telerik team
 answered on 25 Feb 2022
1 answer
139 views

I've basically took the example stackblitz from the dropdowntree wrapper:
https://www.telerik.com/kendo-vue-ui/components/dropdowntree-wrapper/checkboxes/

 

And I added:

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

and 

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

https://stackblitz.com/edit/8ahikr?file=public%2Findex.html

Unfortunately, due to constraints, I can't upgrade the kendo.all.min.js bundle to 2021, or downgrade the jQuery version to 1.12.1


Is there a Kendo DropDownTree npm package version that works with both jQuery 3.5.1 and 2019.1.115 kendo.all.min.js? Or is this a bug that can be fixed?

Thanks in advance

Petar
Telerik team
 answered on 25 Oct 2021
1 answer
113 views

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.

Plamen
Telerik team
 answered on 20 Oct 2021
1 answer
284 views

Is there a way to disable just the checkbox in the dropdowntree? I need to be able to select and drill down in each node, but also need some checkboxes to be disabled. So a node could be disabled, but I would still like to drill down and select items inside that node that are enabled.

"myDataSource" has a "isEnabled" property that is set to true or false.

How can I disable just the checkbox in the control below

<dropdowntree
      :data-source="myDataSource"
      tagMode="single"
      :autoClose=false
      :checkboxes-check-children="true"
      :check-all="true"
      dataTextField="text"
      dataValueField="id"
      style="width: 100%;"
      height="auto"
    >
    </dropdowntree>


Plamen
Telerik team
 answered on 24 Jun 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
Editor
DatePicker
Scheduler
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
Chart wrappers (package)
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Window
Error
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
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
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?