Thursday, February 5, 2015

xBox with Dropdown Grid

Updates 2/10/2015

Added optional sort of tooltip guide containing the internal caption via _withGuide property (default is .T. or shown).  I realized that with the class relying on internal caption, it is sometimes hard to know where you are once the focus is on it (I feel sorry for my users) until they become so familiarize with the module.

I was adjusting our Request module when that realization hit me.  So if you want it shown, set it to .T..  However, please be aware that once you allow the guide to be shown, then the dropdown grid will adjust downwards to give room for it, otherwise it won't be seen.

Updates 2/9/2015

1. Fixed bug I introduced last Saturday on keypress with the class ignoring non-alphabetic characters

2. Fixed problem on dropdown grid not clickable when parent form is modal.

3. Added HalfHeightCaption property to add options on how the dropdown grid will look like.

4. Introduced dropdown grid DynamicHeight. The height will change based on _tally result when it is between 1 to 10. Beyond 10, it will follow the height you have set.

5. _NoHeader property is added. Turn this into .T. if you don't want the headers to be shown. So now you have several choices on the appearance of the dropdown grid:

  • With titlebar or none
  • With HalfHeight Titlebar (Will effect only when titlebar is shown)
  • With or without headers

6. Smarter Selection

I realized that when quickfill cannot find a match, then pressing the enter key will leave the class with the value of the few keystrokes we did. And so I introduced a smart selection as follows:

a. When quickfill and dropdown is both in action, pressing enter when quickfill match is present, the class will prioritize the quickfill suggestion even though it is not the first on the list of dropdown

b. The moment the quickfill is not in place (no left to right match), then when you press enter, the class will auto-pickup the first recod on the dropdown list

Updates 2/7/2015

1.  Down arrow now works good.  Once you press down arrow, it now goes to the grid where you can use arrows to navigate through records.  If you want to finalize selection, press enter, double-click or click outside of the popup grid.

2.  Works on Modal form now (I was informed earlier by Bryan Gerlach inside the forum that it is not clickable on modal forms)

- Redownload demo form

Updates 2/6/2015

Fixed some problems mentioned by MK and Alejandro inside Foxite forum, plus those reported to me by my users. Added also 5 more features:

1. _nCaptionAlign - where we can change alignment of the inner caption. This works useful when if you want to retain the caption even when the class has a value via _retainCaption = .T..  When you position it on right alignment (1), then when the class looses focus, if the class has a value it will position itself on the right.  If the class remains empty of value, then it will position itself on the left.

2. Shown titlebar of popup form and added Near Matches result as its caption (taking ideas from Ali Koumaiha's popup grid)

3.  Added lNoTitleBar parameter in _SetGrid().  That is if others are not comfortable with a form looking popup with titlebar and border, all you need to do is pass .T. onto that and the titlebar will be hidden again (#2 above)

4.  Added _Clear method.  That is to make clearing both the value and extravalue in one go.  Plus that also takes care of resetting SelStart and SelLength of the class. So instead of doing these:

This.xbox1.Value = ''
this.xbox1.ExtraValue = 0

All you need to do now to allow it for new entry is:


5.  I realized just now with the recent exchanges with MK inside the form that I never mentioned that Double-Clicking the class will clear it up for a fresh entry.  I now also have updated tooltiptext to include that information.  And as for ToolTipText of the class, you can type your own ToolTipText and now those two mandatory information about the double-click and right-click context will automatically be added onto your own ToolTipText.

Image of number 1 and 2 above:

Updates 2/5/2015

* Minor Update

·      Added _RetainCaption property (Default is .F.).  When you set this to .T., even when the class has a value, the caption will remain
·         Changed the icon for marker 3 (search icon) to something more appealing to me

* Major Update

Added Popup Grid
This one is a bit tricky and honestly has taken a lot of my time.  Anyway, I won't bore you anymore with details and just run you down on the necessities.

How to Set the Popup Grid for PopUp feature

On INIT event of the class, you have to set the grid appearance.  But first you have to issue DODEFAULT() as that will run all the necessary codes I put in the init event of the class.  Next is to call _SetGrid Method

this._setgrid('Customer Name-260|Address-200|City-100',2,585,250,2,'Calibri',11)

_SetGrid Method Parameters

Lparameters cColumnList, nScrollBar, nWidth, nHeight, nGridLines, cFontName, nFontSize


·         cColumnList - Controls the captions of the headers of each column.  As you can see on the sample code above, it has two delimiters, i.e., dash and pipe sign.
o   Pipe Sign ( | ) - is used by the class to break between the captions
o   Dash Sign ( - ) - is used by the class to determine the width of the column
·         nScrollBar - is a numeric representative of the ScrollBars property of Grid (Default is 3 or both scrollbars are shown)
·         nWidth - is the width of the popup grid (default is the same wide as the class instance on form)
·         nHeight - is the Height of the popup grid (default height is 100)
·         nGridLines - controls the horizontal and vertical lines the way it is controlled natively on Grid (default is 3)
·         cFontName - is the font to be used on grid (default is Arial)
·         nFontSize - is the size of font on grid (default is 9)

How to Perform a Popup Grid filtering

Use the InteractiveChange event of the class so the search/filtering is made as you type

*InteractiveChange Event
Local lcSQL
Select distinct to_name, to_address, to_city, cust_id From orders;
      where [MySearch]  $ to_name;
      ORDER By 1;
      GROUP BY 1,2,3,4;
      into Cursor junk NOFILTER

You can perform any SQL SELECT you want but this is mandatory:  WHERE [MySearch] $  OR WHERE 'MySearch' $ OR WHERE "MySearch" $.  Or you can use instead the SQL LIKE instead.  What you have to keep in mind is that [MySearch] holds the values of your keystrokes which is the basis of the class.

MySearch is not case sensitive but the class needs to see the exact mysearch word.

- Single click on popup grid will seed the class with .Value and .ExtraValue
- Double-click will seed and close popup grid
- You can use the class marker to show/hide popup grid as long as the current value of class is not empty.

For other features and usage of the class, refer to my first post here:

Special thanks to:

Tom Knauf for advising me to work on popup grid and sharing ideas as well.

Ony Too - for sharing us the DatePicker class which is a great help on my learning further about popup forms and control classes.

MK Sharma - for testing the class and informing me of bugs.


  1. So much work for a single control.
    I can't imagine the amount of work involved in programing VFP.
    So, the next time when I discover a bug in VFP and I'm tempted to curse.... :-)

    1. Yes. The longer I work on classes, the more I appreciate the work that has gone on for VFP to be that powerful and flexible.

  2. Hi sir Jun how can search from left to right only? Ex. As i type Orange only those records with Or from left will be visible in grid? Pls email me thanks.
    Here is my email: