Using controls to edit cells in a listview

[LarsJ]

In the forums you can find several questions about how to edit the text in a ListView cell with a standard control eg. an Edit control or a ComboBox. The zip below contains three examples with an Edit control, a ComboBox and a DateTimePicker.

How?
A description from MicroSoft of how to edit a ListView cell with a ComboBox can be found here. When you click a cell the position and size is calculated, and the ComboBox is created on top of the cell. The text is shown in the Edit box. You can edit the text or select a value in the Listbox. Press Enter to save the text in the ListView cell and close the ComboBox. The ComboBox exists only while the text is edited.

Code issues
Especially because the control to edit the ListView cell is created on top of the ListView and is not part of the ListView, there are some issues you should be aware of. To get everything to look as good as possible most actions should be carried out when a mouse button is pressed and not when it's released. You should also be aware that the new code you add, does not conflict with existing functionality for example multiple selections. The examples consists of small but fairly many pieces of code to respond to events and messages.

Keyboard support
To edit a text value you are more or less forced to use the keyboard to type in the text. It would be nice if you could also select the current cell in the ListView with the keyboard.

Cell selection with the keyboard is not too hard to implement with custom draw code. The current cell is drawn with a specific background color. It looks like this. You can select the current cell with the arrow keys.

Open the control
There must be a way to initiate the creation of the control. This is typically done with a single or double click in the ListView. Or with Enter or Space key in the examples with keyboard support. Default in the examples is double click and Enter key. You can change this in global variables in top of the scripts.

A WM_NOTIFY message handler created with GUIRegisterMsg is used to watch for single and double click in the ListView. This message handler is also used to handle custom draw messages for keyboard support.

Because the control is created on top of the ListView cell, it's very important that the ListView is set as the parent window. This ensures that mouse clicks and key presses are captured by the control and not by the ListView.

Events in the control
In a ComboBox and a DateTimePicker an additional control (Listbox and MonthCal, respectively) is opened if you click the Dropdown arrow (or press <Alt+Down arrow> on the keyboard). Click the Dropdown arrow again to close the control (or press <Alt+Up arrow> on the keyboard).

The interesting messages (DROPDOWN, SELECTION, CLOSEUP) from such an additional control are usually contained in WM_COMMAND or WM_NOTIFY messages which are sent to the parent window. The parent window is the ListView. To catch the messages the ListView must be subclassed.

Messages from the Edit control, the Edit box of the ComboBox, or the client area of the DateTimePicker are catched by subclassing the controls (Edit control, Edit box and DateTimePicker) directly. The interesting information here is dialog codes to accept (Enter) or cancel (Esc) the value and close the control. Dialog codes are sent as $WM_GETDLGCODE messages.

In all examples the value in the control can also be accepted and saved with a double click.

Close the control
A mouse click in the ListView outside the control should close the control and cancel editing of the current cell. Because the control is not part of the ListView in particular mouse clicks on the Scrollbars should close the control immediately. The control will not be repainted properly on scrolling.

Mouse clicks in the ListView and on Scrollbars can be identified by WM_LBUTTONDOWN and WM_NCLBUTTONDOWN messages. The area which is filled by Scrollbars in a ListView is non-client area. Mouse clicks in non-client area generates WM_NCLBUTTONDOWN messages. To catch the messages you have to subclass the ListView.

A mouse click in the GUI outside the ListView and in non-client GUI area (eg. the Titlebar) should also close the control. Mouse clicks in GUI are catched through GUI_EVENT_PRIMARYDOWN messages. Mouse clicks in non-client GUI area are catched through WM_NCLBUTTONDOWN messages by subclassing the GUI.

Finish the code
A great part of the code is running in message handlers created with GUIRegisterMsg or created by subclassing a window. Lengthy code to open or close the control should not be executed in these message handlers. Instead of a message is sent to the AutoIt main loop where the control is opened or closed.

Some of the message handlers are only needed while the control is open. They are created and deleted as part of the control open and close code.

In the context of the updates May 26 the $LVS_EX_HEADERDRAGDROP extended style (rearranging columns by dragging Header items with the mouse) is added to all ListViews. See post 20 and 21.

A few lines of code are added to better support usage of the keyboard. See image above. The code provides for horizontal scrolling of the ListView to make sure that a subitem (or column) is fully visible when it's selected with left or right arrow. Among other things, the code takes into account rearranging and resizing of columns as well as resizing of the GUI and ListView. A new example EditControlKeyboardTenCols.au3 demonstrates the features. See post 22.

A few lines of code is added to handle multiple selections. Multiple selections is enabled in all examples.

Pressing the Tab key in the control closes the control.

The image shows a DateTimePicker control.

