Parent-Child Checkbox in Material Checkbox - angular5

I have two cases that I want to implement:
[]Checkbox1
[]checkbox1.1
[]checkbox1.2
If I select parent node checkbox1 it should not select it's children.
If I select both the child, it should not select parent.
I am using mat checkboxes, any idea how it can be achieved.

I don't believe that Material Component has this logic it self, at leats yet, look here, there is an issue reported:
https://github.com/material-components/material-components-android/issues/857
If you wanna extend the Material Check Button and add you the logic you can do it, have a look into this answer:
Creating a three states checkbox on android

Related

Get new parentId of row after drag and drop in ej2-treegrid

I have a syncfusion treeGrid component with drag and drop activated. When a component is dropped I would like to know what row is gonna be the parent after the drop (what's the new parentId).
Searching the documentation, you have these events that fire from drag and drop actions. Sounds like you want to listen to rowDrop event. This event will provide these event arguments, of which I think you want dropIndex property. With the index of the row dropped on you should be able to look up the id and other information in your rows data array.
From using getCurrentViewRecords method, we can get the ParentItem or ParentID of the dropped Child with Children property of that record and if it is dropped as Parent, ParentItem remains undefined. You can get the details from actionComplete event of the TreeGrid after rowDrag and drop operation.
Refer to the documentation lInk:
https://ej2.syncfusion.com/vue/documentation/api/treegrid/#getcurrentviewrecords
https://ej2.syncfusion.com/vue/documentation/api/treegrid/#rowdrop

Programmatically Adding a TreeViewItem

I'm trying to programmatically populate a treeview in UWP. However, I'm getting confused between TreeViewItem and TreeViewNode.
I can add a TreeViewNode to another TreeViewNode like this:
Windows.UI.Xaml.Controls.TreeViewNode node = new Windows.UI.Xaml.Controls.TreeViewNode();
node.Content = myInfo.Name;
parentNode.Children.Add(node);
However, my understanding is that when I get down to the lowest level, I need a TreeViewItem; e.g.:
root
- Level 1 - Node
- Level 2 - Node
- Level 2 - Node
- TreeViewItem?
- Level 1
- TreeViewItem?
However, I can't do this:
Windows.UI.Xaml.Controls.TreeViewItem node = new Windows.UI.Xaml.Controls.TreeViewItem();
node.Content = data;
node.Tag = tagInfo;
parentNode.Children.Add(node);
I assume that I'm misunderstanding the purpose of a TreeViewItem. Please could someone point me in the right direction?
Yeah the thing is... as you can see here the TreeViewItem is the Root of the TreeView Item Template and the TreeViewNode is the "actual" Item.
Oversimplified
IF you want to add items to your TreeView, then you HAVE to use the TreeViewNode class
IF you want to "redesign" your TreeViewNodes, lets say instead of normal hierarchical list look you want to have some hexagon list, then you have to implement the TreeViewItem in your Style/Template
Like Zer0 said, you don't have to use TreeViewItem. In fact, the basic component that makes up a TreeView is the TreeViewNode. The TreeViewItem can be thought of as a TreeViewNode container of the same level and style. It has the ItemsSource and ItemTemplate properties, which can create the same "TreeViewNode" in batches according to the data collection.
The relationship between TreeView/TreeViewItem/TreeViewNode is like the relationship of building/wall/brick. The wall is made up of many identical bricks and can itself be seen as a large brick.
Best regards.

ListView containing GridViews and ListViews

I have a requirement to create a xaml page with Semantic Zoom where the zoomed in view contains both GridViews and ListViews. I have started out with the basic Grid Application template.
In order to try to achieve this, I have made the Semantic Zoom control's zoomed in view show a list view, and the list view contains the ListView and GridView controls I need to actually show the data as ListViewItems. This works, up to a point - the issue is that the mouse-down or tap animations happen on the whole child control of the parent ListView instead of the child's elements. This sort of layout would be simple if I didn't need to support semantic zoom.
So, my question is is this the best way to achieve this sort of layout, or am I missing something. If this is the best way, is it possible to control the behaviour so that the child item elements have the correct animation effect on selection?
Additional Info
The choice of GridView or ListView is based on the type of the items in the collections. In this example, grp 1, 3 and 4 (to be shown in grids) are all collections of type NewsFull and the remainder (to show in Lists) are of type HeadlineOnly, both types inherit from NewsBase.
The page layout (zoomed in) should be something like this...
Title
grp 1 grp 2 grp 3 grp 4 grp 5
[g][g][g][g] [_list item_] [g][g][g][g][g] [g][g][g] [_list_item_]
[g][g][g][g] [_list item_] [g][g][g][g][g] [g][g][g] [_list_item_]
[g][g][g][g] [_list item_] [g][g][g][g] [g][g] [_list_item_]
[g][g][g] [_list item_] [g][g][g][g] [g][g]
where [g] is a grid view item, and [_list_item_] is a list view item.
Zoomd out view is like this...
Title
grp 1 grp 2 grp 3 grp 4 grp 5
[summary] [summary] [summary] [summary] [summary]
Perhaps you can try using the ItemContainerStyleSelector to swap out the container of the items based on the item type or similar? This way, may be you can set one group to have a wrapping layout container and another can just be a stackpanel?
the design looks reasonable to me. the issue you have is merely " is it possible to control the behaviour so that the child item elements have the correct animation effect on selection?"
the problem here is that you probably lack abstraction here regarding different levels of UI object. I would assume you wrote this big control simply using one xaml object and then messed up with the style setup. In my opinion, you will need to break your UI to these levels of components:
ZoomPage // which is essentially a list
GroupElement // which could be GRID object or list object depending on the DATACONTEXT
GroupElement // which also has a summary state.
what you specified definitely can be achieved, looks to me just the styles are not deployed properly, if indeed your control is too complex, break it down, and test them separately.
hope this helps

how to get id of fieldset

my question is similar to Extjs 4 How to get id of parent Component?.
But i am looking solution for it. As the answer given in the question doesn't seems to be useful
In my case i m having button in my each fieldset and also i m creating these fieldsets dynamically which contain button inside it.
Now on click event of button which is inside fieldset i want to get its corresponding fieldset id
This code will return parent fieldset:
button.up("[xtype='fieldset']")
Mahesh,
ACtully the problem in our case is , it is not extending the Ext.form.FieldSet.
So look this Extjs 4 How to get id of parent Component?
As Zango said, **button.up("[xtype='fieldset']")** will work for you.
Thanks,
Kunal

colorbox check parent element exist

i am using colorbox to open a window that appears a grid with categories. After select the check boxes i draw the categories at parent window.So far so good.
My problem is that before draw i check if the category exist in parent window but its not working
if($('#cat-2', window.parent.document).length==0)
$('#categories', window.parent.document).append(newdata);
Am i missing something.
if($('#cat-2', window.parent.document).length==0) is saying "do something if #cat-2 doesn't exist."
Maybe try simply if($('#cat-2', window.parent.document).length)