I am trying to get the items preselected, so I used SelectionModel which works fine, but the problem happens which clicking on parent item to deselect all child, the parent item has to be clicked 3 times to get it to work.
ngOninit() {
this.treeControl.dataNodes.forEach(node => {
if ( node.level === 2 && res.item_ids.includes(+node.id)) {
this.checklistSelection.toggle(node);
}
});
}
as you can see I am selecting all the items on level to that is matching a given array with item_ids, it works fine, and if all children items are selected it selects the parent as well, but when I deselect the parent item it keeps the child items selected until I ( deselect then select then again deselect) parent item.
I found the solution by following the example provided in Angular material website, https://stackblitz.com/angular/yvdqyjdmmke?file=app%2Ftree-checklist-example.ts
I used the provided function todoItemSelectionToggle() and make sure this.checkAllParentsSelection(node); is used within the function.
Related
I'm implementing a functionality where the user can sort the list and re-order the elements, on dragover I want to show the droppable area below the dragover element.
Note: I want to achieve this using native javascript
Without seeing your code I can't suggest an exact implementation but you can use JS to inject a "placeholder" element.
First, you'll need to know the position of all your items, maybe use an array to log the order of your list items.
Next, on dragover append the placeholder element in the place of where the dragged item you are moving is located on the list. For example, if you have a list like:
ITEM 1
ITEM 2
ITEM 3
ITEM 4
When you drag ITEM 4 over ITEM 3 then inject the placeholder after ITEM 2 so it appears between ITEM 2 and 3. When you drop ITEM 3, you can remove the placeholder.
Note, you'll also have to remove the injected placeholder as you move further up/down the list. Otherwise, you'll end up with multiple placeholders.
There are also plugins available for this such as HTML5 Sortable and SortableJS
I'm wondering if anyone has come across this issue.
I have two radio buttons on a canvas app that I am attempting to control the values displayed within a list box.
RadioButtons.Items: ["SomeValueA","SomeValueB"]
The list box control should be getting reset whenever the value of the radio button changes.
UpdateContext({resetList: !resetList});
UpdateContext({resetList: !resetList});
Reset(lbListbox);
lbListbox.Reset: resetList
For the list box itself I have the following for Items:
Switch(
RadioButtons.Selected.Value,
"SomeValueA",
Sort(
EntityA.FieldName,
Descending
),
"SomeValueB",
Sort(
EntityB.'Some other field name',
Descending
)
)
The problem is when I select 'SomeValueA' the list box properly populates with the values from EntityA.FieldName but when I then select 'SomeValueB' from the radio buttons the list box blanks out with empty records. There appears to be items in the list box that I can scroll through and select but not see.
If I put two list boxes on the screen and set their Items event to the specific entity the values show up properly in both list boxes so I know the entity naming/field is correct.
I've tried it without the reset of the list box, I've tried it using collections made out of the entity records.
Has anyone come across this who maybe has a solution. I was going to try to put two list boxes on top of one another and either hide/show or bring to front the active list but that also doesn't want to work.
thanks!
(Received this post from another source, figured I might as well post back here as well)
Got this to work, but it was a bit finicky. The catch seemed to be giving the List a value-pairing table, instead of just a list of values.
First I collected the Option Sets from CDS, and added a column to indicate the source name, for reference. This could easily be combined into a single collection, and then filtered later but I was thinking simple.
ClearCollect(colOptionSet1,AddColumns(Choices('Ownership (Accounts)'),"appSource","Ownership"));
ClearCollect(colOptionSet2,AddColumns(Choices('Preferred Method of Contact (Accounts)'),"appSource","Preferred Method"));
Next added a Radio button identical to yours.
Then added a List control with Items equal to
If( Radio1.Selected.Value = "SomeValueA", colOptionSet1, Radio1.Selected.Value = "SomeValueB", colOptionSet2 )
You may need to use the right-side property pane to toggle between Value and "appSource" (from collections above), but this did allow me to toggle between two separate Option Set fields in a single list.
Patching/writing this back is gonna be another hurdle. 😝
I have a parent component that contains a table, and a child component that contains a bootstrap modal.
When a row in the table is clicked the modal should pop up with many functions and filtered select-drop-boxes that matches the clicked row.
From my understanding, these three are my options:
A. Opening the modal with a function inside the child component (the modal) via #Viewchild. When closed, another function in the child component should clear the properties and fields in the modal.
pros: The DOM will not have to recreate the child component each time a row is clicked.
cons: If the modal is not needed it will be created unnecessarily. + I have to reset the fields on close.
B. Use *ngIf on the child component (the modal). When a row is clicked, the if statement becomes true and in the ngOnInit the modal will call a method to pop up the modal.
pros: No need to reset the fields, everything will be set in the ngOnInit.
cons: will be created each time a row is clicked.
C. use a message service between the parent and the child that will trigger show/hide on the modal.
cons: a service needs to be built for this.
I would like to understand what is considered a good practice and what's a bad practice in these approaches. Or alternative ways to achieve this. I'm working on a big project and need to do this a lot.
I'm using ant design in my project. There I'm using DataTable.
It has row expand feature.
Problem
When user expand the child row, the parent row background color needs to be changed or else needs to add css class for that row.
Fiddle Here
I have created function onExpand of the table.
onExpand = (expanded, record) => {
alert(expanded);
console.log('onExpand', expanded, record); }
TIA
You have to use the onRow property to add a custom css class for each expanded row. First of all you need distinguish the expanded rows from the collapsed one. Therefore you have to store the keys of the expanded rows in the state to assign the css class to the right rows. For that purpose you have to use expandedRowKeys and onExpand properties too.
You can check the working example overhere:
https://codesandbox.io/s/2xyy8mqwoj
I've got an application that allows a user to select a row in a Kendo Angular 2 grid and click a button that removes that row. After the row is removed, however, the grid selection persists on the index of the row that was just removed. I'd like to clear the grid's selection after the button is clicked and the row is removed. For the life of me, I cannot find a way to do this. Any ideas?
The Kendo Grid control has a property of "selectedKeys" which binds to an array of numbers. You can then clear this array when you want to clear the selection of the grid.
<kendo-grid
[selectedKeys]="mySelection"></kendo-grid>
In your code:
this.mySelection = [];