Zip file
The zip contains three examples with an Edit control, a ComboBox and a DateTimePicker. For each control there are two scripts with and without keyboard support. In the script with keyboard support you can select the current cell in the ListView with the arrow keys and open the control with the Enter (default) or the Space key.

You need AutoIt 3.3.10 or later. Tested on Windows 7 32/64 bit and Windows XP 32 bit.

Comments are welcome. Let me know if there are any issues.

(Set tab width = 2 in SciTE to line up comments by column.)

ListViewEditingCells.7zFetching info...

Edited November 21, 2019 by LarsJ
New links, old images

[Trong]

Words to say now: Great.

[mLipok]

Awesome.

[czardas]

Fantastic job. This work will greatly improve the functionality of ListView controls. I will definitely be playing around with this in the future.

[mLipok]

@LarsJ Are you planning to add this to your UDF which you relase recently.

[mLipok]

I just realize that you are doing what I asked here:

 

I hope you also work on Header improvement, as I asked for.
Is it also in your current scope/field of work ?

[LarsJ]

Thank you for all the feedback. Always nice with some feedback.

mLipok, The plan is to code a UDF. Otherwise it will be too difficult and time consuming to use the controls. It'll probably become an independent UDF. If you need both colors and controls you have to include both UDFs.

Before I can code a UDF I need to know which functionality it should support and which controls should be included. The possibilities regarding controls are almost endless. You can even create your own custom control similar to the MonthCal control (create a small GUI without title bar and borders and add some controls (which could include a ListView)). I also need to know if there are any issues with the existing code. So far I have just made a few notes.

The post that you have quoted, was one of the posts I had in mind when I created the examples. This post was another. I'll add the functionality to a header control. It should be very easy.

[czardas]

Some suggestions: Include the option to populate the combo with unique items existing within the column - adding new items as you go. Or make it highly customizable so that such examples are easy to create - along with autocomplete.

I would be cautious with headers, because a single click is often used to interact with a column eg. for sorting. I think it best if this functionality isn't affected (although I imagine it probably won't be - it's still worth mentioning).

Edited May 16, 2016 by czardas

[mLipok]

  On 5/16/2016 at 8:51 AM, LarsJ said:

Thank you for all the feedback. Always nice with some feedback.

Expand  

I agree this is nice to get any feedback.

  On 5/16/2016 at 8:51 AM, LarsJ said:

mLipok, The plan is to code a UDF. Otherwise it will be too difficult and time consuming to use the controls. It'll probably become an independent UDF. If you need both colors and controls you have to include both UDFs.

Expand  

Good to know.
How you want to solve the problem with registering the same message for example WM_NOTIFY  in two different UDF ?
I propose this:

 

 

  On 5/16/2016 at 8:51 AM, LarsJ said:

Before I can code a UDF I need to know which functionality it should support and which controls should be included. The possibilities regarding controls are almost endless. You can even create your own custom control similar to the MonthCal control (create a small GUI without title bar and borders and add some controls (which could include a ListView)). I also need to know if there are any issues with the existing code. So far I have just made a few notes.

Expand  

At first glance I would like to see this feature: TreeView and RadioButton, Checkboxes.
I wonder as only over whether they are really needed, I am looking for some specific needs of use.
Basically what we already showed, it is sufficient, until someone needs justify further functionality.

 

---

I think one will surely be needed: ListView Inside ListView.

#include <array.au3>

Local $aOuter[5][2]
Local $aInner[2][2] = [[1,2],[3,4]]


For $iOuter_idx = 0 To UBound($aOuter) -1
    $aOuter[$iOuter_idx][0] = Chr(65+ $iOuter_idx)
    $aOuter[$iOuter_idx][1] = $aInner
Next

_ArrayDisplay($aOuter,'$aOuter')
_ArrayDisplay($aInner,'$aInner')

 

[czardas]

  On 5/16/2016 at 12:23 PM, mLipok said:

I think one will surely be needed: ListView Inside ListView.

Expand  

I'm not entirely convinced about this. A ListView is what it says it is - i.e. a control which displays lists for the end-user to interact with. If you want to have a table of lists then you have introduced a third dimension, and there are much better ways display 3D data such as line breaks within cells, or even zooming into the cube. A table of tables is less user friendly and more akin to the internal gubbins of a complex engine. How many nested ListView controls do you envisage embedding and how large is your computer screen? You can have the same functionality by simply linking cells to other tables for the user to open in a separate window or new tab.

Edited May 17, 2016 by czardas

[mLipok]

  On 5/17/2016 at 6:27 AM, czardas said:

You can have the same functionality by simply linking cells to other tables for the user to open in a separate window or new tab.

Expand  

Good concept.
I must check it.

[LarsJ]

