View RSS Feed

Development Team Blog

Displaying Country Flags in a cDBCJGrid

Rate this Entry
In september 2011 I published a blog about using other graphics in a cCJGrid class object. Today at the bi-monthly held drive-in support events in Germany hosted by Data Access Europe I was asked about how to do this with a database aware CodeJock based grid. With this short blog I will tell you how you can do this.

For this blog I will be using a customer table that we also use for the Discovering Visual Report Writer book that is available from Data Access Europe. This customer table contains references to a country table. The reference is by country ISO code. The data set for the book also contains a large number of small GIF pictures with the country flags of many countries of the world. In the Visual Report Writer report that makes use of this workspace we print the name of the customer and the flag. The goal in this blog is to do a similar thing in a database aware grid.

The View and the Grid
Create a new data entry view and create a DDO object for the customer table. Then create a cDBCJGrid object on the view by dragging from the class palette in the Visual DataFlex Studio. From the DDO Explorer drag one of more columns to the cDBCJGrid object (like the name of the customer) and an empty cDBCJGridColumn object. The object code now looks like:
Use Windows.pkgUse DFClient.pkg
Use cCustomerDataDictionary.dd
Use cDbCJGrid.pkg
Use cDbCJGridColumn.pkg

Deferred_View Activate_oGridExample for ;
Object oGridExample is a dbView
    Object oCustomer_DD is a cCustomerDataDictionary

    Set Main_DD to oCustomer_DD
    Set Server to oCustomer_DD

    Set Border_Style to Border_Thick
    Set Size to 200 300
    Set Location to 2 2

    Object oDbCJGrid1 is a cDbCJGrid
        Set Size to 186 288
        Set Location to 7 5

        Object oDbCJGridColumn is a cDbCJGridColumn
            Set piWidth to 100
            Set psCaption to "Flag"
            Set pbEditable to False

        Object oCustomer_CustomerName is a cDbCJGridColumn
            Entry_Item Customer.CustomerName
            Set piWidth to 450
            Set psCaption to "CustomerName"
OnSetCalculatedValue and OnSetDisplayMetrics
Rename the oDbCJGridColumn object to oFlagColumn and make use of the OnSetCalculatedValue event to load the image for a country code. This event is called for each row that is loaded in the grid. In the event we construct the name of the file from the country ISO code and the GIF file extension. Then we ask the AddImage object to load the image.
Procedure OnSetCalculatedValue String ByRef sValue
    String sFlag
    Integer iImage
    Move (Customer.CountryId - '.gif') to sFlag
    Get AddImage sFlag 0 to iImage
    Move iImage to sValue
The result of above code will be that the image is loaded and the number is displayed in the column. Of course we don't want the image number but the image itself. To replace the image number by the real image we use (like in the september blog) the OnSetDisplayMetrics routine.
Procedure OnSetDisplayMetrics Handle hoGridItemMetrics Integer iRow String  ByRef sValue
    Forward Send OnSetDisplayMetrics hoGridItemMetrics iRow (&sValue)
    Set ComItemIcon of hoGridItemMetrics to sValue
    Move '' to sValue
The last line of code in the above routine is to avoid that both the image and the number are shown.

If you really create the view and load run the program you will see that the returned image numbers are quite quickly building up as the code does not check if the image was already loaded or not. To avoid that extend the OnSetDisplayMetrics routine with searching in an array to see if the image is loaded or not. If the image is loaded use the previous image number instead of loading again.
Property String[] psImages

Procedure OnSetCalculatedValue String ByRef sValue
    String sFlag
    String[] sImages
    Integer iImage
    Move (Customer.CountryId - '.gif') to sFlag
    Get psImages to sImages
    Move (SearchArray (sFlag, sImages)) to iImage
    If (iImage = -1) Begin
        Get AddImage sFlag 0 to iImage
        Move sFlag to sImages[iImage]
        Set psImages to sImages
    Move iImage to sValue
End Result
The end result of this blog will be a view like shown below.
Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	2012-04-24_225156.jpg 
Views:	1674 
Size:	66.4 KB 
ID:	5041  

Updated 1-Dec-2013 at 12:42 PM by Vincent Oorsprong (Images enlarged)