Spinner on clicking an item in DetailsList - office-ui-fabric

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.

Related

Vue - How to display the clicked item and the previous/next item of an array

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.

Clearing semantic ui multiselect dropdown when values are selected dynamically?

I am trying to load multiselect dropdown value based on click button action dynamically. When one click is performed value is selected and appended in the dropdown. But when I clicked next time, the dynamic values are appended to the previous value. So I decided to clear multiselect dropdown on each click.
But when values are selected dynamically, To clear dropdown
$('.ui.fluid.dropdown').dropdown('restore defaults');
$('.ui.fluid.dropdown').dropdown('clear');
Both also not working. Because of dynamic appending of data.
So my question is how to clear semantic mutiselect dropdown dynamically.
I tried to use the following code to clear the dropdown and it works fine.
var class_name = $('.ui.fluid.dropdown');
$(class_name).dropdown('clear');
$(class_name).dropdown('destroy');
$(class_name).dropdown('restore defaults');

Loading items in Combobox

I am working on a project and the problem that I have is; the items of my combobox are being loaded from the database table(one field); the table has more than 1000 records:
how can I load these records(one field) as items by giving a limit of 50 while allowing the user who wants to see all of the records through the combobox to see them but still by a group of 50?
which event can be the best for loading items to the combobox? textchanged, click....
I was thinking to use the vertical scroll bar so that when the user is at the end of the displayed items the next 50 will be loaded and if he is on the first and scrolls up the previous 50 will be loaded:problems with this way of thinking are:
when the user typed some caracter from the word that he wanna select
from the items' list if it is not loaded yet from the DB he will be
obliged to type the whole word
I don't know which event is raised
when scroll bar of reaches the end or is at the beginning
Is there any other way to do that?

Extjs4:Multiselect Option

In my form,i have a list of employees in a combo box and i need to map some employees to particular department.I need to change the combo-box to List box.Scenario is as follows,
1. List A contains all employees.
2. If i click 'Add' button the selected employees must move to list B
and list A must contain remaining employees
.
I searched for List box but i couldn't find in extjs4.
Is there any example or link for multiselect listbox in ext-js4?
Thanks
There is no built-in ListBox widget in ExtJs4. However, Ext.view.View may become an listbox after some manipulations.
Here is an example of such a tuned View. Demos may be found here, here and here (this one looks like just what you need).
You can create two such listboxes and the "add" button. Then assign handler to button which would remove selected item from the first listbox's store and add it to the second's store.

In ExtJS dataview single select mode how can I clear item selection

I want to clear dataview item when it lost focus, mean when user click somewhere else x-item-selected class is removed from current selected item.
you can use
dataview.getSelectionModel().deselectAll();
to remove the selection