In a UDF I think I would use the four functions SetWindowSubclass, GetWindowSubclass, RemoveWindowSubclass and DefSubclassProc (coded in WinAPIShellEx.au3) for message handling. Then it's easy for a user to add his own WM_NOTIFY message handler.

I also think I would use a function parameter to specify how the control should be opened. Then it should be possible to avoid conflicts with existing functionality.

The purpose of the examples is to edit a cell in a ListView. Coupled with this, I think the idea of ListView inside ListView is a little on the margins. Perhaps it may be the subject of a second example. My own idea with the ListView was to be able to select a value for 2 or 3 neighboring cells at once.

A ComboBox in a Header control could be very useful for filter functionality and similar. So far I have thought to use two different UDFs for the Header and the ListView.

I have added all the suggestions to my notes. Thank you.

[LarsJ]

If there is someone who wants to take up the challenge to make these examples into a real UDF, then you are more than welcome. Create your own example with the UDF version. You'll probably get a lot of likes. I'll not interfere at all. On the other hand I'll not guarantee that I'll not make my own version. Let me know if someone will take up the challenge. You can PM me if you want.

[Melba23]

LarsJ,

I do not wish to put off anyone from taking up the challenge, but there is an existing UDF for editing ListViews using edits, combos and DTPS (along with many other functionalities).

M23

[LarsJ]

Yes, I have seen. However, there is also interest in these examples. There was demand for the functionality that I have referred to in bottom of post 7. And you need a little bit of competition to keep you sharp.

Regards Lars.

[Melba23]

LarsJ,

  Quote

 And you need a little bit of competition to keep you sharp

Expand  

Always room for healthy competition - bring it on!

M23

[LarsJ]

The main purpose of the examples is to be able to edit cells in a virtual ListView with many rows. The code in first post works very well with a virtual ListView. Here is an example with 100,000 rows and 16 columns. Data stored in an array. It takes a few seconds to fill the array.

You can increase the number of rows to 1,000,000 in top of the code, but it takes longer time to fill the array. When the array is filled the rows are flying over the screen. Even on my old XP. You can edit every single cell with a ComboBox.

It works seamlessly except for a few issues with keyboard support and horizontal scrolling. They are not fully coordinated. This is just test code.

If data was stored in a database the ListView would show up immediately. Because AutoIt already supports SQLite databases and we have UDFs that supports ADO functionality and thus connection to other databases, this is the real interesting perspectives of these examples.

ListViewEditingCells.7z

Edited May 18, 2016 by LarsJ

[mLipok]

  On 5/18/2016 at 4:14 PM, LarsJ said:

If data was stored in a database the ListView would show up immediately. Because AutoIt already supports SQLite databases and we have UDFs that supports ADO functionality and thus connection to other databases, this is the real interesting perspectives of these examples.

Expand  

Very interesting.

In VirtualKeyboard.au3 - awesome, cursor inidcation.
 

 

---

VirtualKeyboard.au3 Feature request: Add feature to preset which column can be edited

 

---

VirtualKeyboard.au3 Feature request:

Please modify this to show in   GuiWin title:

1. if cell is going to be edited (is clicked and edit mode is in progress)
2. if cell was edited and changed
3. if cell was edited and not changed

Having this I will try to show example combined with ADO.au3 - I mean realtime recordset editing.

 

---

VirtualKeyboard.au3 Feature request:

Add button to enable / disable EDIT feature, this would be handy to be able  normally select rows after edit.

 

---

VirtualKeyboard.au3 - When I try to type any text on keyboard, and I'm not in cell editing mode, then listview jumps to first row. Why ?

 

---

Please try to attach files in ZIP, I ask about this because there is nice feature in Windows systems which gives you an easy and friendly way to use ZIP files, with out unziping files, so there is only downloading + click >> SciTE showing you the script.

 

Edited May 18, 2016 by mLipok

[LarsJ]

The code in post 17 is only test code. But hopefully there are no errors in the code in post 1.

My plan to make cell editing work for virtual listviews is to split up the process in a few smaller steps each of which is reasonably affordable:

1. Implement cell editing for a few small examples (more or less completed)
2. Implement the code in the examples in a UDF that works for normal listviews
3. Modify the code in the UDF to also work for virtual listviews

[czardas]

After playing around with EditControlKeyboard.au3, I discovered that dragging the first column to a different location prevents this from working correctly.

_GUICtrlListView_SetExtendedListViewStyle( $idListView, BitOr($LVS_EX_DOUBLEBUFFER, $LVS_EX_FULLROWSELECT, $LVS_EX_HEADERDRAGDROP) )

If you drag the first column back to its original location, it starts working again.

Edit: This only seems to affect column 0. I don't intend to allow my row index column to be dragged anyway, but not everyone uses a hidden row index column, so you might want to try and fix this.

Edited May 25, 2016 by czardas