How can I "take control" of selecting TreeView items? - treeview

If you have a TreeView in a VS Code extension, when you click on the items in it, they get selected (highlighted green, in my color theme). Click away from them and they get un-highlighted. See the below screenshot, in the file explorer view:
I'd like to "take control" of this behavior. I want to disable the highlighting that happens by default when the user clicks on these items, disable the un-highlighting that happens when they click away, and control in my extension code when the items get highlighted. I'd like to do this in my extension's custom TreeView, not an existing one.

Use the 'reveal' method of the treeview item. You can specify if it's to be 'selected' and also 'focused'.
Basically, you can change to the structure you want by forcing a refresh of the whole treeview. You probably already know that if you started making treeview extensions for vscode...
But then, right as it finishes re-rendering the tree, you 'reveal' a node, with the 'select' parameter option, to have that node as the selection in the tree. ...To have another node selected, just 'reveal' another one. (no need to force a full refresh of the treeview if it's only to have another node selected without changing the structure of the tree.)
see the 'reveal' method of the treeview here treeview API
Also see the leointeg extension on vscode for actual code example of controlling which node is selected

Related

Custom drop-down as an item in a kendo tree

I am trying to create an item that is a button "show more" and when you press on it you can show a kind of context menu / drop down that all of the items in that drop down are with checkboxes and there is a search component in it too, so you can search some items in the dropdown by their name. For example: (instead of "c++,c#,Object c" it's should show "show more", i.e. static text)
I tried to use kendoContextMenu. But I don't know if it's could work because the problem with context menu is that when I will click on a checkbox the menu will close. Please advise me of a way to do that or if you have an example of code. Thanks!
The MultiSelect component might be a good starting point
https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect.
My understanding is that MultiSelect does not have a "select more than one at a time in dropdown" feature.
You might consider using a pop up window and within that implement your own custom ui that features everything you want
search term box
scrolling list of selected and selectable items
accept or cancel changes in selection
Regarding your dojo that extends drop down list, I can't code the extension for you. However, changing the dataSource assignment to a setDataSource call will populate the extension component according to the template.
// kendo.ui.DropDownList.fn.dataSource = options.testItemSource;
me.setDataSource(options.testItemSource);

Angular Material md-select load options in async way

I need to load select's options asynchronously (
through a service), using the Angular Material md-select component.
Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem.
The expected behavior is shown at this link (AngularJs Material)
The actual behavior is shown at this link.
Is Async options' loading supported by md-select?
The reason you need to click twice is because when you first click, there are no options in the select control and so it doesn't try and open the panel. Then your async method loads the options into the DOM and on the next click it will open.
In order to deal with this, you must always include at least one <mat-option> in your <mat-select>. You can add a disabled <mat-option> with a <mat-spinner> showing that the data is loading for example.
Here the most simple example of that. This is not the best approach... see below.
However, this still uses the click event which isn't the best approach. If you put the click event on the <mat-select> there are spots where you can click on the control but your click event wont trigger even though the dropdown panel still opens (places like the floating label area). You could put the click event on the <mat-form-field> but then there will be places where you can click and trigger the click event but the dropdown panel wont open (places like the hint/error text area). In both cases you lose keyboard support.
I would suggest using the <mat-select> openChanged event instead of a click event. This has its own quirks too but they are manageable.
Here is an example using the openChanged event. I also made the component more robust overall.
I also made a version that uses the placeholder element to show the spinner instead of using a disabled mat-option. This required View Encapsulation to be turned off.
Note: In my example, the service can return different data depending on the circumstances. To simulate this my fake service keeps track of how many requests you send it and changes the options returned accordingly. So I have to set the option list back to empty and clear the formControl's value every time the list is opened. I save the selected value before clearing the formControl so that if the service returns a list with the same item I can automatically reselect the value. If you only need to load the options once, then you would want to modify the code a bit to only load the options the first time the user opens the select.

Win32 ComboBox: Programmatically select (highlight) string from the list, without update the edit control

My goal is to Programmatically select items from the List of the combo box, but without updating the edit control. The same can be achieved with the mouse. E.g. when you drop down and hover an item from the list, that item is highlited. And that is all. If you want to select in it the combo box (e.g. move it to the edit control) - you must click on the LisBox.
I tried with CB_SELECTSTRING. But it automatically updates the ComboBox edit control with the selected text which is not what I want. I want to do this using raw Win32 or VB6
Thanks
There is a big difference between highlighting an item in the drop-down list and actually selecting an item to make it active. CB_SELECTSTRING selects an item, as its name implies. But there is no official ComboBox API to highlight an item, though.
However, you can display the drop-down list manually (CB_SHOWDROPDOWN), and either:
move the mouse over the desired item so the list can perform hot-tracking logic.
manipulate the list directly. Use CB_GETCOMBOBOXINFO or GetComboBoxInfo() to get the list's HWND, and then send LB_SETCURSEL to it.

Visual Foxpro 9.0

I have a programming problem in Visual FoxPro, create a form that contains PageFrame with 2 Page.
1. On Page 1, Create a program to display data in the grid and give the sorting facilities, navigation and search.
2. On Page 2, create a program to calculate volumeTabung and spacious blanket.
Can anyone provide a solution? thank you
Although this is not DOING the answer, but a simple guide.
In the VFP command window,
Create Form [whatever form name you want]
Once form is up, look at the toolbar for "Form Controls". Click on the "PageFrame" control and then click on the form... There, you have a default pageframe with 2 pages as a default.
The "Properties" window should be visible by default. Click on the combobox on at the top which shows all controls. Open the drop-down and you will see "Page1" and "Page2" of the page frame control. Click on either page, and that will bring focus to that respective page.
Now, click on the Forms Controls toolbar again, such as to grab textbox, label, combobox, whatever and then click on the page and your controls are there. Then get focus to the second page and do the same for whatever you want.
Save and run the form. This just gets you to see the controls and how simple to put them on. Actual pulling your data and populating is really more your "to do" list.

Primefaces selectManyMenu: Showing selected items on top of list

I'm using Primefaces' selectManyMenu to display a list of hundreds of items. I've also included a filter on top. The issue is that when I select, say, the 200th item in the list, I have to manually scroll down to the 200th item each time to see if it has been checked.
I want it so that whenever I select an item, it moves to the top of the menu, so that it is easy to view all the selected items from that list at the top without having to scroll down and up all the time.
Any suggestions?
Looks like your component is getting updated when selecting or unselecting an item, and that's the reason you're reloading the list and losing your scroll position.
Else, it looks like you could use a workround for this. Something like
Catch the select/unselect/change event and trigger a backing Bean function where
You rearrange you list of items sot that the selected ones will be pushed first
oncomplete, you will update your selectManyMenu component.
By the way, maybe it's time to think again if you're using the right component and UX practice. and I have the impression that selectManyMenu is not meant to be used with lists of 200+ items. Personally I think you should avoid using a list that will have to scroll down, for selectMany components. For example you could use another component like a pickList

Resources