I want to render a DetailsList with all items in that list preselected. I pass a Selection prop to the DetailsList, but calling setAllSelected() on the Selection from the component's constructor won't render all items as selected.
Though, calling setAllSelected() from an event handler would select all items as expected.
I have tried to call setAllSelected() from componentDidMount(), but without success.
I suppose items must be internally created (wrt the DetailsList component) before the Selection can select them, but I have no idea how to force this.
I have added a CodePen.
You need to set the items on the selection first like so:
this._selection.setItems(this.state.items, false)
I adjusted your codepen here to demo this. Hope this helps.
Related
I have some awkward data that needs a list of checkboxes to toggle whether corresponding elements are shown or not. I can't figure out a v-model or computed property that accomplishes that.
If there is no other option, you can add values to the data. Like a isShown boolean, but otherwise the data should remain unchanged.
You're my only hope.
Here is my solution
I used v-model assigned to a new val property on each item of the elementGroups array and combined with #change events to toggle groups of checkboxes together. Displaying the related boxes was done with v-if and a method that returned the true/false value of the checkbox with matching id.
When a component data value ( which is array with objects ) changes the computed property is not affected.
In the example below, I have a table that is filled with some data ( it is tasks in different statuses with titles ). If you click on a task and you click the button 'CHANGE TASK INFO' it will change the current task selected to
{
Status = QA Review
Title = TEST
}
However if you comment the 99,100 lines and uncomment the 96 line the things are not the same anymore if you try to click the button with a different task selected the task is updated in the 'tasks' variable of the component but never rerendered by the computed prop.
Any ideas ?
SB
https://codesandbox.io/s/vue-table-test-enviroment-bx1sd?file=/src/components/HelloWorld.vue
Vue is not able to detect changes if you replace an array item by index (see Reactivity in Depth).
The solution is simple:
this.$set(this.tasks, indexOfUpdatedTask, test);
I have two elements in two rows next to each other:
I have entered them all in an array of objects and called them through props to display them in the left one.
Now what I want to do is when I click on any channel from the left item, it shows in the right with the first item before it and after it in the array, so I am going to use $emit with #clicked function to get an event to call it on the app.vue. But I don't know what to do after to get it displayed.
I feel I should create a new component but I'm at a loss about the elements within.
Edit: Sorry I forgot to mention, the picture is the design not the result of my code, I could only create the left one "list of stations" and have a problem doing the right part based on a click of the left part
You can indeed create 2 components. 1 component having a list of all the stations. another component displaying the details of the radio station.
The moment you click a station in the list, it sends an event and updates a property in the vue.app. This could for example be called selectedStation.
your component that shows the detail of the radiostation just receives a prop with the details of the station.
How do I show a spinner in a DetailsList? For instance, let's say I have the following items in a DetailsList:
list of items
On clicking the item with the name 'AdipiscingUt.onetoc', show a spinner on the rightmost side of that item (next to 125 KB). Please let me know if you have any suggestions on the same.
Thanks!
You can use selection attribute in <DetailsList> component to catch the selection events. Then create extra column with hidden spinner and display it via selection event.
At least I had the experience when I needed to display the icon status according to each item. I added unique id per each item (using onRender method for columns attribute in <DetailsList>) and use it for identification.
how can I change single itemtpl at itemtap event in Sencha Touch 2?
I would like to change HTML record's code when I click on item.
If I try to do this with setItemTpl() method on dataview it changes all list's records.
Thanks
On "itemtap" event, you can find the target from params. And then get the target element
var target = Ext.get(target);
then apply, setHtml() function there and do what you want.