Displaying Country Flags in a cDBCJGrid
by
, 24-Apr-2012 at 03:56 PM (27302 Views)
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.
Base
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:
OnSetCalculatedValue and OnSetDisplayMetricsCode: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 End_Object 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 End_Object Object oCustomer_CustomerName is a cDbCJGridColumn Entry_Item Customer.CustomerName Set piWidth to 450 Set psCaption to "CustomerName" End_Object End_Object Cd_End_Object
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.
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.Code: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 End_Procedure
The last line of code in the above routine is to avoid that both the image and the number are shown.Code:Procedure OnSetDisplayMetrics Handle hoGridItemMetrics Integer iRow String ByRef sValue Forward Send OnSetDisplayMetrics hoGridItemMetrics iRow (&sValue) Set ComItemIcon of hoGridItemMetrics to sValue Move '' to sValue End_Procedure
Optimalization
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.
End ResultCode: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 End Move iImage to sValue End_Procedure
The end result of this blog will be a view like shown below.