We have a Vuejs app that is using the Kendo DropDownTree control, with checkboxes, to display a hierarchy of data.
When a parent node is checked in the UI, all the child nodes are also checked. This is the desired behavior.
The problem is that the DropDownTree "#change" acts differently when the parent node is expanded in the UI and a parent is checked vs when the parent node is collapsed and a parent is checked.
If the parent node is expanded in the UI to show the child nodes, and the parent is clicked, the "#change" sends the checked parent node ID and all the checked child nodes IDs. This is the behavior we want.
However, if the parent node is collapsed in the UI and that parent node is checked, the "#change" only sends that checked parent node ID. The child nodes IDs do not get sent.
We need to have all checked items sent with the "#change" regardless if the nodes are expanded or collapsed.
How can we get all checked nodes from the DropDownTree?
MORE INFO:
Here is my DropDownTree settings:
<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"
>
Here is my Change function.
onChange($event) {
let vm = this
vm.$emit('onHierarchyChange', $event.sender._values)
}
To illustrate the problem:
Both parents below have 2 child nodes.
Parent1 happens to be expanded. If I check parent1, the control then checks child1+child2 automatically. And the code above 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 code above 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 by the control. I can see this if I expand parent2. The child nodes IDs just never get sent to the onchange() when it's parent2 is collapsed.
_parent1
-child1
-child2
_parent2
Is there a way to get all the checked IDs from "$event.sender._values" whenever any node is checked?
Related
There is this TablePackage component that we use in our project. I saw that to customize how values in a column render, one can pass template named with the specific column name (in this example status) and use slot prop row.
<!--Code Snippet 1-->
<!--In each row of status columns, we will see status buttons instead of plain status text-->
<TablePackage>
<template #status="{ row }">
<button>{{ row.status }}</button>
</template>
</TablePackage>
Now there are two more components, Parent and Dialogue.
Parent uses Dialogue, Dialogue uses TablePackage.
Parent component
<Dialogue title="dialogueTitle">
</Dialogue>
Dialogue component
{{ title }}
<TablePackage rows="rowList" columns="columnObj">
</TablePackage>
Now I want to be able to custom render values in a column as in 'Code Snippet 1' which means I want to render a button not a text in 'status' column. How can I achieve this from Parent component level? I tried nested template but it was not allowed. With the constraint that I can edit Parent and Dialogue components but not TablePackage, what's the recommended away to achieve this?
I have a parent form that loads child forms into tabs.
The parent looks like this:
<div repeat.for="app of Apps">
<compose if.bind='app.Url.startsWith("modules/")' view-model="${app.Url}"></compose>
</div>
So each of the "compose" tags loads a different page based on URL.
How can I find the specific page and call a function from that page's ts file?
I have a temporary solution in place by, on the parent, declaring a variable with:
childPage: any;
and then on the activate event of the child, I do:
parent.childPage = this;
Then, on the parent page, I have can do:childPage.childFunction();
This of course doesn't give me intellisense and won't work with multiple children, but for now, it meets my needs.
I want delete child component. I use this.rows.splice(index, 1)
When i call this.rows.splice(index, 1) VueJs always remove last component from this.$children and save internal state in component.$data ;
Example is here
`https://jsfiddle.net/abratko/gc7h1r34/3/`
How fix it?
Vue associates each data item with each vnode according to the item's index by default. This results in existing Vue components being reused, but bound to different items, when re-rendering the list after an item was removed from the array.
This is why you should always bind key to a value which uniquely identifies that particular item. In your example, since each item is a unique string you can just bind to that:
<row-component v-for="(row, index) in rows" :key="row">
^^^^^^^^^^
So let's say my html structure have couple of similar div elements.
body/div/...
body/div/...
body/div/...
body/DIV/div[#class='class']
I would like to access the last one. But the one that is upper-cased.
So "//body/div/" selector will find many, but not related elements.
And "//div/div[#class='class']" will select the child div, not the upper case parent.
Use parent to select the parent of a given element:
//div/div[#class='class']/parent
If you want to be more verbose, you can also select a parent by a given tag name:
//div/div[#class='class']/parent::div
Using v2.2.2. I have the following structure in my VueJS app. How can I access all of the Account components from a method on my Post component? The number of Accounts is dynamic - I want to grab all of the loaded Account components and iterate over them.
I know it's got something to do with $refs and $children, I just can't seem to figure out the right path.
<Root>
<Post>
<AccountSelector>
<Account ref="anAccount"></Account>
<Account ref="anAccount"></Account>
<Account ref="anAccount"></Account>
</AccountSelector>
</Post>
</Root>
https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs
Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using ref. For example:
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// access child component instance
var child = parent.$refs.profile
When ref is used together with v-for, the ref you get will be an array
or an object containing the child components mirroring the data
source.
Basically inside AccountSelector.vue you can do this.$refs.anAccount.map(account => doThingToAccount(account))
Edit
The above answer is for accessing a direct child.
Currently there is no way to access a non direct parent / child component with $refs. The best way to get access to their data would be through events https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication or by using Vuex (Which i would recommend).
Non direct parent - child communication is very tricky without 1 of these 2 methods.
You can access nested components data using $refs and if you want to access the refs inside of it you first have to target the first element of the first refs ([0])
example: parent.$refs[0].$refs.anAccount