UserCombobox with suggestions like Google

The issue is the popups, being popups, handle pointer down events above all other elements (in the capture phase of the browser) to automatically close when the user clicks outside of the popup. When you click on the column menu (another popup) the pointer lands outside of the original popup and it closes before the pointerup event, hence the click is not fired.

Remember that all the popups, layers, windows (active/inactive), modal,  drag & drop, resize, moving, etc. don’t exist in the browser. It’s all a bunch of <div> and it gets quite complicated to build a control system as complete as Wisej has. Having said that… 🙂

Add this to your UserComboBox and it will not auto hide anymore when clicking on the menu.

InitScript = “this.getPopup().setAutoHide(false)”;

Luca,

Tell me if I’m getting too annoying !   🙂
Is there a reason the column visibility does not work for the DataGridView in the DropDown?

A

It appears to be a bug somewhere. You can fix the code I sent by adding

current.X = 0;

before

current.Y += delta;

in MoveSelection().

Dear Luca,

FYI, I replaced my approach with yours, as it is simpler (I don’t have to register events also for the datagridview but only for the UserComboBox) and it also taught me a lot!
I create the datagridview outside the inherited UserComboBox and pass it to it. So it is now a standalone component in my “library” that can be reused in other projects. The only thing that wasn’t working, was that when pressing the keys Up and Down, as soon as the position was outside the dropdown height, there was no scrolling going on, so the selected row was not visible. I banged my head on the screen for a few hours comparing your code to mine, and what I finally found was that this behaviour is due to my  RowHeadersVisible = false. With this setting, automatic scrolling does not work. You can reproduce it if you change your grid definition in your eaxample project as follows:
var dataGrid = new DataGridView() {
Focusable = false,
RowHeadersVisible = false
};

I don’t know if this is the intented behaviour or I found a minor bug.
Thanks again,
Alex

Thanks, Luca!
Have a nice evening.

A

See my sample, has row navigation too.

Accessing the database on every keystroke can be heavy. You can add a timer, say 500ms, wait for the user to stop typing and then filter. You can use either a Wisej.Web.Timer (client timer, causes the browser to fire an event) or a System.Threading.Timer (server side timer).

For the server side timer, see modified sample attached, processes FilterRows() only after 500ms that the user stopped typing:

// Wisej provides a System.Threading.Timer already bound to the context like this:
this.timer = Application.StartTimer(Timeout.Infinite, Timeout.Infinite, this.FilterRows);

// Then on every keystroke, restart the timer.
this.timer.Change(1000, Timeout.Infinite);

Thank you, Luca.
I think I did it. Setting the Focusable = false does indeed leave the focus to the textbox, but then you cannot use the arrows on the grid and press enter to select the current row.  What I did, was to handle the KeyPress event on the grid and transfer what is typed to the textbox. Using the KeyPress instead of KeyUp/Down was necessary, or I couldn’t get the typed character. The KeyPressEventArgs give access to the character, which was the easiest way to get hold of the greek character pressed, the KeyUp/down give the key code of the actual key pressed (the latin character). I works very nicely (till I find a new problem!).

I havn’t tried the AutoCompletMode, I’ll have a look.

Not hiding the rows but accessing the database on every key stroke wouldn’t be heavy?

I’ll check your sample. Thanks again.

Alex

With the UserComboBox you can handle anything. What you see is the expected behavior because the drop down control is focusable so Wisej automatically sets the focus on the drop down, which is the expected default functionality: when the drop down is shown the focus and keyboard goes there.

You can disable it simply by setting Focusable = false to your control in the drop down.

You can also enable the automatic drop down when the user types by setting AutoCompleteMode = Suggest.

Then you can handle the keyboard navigation either on the client side or the server side in the KeyDown or KeyUp events. See attached sample and video. It should be a good starting point. If you use a data source you don’t have have to hide the rows, simply you the DataView filter with SQL syntax.

https://drive.google.com/file/d/1jKYhBPtYwhDWKZMGrPCmD4EphDvsa6K6/view