How to get selected items on Fluent UI DetailsList component - javascript

I want to use DetailsList component https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist and select items. As I understand, the component doesn't provide us a prop to get selected items. I only see onActiveItemChanged prop which is only giving me single item but not all selected items.
I checked the question below, but it seems the answer doesn't work
Getting selected items in Fluent UI DetailsList
I wanted to create a state with an empty array and push or filter selected items into it, but there is also another problem. Scenario:
Click checkbox on header to select all items
If I click an item's checkbox, then it becomes unselected and other items still selected
If I click an item's any field instead of checkbox, then other items become unselected, and the one I clicked become selected.
Because of this reason -maybe I can also have other problem in the future-, I couldn't use state, as well.
I will be very glad if I can get current selected checkboxes on DetailsList component.

I found the answer.
import Selection from #fluentui/react
Add selection={selection} to DetailsList props
and then do this before returning the component:
const selection = new Selection({
onSelectionChanged: () => {
const selectedItems = selection.getSelection();
// Do something with the selected items'
console.log(selectedItems, "ewgergre");
},
});

Related

Vue- How can I control the behavior of chips in v-autocomplete?

I have a 20-25 names coming from API where I'll need to show them in a drop down box (requirement). I'm using Vue v-autocomplete here to display the selected names on the field. I've used custom item called Select All where the user can select all the names in the drop down list, but what I also need to do when the user clicks on Select All is that I don't want to show all the names in the Autocomplete field including Select All Chip. Only items that are selected individually without Select All should show as Chips.
Here is my code sandbox I've attempted so far. I'm new to Vue js, so I'm hoping to get some thoughts on controlling the chips on v-autocomplete.
v-autocomplete sandbox
Instead of including "Select All" in the array of names, you can use the prepend-item slot to include a separate Select All checkbox.
If you need to differentiate between names selected via individual click and those selected via the Select All checkbox you will probably need a new property in the names array to track that, say a boolean that is true if selected one way and false the other.
You'll also need a slot like selection to customize the display of your chips where you can use v-if to conditionally render a chip based on that new boolean property.
This codesandbox I believe is pretty close to what you're after

React Table - useRowSelect change select all default behavior

I am using the selection hook in my react table and I can't find a way to override the select all checkbox behavior.
When the select all checkbox is checked if you uncheck a specific row in the table it turns the isAllRowsSelected to false.
I want it to change only if the header checkbox is clicked, because I want to be able to have a state that says "all results, except the unmarked ones".
I am using server side pagination so I can't rely only on the selectedRowIds array.
This is the implementation of useRowSelect I used : here
You can add this line, it trigers on component mount.
React.useEffect(()=> {toggleAllRowsSelected()},[])
All code like this: codesandbox

How to control the order of the selected items

I am using react-dropdown-tree-select component for my project.
How can I change the order of the selected items?
The default selected item order is the same as the data list order, I want to change the order as the user choosing item order: every newly selected item will be appended to the selected list.
Thanks for your help!
In this case, you need to implement a middleware function inside onChange listener to rearrange the selected element and then update the state of data

Weird re-render behavior with react material-ui dialog

Background
So I build a front-end project for a delivery service, based on React and Material UI.
I was asked to use a Dialog window that will be opened when clicking on item, and there the user will have the opportunity to customize the item.
The dialog can be seen here(very simple: item photo, name, desc, and customization options):
https://ibb.co/GFkpy8Q
(Sorry for the pixelization)
The problem
I use react hooks in this project, and that why manage the Dialog's state.
Although simple, I stumbled upon few problems with how elements got re-rendered/not re-rendered(when expected):
The "checked" prop of the checkboxes uses Array.some, to see if the unique ID of the checkbox is in the state Array. The checkboxes are not being set to checked when clicking on them. The onChange prop simply pushes the checkbox's value to the state array and sets the state:
const [array, setArray] = React.useState([]);
...
<Checkbox
checked={
array.some(
item => item._id === subOption._id
)
}
onChange={() => setArray(array.push(subOption))}
/>
The onChange action works properly, so why the "checked" prop doesn't work properly?
When a checkbox is checked, I want to add a small quantity field next to it, so the user will be able to choose the quantity of the subOption he shall receive.
So I use the next well-practiced pattern:
{array.some(item => item._id === subOption._id) &&
(
<QuantityField />
)
}
The problem is that the QuantityField is not shown after the checkbox get checked.
If I exit the Dialog and enter it again, I suddenly see the checked checkbox is checked, and the QuantityField is shown next to it 😕
If I change the item's quantity with the general QuantityField you can see at the bottom left of the Dialog image, suddenly all the checked checkboxes gets unchecked 😕
The general QuantityField uses a state of it's own, and is not connected to any of the checkboxes.
From what I could see after I tried to debug the weird behavior, I can say that the render action of the Dialog component isn't working as expected. The states are updated, but doesn't trigger a re-render of the Dialog tree. Actually, it is wrong to say that, as the Dialog tree gets re-rendered, but the "checked" prop is not being re-checked during the re-render; but a complete un-mount and re-mount of the Dialog shakes the tree right.
Hope for an interesting answer. Thank you.
I would change how you are using setArray. See from Array.prototype.push() documentation:
The push() method adds one or more elements to the end of an array and returns the new length of the array.
Also using .push() on the state is not allowed because never should mutate the state directly.
Suggested solution instead:
onChange={() => setArray(prevState => [...prevState, subOption])}

How to update view model and its dependencies when Checkbox selected in Knockout.js?

Currently I have a very large of data model that is presented to the user with multiple options and events.
List item as checkboxes
Update the object's datetime when checked
Add checked item data to table array
Two options to deselect items: remove button on table or uncheck input
Post update to server when item is selected or deselected
I have been unable to create the correct knockoutjs script to make all events possible.
I definitely need help.
Here is an example: http://jsfiddle.net/likwidmack/BxZGr/10/
I have refactored your code here:
http://jsfiddle.net/SKnMg/3/

Categories

Resources