Purpose of this Article

This white paper provides an introduction to the ExpressQuantumGrid version 4 product. for brevity, referenced as EQGrid4 in this document, and its previous release as EQGrid3. The EQGrid4 product is totally new technology written from the ground up, providing many significant enhancements over the previous version. The new product, which can co-exist with EQGrid3, is cross-platform and supports the following Borland IDEs: Delphi 5, 6, 7 (note: Delphi 6 needs Update Pack 2) - also note D4 will be supported shortly after initial release. C++ Builder 6 Kylix 2, 3 ( To follow shortly after the initial release). This paper is written primarily for developers and provides an extremely comprehensive review of EQGrid4. Coverage includes the architecture, how you use the product and the facilities available to your customers at runtime. As a result, this is a very large paper because EQGrid4 is probably the biggest VCL component ever built!

Contents
Overview What is ExpressQuantumGrid 4? Topics Overview Feature Check List State of the Art Architecture Object Based Data Modes Views Editor Architecture Controls List of Controls (excludes Editors) List of Editors (includes TcxButton) Editors - Further Details Design-time support Design-time Features Structure Navigator Grid Designer Repository Considerations Import Facility Styles & Themes Styles & Stylesheets Look and Feel Custom Draw Runtime Customization runtime view customization column moving and resizing column grouping column sorting column filtering new item row incremental search design-time features available group and footer summaries preview feature

Miscellaneous Printing Facilities Compatibility/Conversion Demos and Tutorials Summary

Overview
What is ExpressQuantumGrid 4? Topics Overview Feature Checklist

What is ExpressQuantumGrid 4?

Return

In the simplest possible terms, EQGrid4 is a cross platform VCL component (full source provided), plus some helper components, together with a large set of editors. The controls provided, however, are not simple - they are state of the art and will enhance any visual application. EQGrid4 is totally new technology. We took the chance to remove baggage and use the latest facilities provided by Delphi 4 upwards. So, where possible, objects and interfaces are used, as they provide greater extendibility options. EQGrid4 and its editors are totally independent of EQGrid3 and its editors, thus existing customers can make a controlled migration at their own speed (and we do provide a conversion tool). As part of the search for optimum efficiency, the node concept used by EQGrid3 had to go and so EQGrid4 does not provide a TreeList control. ExpressQuantumTreeList is now a separate product library. John Donne wrote that "no man is an island, entire of itself" and I think that the same could be said of a grid! Many of the services it requires are also applicable elsewhere and the opportunity was taken to encapsulate many of its facilities, thereby making them reusable by our other controls (Likely this will be of particular interest to our subscription customers!). The easiest way of illustrating this is to show you the contents page of the EQGrid4 help file:

The ExpressCrossPlatform Library is used by all our cross platform products (e.g. ExpressSpreadSheet) to provide LookAndFeel and Styles facilities. This includes support for XP Themes. The ExpressData Controller provides bound, unbound and provider modes and has been optimized for impressive speed. Only today, I saw a message in our private newsgroups where the beta tester loaded a million records (for fun!) using a custom datasource and was rather surprised when it took less than three seconds! There is much more to the controller than that, however. It also handles all grouping, sorting, filtering and summary production. ExpressWeb Framework already uses the data controller, as will future products from Developer Express. ExpressEditors 4 provides a set of editing controls, which function stand-alone or in-place (i.e. within a grid column) in unbound and data-aware modes.

ExpressQuantumGrid 4 covers all items specifically relating to the grid itself. Note the entries for the EQGrid3/EQGrid4 comparison. Delegating functionality to objects has resulted in properties and methods being relocated and often renamed as well. We have compiled these guides to reduce the learning curve for existing users, and the information provided is quite comprehensive, as the following excerpt shows:

The final item displayed in the help file's contents page is ExpressPageControl and this is a free cross-platform product included in EQGrid4. The page control consists of two controls: TcxTabControl and TcxPageControl:

In the above screenshot, all four visual controls inherit the NativeStyle of the LookAndFeelController, thus enabling XP Themes support.

Topics Overview

Return

Overview State of the Art Architecture

Provides a top level discussion of EQGrid4, especially in relation to EQGrid3. This is followed by this table and a Feature Check List. Object Based covers the new hierarchy of objects for the grid (levels & views). It also discusses the way that stand-alone and in-place editors are derived from base objects. Data Modes describes the DataController and its three methods of data provision: unbound, bound and provider mode. It also covers how the DataController is accessed by Views. Views provides examples of the different types available and compares their facilities.

Controls

List of Controls (excludes Editors). List of Editors (includes TcxButton) . Editors - Further Details provides additional information on the TcxButton and the Mask & Blob editors.

Design-time support

Design-time Features provides a walk through of design capabilities illustrated by a range of screenshots. Structure Navigator covers this important feature in more detail. Grid Designer describes EQGrid4's component editor. Repository Considerations discusses the non-visual controls provided and compares their use.

Styles & Themes

Styles & Stylesheets discusses Styles, StyleSheets and the StyleRepository. Look and Feel covers its NativeStyle & Kind properties and XP Themes. Custom Draw is an advanced topic covering the wide range of custom draw events available.

Runtime runtime view customization covers the Customization form (column Customization hiding). column moving and resizing describes the automatic facilities provided by the TcxGridPopupMenu non-visual component. column Grouping shows grouping facilities (including sorting & filtering). column sorting screenshots. column filtering including custom filtering dialog examples. new item row screenshot. incremental search example (Grid4Features demo). design-time features available list. group and footer summaries shows how they are provided via the TcxGridPopupMenu non-visual component preview feature shows the design-time properties together with an example. Miscellaneous Printing Facilities covers the report link provided for the separate ExpressPrinting System product. Compatibility/Conversion includes: Compatibility Considerations Import (conversion facility) from EQGrid3, DBGrid Export Formats XML, HTML, Excel and Text screenshots Demos and Tutorials covers: Demo Concepts Demo List (alphabetically) Demo List (by project group) Examples EditorsInPlace Demo ConvertGrid3MasterDetail Tutorial RichMemo (feature demo) Summary A quick reminder of some of the important points covered.

Feature Checklist

Return

This section provides a quick list of EQGrid4 functionality. Most of the items listed are covered in this paper in greater detail and appropriate links are provided. EQGrid4 ships with a comprehensive help file, and this provides more depth than can be covered by an introductory paper: brand new object based architecture behavior of the grid is exposed as objects complete control of the visual presentation of data EQGrid4 is structured using Levels and Views unlimited hierarchy of Levels Level objects manage and own View objects a View object manages the presentation of visual data and owns a DataController DataControllers abstract the data access several Views per Level (via a tabbed pages paradigm) 6 types of View (table, banded table & card in bound/unbound modes) comprehensive data access facilities bound, unbound and provider data modes (i.e. internal or external data) grid mode or load all records multi-level master/detail datasets with full read/write functionality automatic refresh of detail SQL datasets state of the art Editor technology 18 editors available each with unbound and data-aware versions the 36 editors operate in stand-alone or in-place (within a grid column/row) stand-alone TcxButton also provided editors are factory-based: the same objects used in stand-alone and in-place editor repository (re-use common editor configurations) extensible object model for creating custom Editors in-place editors can be loaded at runtime on a row by row basis powerful centralized control of data display LookAndFeel component TcxButton component shares LookAndFeel with editors and other DevEx controls built-in XP Themes support Styles support (quickly set the look and feel of any grid element) Style sheets technology (manages the styles of a complete View) Styles repository (centralized control over the appearance of all EQGrid4 controls and Express Editors in your application). Custom Draw implemented via several event handlers giving complete control of a grid's appearance advanced design-time features innovative Structure Navigator (design-time management of Levels & Views) grouping and sorting summaries calculations (via an advanced component editor) customization form, dragging columns from the view moves them to the customization form advanced Runtime view customizations available to your users: design-time features available: automatic grouping by unlimited number of columns automatic sorting by unlimited number of columns customization form (manage the columns actually displayed) switching between levels default views save/restore the view options via the registry band moving and resizing (banded table views) column moving and resizing column width and height customization end-users can sort data by clicking column headers

advanced MS Excel style filtering filter dropdown on columns advanced filter Dialog filter status bars New Item Row (add records in-situ) Incremental search instantly locate data in individual columns summaries calculation: footer, group footer and group row summaries grid Import of settings from EQGrid3, standard DBGrid, or W2W InfoPowerGrid grid Export - extendable facility allows creation of your own customized export formats Exporters included for XLS, XML, TXT and HTML EQGrid3 and EQGrid4 coexist (even the editors) the QuantumTreeList will now be a separate product (use EQGrid4's provider mode for showing/editing custom data) printing support is available via the ExpressPrinting System (a separate product) comprehensive help file EQGrid3/EQGrid4 properties/functions comparison list many task based help examples over 30 Demo/Tutorial pairs provided with the product (tutorials consist of almost completed demos, providing easy practice of our technology) EQGrid4 is probably the most advanced and powerful visual component ever produced

State of the Art Architecture

Object Based Data Modes Views Editor Architecture

Object Based

Return

EQGrid4 can be regarded as a virtual container of behavior, Level and View objects. Note the values of the properties and events when a TcxGrid control is dropped on a form:

Existing EQGrid3 customers are likely to ask where have all the properties and events gone? The clue is provided by the top right image - the grid contains default Level and View objects within the Structure Navigator. Note the highlighted rows in the Object Inspector, as these show the two objects available to this top 'container' level and they are discussed in detail in Styles & Themes below. Before looking at the Level and View objects, it is worth drawing your attention to the RootLevelOptions property. It is possible to display several views at each hierarchical level via a tabbed pages paradigm. Set RootLevelOptions.DetailTabsPosition to dtpTop or dtpLeft to enable multiple view display at the top level. Level objects manage and own Views:

Note the Options.DetailTabsPosition property, as this provides the position of detail views (if any) and this corresponds to the similar RootLevelOptions property already discussed. Incidentally, if the property is left with its default value of dtpNone, only the first child view will display. A candidate for our FAQ list! View objects manage the presentation of visual data. Their properties and methods could have been shown by expanding the GridView property in the above screenshots, but it is less confusing to display them separately:

As you can now see, 'object based' accurately describes this technology! See the next topic for a discussion of the DataController object. The other objects are described in the Views topic, where the six types of view are compared. EQGrid4's object-based architecture does not stop at Views. Depending on the type of view, columns (table views) or rows (card views) are presented and they display data from fields. How the data is displayed depends upon the type of editor linked to the column/row. The editors provided are objects themselves and are used: in-place within a column/row as stand-alone controls (via a thin wrapper) See the Editors topic for descriptions and screenshots of the 36 editors provided.

Data Modes

Return

EQGrid4 uses the Developer Express DataController technology and this provides three data modes:

bound mode provider mode unbound mode In bound mode, the DataController is connected to a TDataSet by means of a TDataSource object: in other words, the traditional method of hooking up a control to data. In provider mode, the DataController is connected to a user-defined (custom) data source and data is requested as needed. This mode can be used, for instance, when you need to display structured data within your grid control. The TcxCustomDataSource class provides an interface which you override to implement a data source for the data controller. Typically, creating a custom data source requires code in two methods (GetRecordCount & GetValue, although you may also need SetValue, InsertRecord & DeleteRecord for writing data). See the UnboundList demo & tutorial and/or the Provider Mode topic in the EQGrid4 help file to learn more. In unbound mode, the DataController is not connected to a data source and is pre-populated with records manually. See the UnboundSimple demo & tutorial and/or the Unbound Mode topic in the EQGrid4 help file for more information. There is one big important difference between the unbound and provider modes: the latter does not store data within the controller and it asks for it as needed. Thus, unbound mode is suitable for array input, while provider mode can handle things like disk file structures. The DataController is available via a View property. There are six views available: table, banded table and card view, each with unbound and data-aware versions. Compare the DataController properties of the unbound and data-aware versions of the table view:

As you can see, the data-aware version provides DataSource and associated properties and this tells us that provider mode requires an unbound view. Some of the data-aware properties are worth a comment here: GridMode - defaults to false, thus loading all records up front. Set this True for increased performance with large datasets. Note: if the user groups, sorts or filters the data, the grid automatically sets GridMode to false. Although the grid is now extremely fast, it should be remembered that operations which require all the data to be loaded should be compared for speed with the data collection phase of reporting components, not grids operating in the equivalent of GridMode. DetailInSQLMode - set this to true if the detail view is driven by a TQuery component or similar when the grid should manage SQL refreshing automatically. You will need to set the DetailKeyFieldNames property also. AutoDataSetFilter - when set to true, the end-user's filter string is stored in the underlying dataset's Filter property. This provides an end-user filtering capability when in GridMode. The events available for data-aware and unbound DataControllers follow a similar pattern to the properties shown above:

Views

Return

Views provide card, table, and banded table representations of data. The following three screenshots provide an example of each:

Bands provide the ability to create sets of columns, which can then be moved and/or resized as a single item. A band may be floating or fixed to the left or the right of the grid. In the above example, the Year band scrolls horizontally, while keeping the Manufacturer and Units Sold columns always visible. Have a look at the properties maintained by these views:

The above properties all relate to unbound views. As a testament to the elegance of the architecture, the only difference between the above and the data-aware equivalents is the use of a TcxDBGridDataController object property instead of TcxGridDataController! In a similar fashion, the unbound and data-aware editors are objects which only differ by the latter providing a data-awareness interface. See the Editors topic for descriptions and screenshots of the 18 pairs of editors provided. Editor Architecture Return

EQGrid4's object-based architecture is particularly suited for the editors we provide. Once you create really professional and advanced editors for displaying/modifying data within a grid, as we have, then there are times when you will want the same impact outside the grid. EQGrid4 supports unbound and provider modes also, so there is another consideration - unbound and data-aware versions are required for each in-place editor. While designing this new editor architecture, we did two significant things: encapsulated data-awareness, so it could be added as an attribute (easy with our DataController technology) removed the display canvas from the base editor objects First, we were able to provide 36 editors from 18 base objects (i.e. unbound & data-aware versions). Second, by providing simple wrappers, the editors can be used inside the grid or stand-alone, thus doubling the logical number of editors to 72 (as would be needed without using objects in such a manner). There is a further advantage - extendibility. One of the demos we provide, RichMemo, shows how to add your own custom editor and, once the component is installed in a design-time package, you can use the RTF memo editor in exactly the same way as the others. What does all this mean in practice? Consider the following screenshots of the properties of the date editor in all four modes:

In-place & Unbound

In-place & Bound

Stand-alone & Unbound

Stand-alone & Bound

The base editor object is provided via the Properties property (the same object in all four cases, even though the in-place editors show an abridged name). The magenta and yellow highlights above represent unbound and bound uses of the DataController. Note how only the unbound stand-alone editor needs a place to store the actual data. This editor architecture provides a big advantage in that the Properties object can be loaded/changed at runtime (even on a row by row basis, depending on data). In the previous version of the grid, there were different column types created and thus we needed to provide a wrapper editor for runtime swapping of assigned editors. You will see that all four editors above contain a RepositoryItem property. See the Repository Considerations topic for details of central management of editor property settings. The content of the Properties object (i.e. the base editor) varies according to the editor's functionality. Compare, for example, the Date and Time editors:

Controls
List of Controls (excludes Editors) List of Editors (includes TcxButton) Editors - Further Details List of Controls Return

EQGrid4 provides components on several palette pages in the IDE: Dev Express TcxGrid TcxGridPopupMenu TcxLookAndFeelController TcxStyleRepository TcxTabControl (via the ExpressPageControl product - see the note below) TcxPageControl (also via the ExpressPageControl product) Express Editors 4 TcxEditStyleController TcxEditRepository 18 unbound editors TcxButton Express DBEditors 4 18 data-aware editors Notes: the ExpressPageControl is shipped with EQGrid4 and is also used internally by its component editors EQGrid4 co-exists with EQGrid3 and the latter's editors appear in the 'Express Editors' and 'Express DBEditors' palette pages. The list below excludes the editors. Component TcxGrid Description The ExpressQuantumGrid 4 control.

(Dev Express page) TcxGridPopupMenu A non-visual component providing context menus. Drop one on the form, hook up its Grid property and then your grid has powerful column header and footer context menu items right out of the box, without any code on your part. See Group and Footer Summaries for details and screenshots.

(Dev Express page)

TcxLookAndFeelController Provides XP Themes support plus centralized LookAndFeel properties. Just drop an instance of this non-visual control on the form to manage the grid and editors. (Dev Express page) See Repository Considerations for more details. A non-visual component containing a set of properties common to all editor types. Assign the StyleController property of all your editors to this component for centralized control. TcxEditStyleController also has a StyleController property, thus allowing an inheritance hierarchy to be established. See Repository Considerations for more details.

TcxEditStyleController

(Express Editors 4 page)

TcxStyleRepository

A non-visual component, which maintains collections of styles and stylesheets. Stylesheets relate to all the styles contained within a View, while a style relates to an individual View element (header, detail row, footer etc.). See Repository Considerations for more details.

(Dev Express page)

TcxEditRepository

A non-visual component containing a central collection of editor defaults. You can set up common default properties and re-use them in editor instances merely by assigning their RepositoryItem properties.

(Express Editors 4 page) See Repository Considerations for more details. TcxTabControl TcxPageControl They are used within property & component editors. These two controls are contained in the ExpressPageControl product shipped with EQGrid4.

(Dev Express page)

List of Editors

Return

The examples below were taken from the EQGrid4 FeaturesDemo available from our website. This demo allows you to experiment with the effect of changing all the editor properties plus much more. If the descriptions below are blank, then the editor provides the standard functionality you would expect plus LookAndFeel and Styles support. Editor Text Edit Description An improved version on the standard TEdit control. All editors are available as unbound and data-aware versions for use stand-alone or in-place within a grid column (table views) or grid row (card views). Example

Mask Edit An improved version on the standard TMaskEdit control. Full support for regular expressions with or without incremental completion is provided. See the Mask Editor topic below for more information. Memo Edit An editor with multi-line support for displaying and editing memo type blob fields. See the Blob Edit if the memo is better 3 displayed within a dropdown window or if the blob field contains graphic data. 2

Date Edit

The TcxDateEdit/TcxDateEdit controls support smart date input. For example, you can type in expressions such as TODAY+1.

Button Edit TcxButtonEdit and TcxDBButtonEdit contain buttons collections. 5 CheckBox See TcxButton for a 'normal' button.

Hook this control up to a standard TImageList to display ComboBox images with or without associated text.

Image

Spin Edit

ComboBox

Calculator Edit

10

HyperLink Edit

11

Time Edit

12 Currency Edit

13

Image

14

The image editor provides a context menu facility. This displays some or all of the standard buttons illustrated on the right. It also supports an optional custom button (Zoom). Note: the component editor uses the cxPageControl product internally (provided free of charge with EQGrid4).

Blob Edit

15

TcxBlobEdit is a button type editor with the ability to display and edit blob data. The contents of blob fields are displayed within a resizable dropdown window. See Memo Edit, if the blob field contains a memo and you would prefer to display in situ. See Blob Editor for further screenshots. Most Recently Used. Automatic addition of text input to the MRU history occurs when the editor loses focus.

MRU Edit

16 Popup Edit TcxPopupEdit andTcxDBPopupEdit are button type editors with a dropdown window, which can display another control. 17

The SysPanelStyle property determines whether the window displays the footer panel (thus providing sizing capability and the close button).

Unbound and data-aware controls providing a dropdown ComboBox lookup list.

Lookup

18

cxButton

19

An enhanced TButton providing three visual modes, plus a DropDownMenu property and LookAndFeel support. See TcxButton for more details and screenshots. See Button Edit for the edit control containing one or more buttons.

Extended Lookup

20

Radio Group

21 ListBox

22 Editors - Further Details Return

TcxButton Mask Editor Blob Editor

TcxButton Return
Although TcxButton obviously is not an editor, it has been placed here because it belongs with the other stand-alone controls provided with EQGrid4. TcxButton is an enhanced TButton control:

The UseSystemPaint property needs an explanation. In XP systems, the standard TButton requires a manifest before it will display using XP Themes. If the LookAndFeel.NativeStyle is set to True, without special action, TcxButton would always display using XP Themes and this might look odd if there were no manifest present, hence the introduction of the UseSystemPaint property. If set to True, it paints using XP Themes only if a manifest is present. Of particular interest is the Kind property and this also provides cxbkDropDown and cxbkDropDown options. In order to show you the effects available at runtime, a form was populated as shown:

The following changes were made cxButton2.Kind set to cxbkDropDown cxButton3.Kind set to cxbkDropDownButton PopupMenu1 was populated via the File menu template the DropDownMenu property was set to PopupMenu1 for all three cxButton's all four buttons were linked to a simple OnClick event handler The following screenshots show the effect of clicking where indicated:

As you can see, you need to use OnClick for cxButton1, DropDownMenu for cxButton2 and both for cxButton3. All the above screenshots were taken with LookAndFeel.NativeStyle=True. Setting it to False allows the LookAndFeel.Kind property to come into play:

If you are not familiar with XP, you may be rather surprised by the right screenshot above. It is produced as a result of including an XP Themes manifest within the project. If that is removed, the result is very different:

Mask Editor

Return

One of the most frequent requests to our support department has been for a more powerful replacement for the standard TMaskEdit component. The pattern matching capabilities of the standard component are surprisingly poor, especially since Paradox for DOS supplied much better facilities ten years ago. Well, we listened and have implemented full regular expression support and have even extended it to include automatic expression completion! Of course, the Borland proprietary support is provided too, via our custom property editor:

But note how the dialog changes when we select 'Regular expression' or 'Extended regular expression' as the Mask kind:

Not only do we have a far more powerful mask but there are more of them too! Regular Expressions have always been a powerful tool in the arsenal of every Unix system administrator, Perl programmer, Java Developer, and those who build browser based JavaScript software. They are amazingly potent and deeply expressive ways to describe complex patterns in texts. With our mask editor, you can now define the precise text which you allow a user to enter within a given field. The 'Extended regular expression' mask kind provides automatic expression completion. This needs a bit of explanation though. When an expression is being evaluated against the mask, there are occasions where the next character(s) can only take particular value(s) - there is no choice. Automatic completion will provide characters until there is a choice again. For example, if the mask only allows the values 'bigger' and 'biggest', typing 'b' will result in 'bigge' and typing 's' will complete the word. The EQGrid4 help file provides a comprehensive guide to the full regular expression syntax and provides some useful explained examples, as the following extract illustrates:

Blob Editor

Return

The TcxBlobEdit and TcxDBBlobEdit components provide editing facilities for all kinds of blob data. The following screenshots show the properties of a control set up to display jpeg images:

The left hand image above shows the grid column properties and the right shows the expanded Properties property. At runtime, a resizable image is displayed after clicking on the cell's button:

Design-time support
Design-Time Features Structure Navigator Grid Designer Repository Considerations Import Facility

Design-Time Features

Return

EQGrid4 provides extremely advanced and powerful design-time support. As you would expect, it provides excellent property and component editors but it goes much further. For example, most of the runtime customization facilities are available within the IDE and this even includes sorting and grouping! Consider the following screenshot:

The data displayed is currently grouped by Car within Company and the screenshot was taken in the process of switching the grouping to be Company within Car. Yes, that is correct - changing grouping is available within the IDE and you can group by as many columns as you wish (by dragging column headers to/from the grouping panel). Note also the customized information provided on the group rows and the group footer summaries available for expanded groups. After completing the above operation and also expanding a couple of groups, we see:

The group footer summaries are different when grouped by companies instead of cars (see the first screenshot). This is a powerful facility - you can set appropriate totals or summaries, which only display when grouped by the appropriate column(s).

Thus, your end-users can group every which way without generating rubbish totals! Although this is obviously a complex facility, the Grid Designer provides a drag/drop facility to simplify this (illustrated later in the paper). As another example of EQGrid4's versatility, here is another demo screenshot:

The image above shows two grids: a single column table view (used as a filter) and a card view. Note the position of the horizontal scrollbar - this is active within the IDE and you can also drag the card separator lines (and use the Object Inspector to modify properties with full WYSIWYG). This image illustrates another point - the grids are both using stylesheets and these are available via the StyleRepository component:

Above, the StyleRepository is within a DataModule and its component editor has been invoked by a right-click. Selecting a stylesheet and clicking the Edit button produces the StyleSheet Editor:

In the example above, the Footer element of the table view has had its font size and color changed using the standard Font dialog. There is much more to Styles support, however, and this is covered in the Styles & Themes topic. These screenshots above demonstrate the RAD nature of EQGrid4 and just how much can be done at design-time to get the runtime display perfect. The most important features at design-time are the Grid Designer (the component editor) and the Structure Navigator (displayed in the bottom right hand corner of the grid). The latter is an innovative piece of design and this provides superb access to EQGrid4's hierarchy of 'Levels' and 'Views'. The Structure Navigator is covered by the following topic and the Grid Designer comes after it.

Structure Navigator

Return

The Structure Navigator (bottom right in the screenshot below) provides a logical path to the Levels and Views within a grid:

In order to provide powerful and flexible master/detail displays, the grid's hierarchy is managed by 'Level' objects and each Level's content is provided by a 'View' object. This, of course, is a superb way of providing runtime customization, because levels may have different views hooked up on the fly according to the data requirements. We had difficulty in managing this at design time initially however, and hence the introduction of the Structure Navigator (bottom right in the above screenshot). It is very easy to see that the Films master has three detail levels. Note the names of the objects displayed: 'lv' prefix for the 'Level' objects and 'tv' & 'cv' for table and card Views (these are not mandatory, but we have found them useful while writing the demos). When the lvFilms Level is selected (as above), its Object instance's properties are displayed in the Object Inspector and the Object TreeView:

By comparing the Structure Navigator and Object TreeView, you can see the advantage of having a logical layout compared with physical (the latter does not show the link between lvFilms and tvFilms). Note the Options.DetailTabsPosition property, currently set to dtpTop (can also be dtpLeft & dtpNone). This determines how detail views are displayed as tabbed pages. At the bottom of the Structure Navigator, you can see the Customize button an this invokes the Grid Designer, the subject of the next topic. Before you read on though, it is worth mentioning here that the above screenshots were taken from the MasterDetailDemo, which ships as a demo and as a tutorial. This particular tutorial provides good practice in using the Structure Navigator and the Grid Designer, by providing a 'step by step' guide to this new technology.

Grid Designer

Return

As just described in the previous topic, the Grid Designer is accessed via the Structure Navigator's Customize button. Alternatively however, you can right-click on another part of the grid and select the Editor option from the context menu provided. The Grid Designer is very powerful and can be regarded as a state of the art replacement for the ExpressQuantumWizard. It provides centralized facilities for managing levels, views, bands, columns, rows and summaries:

The screenshot above was obtained by clicking on 'Add Level' (with Grid selected), followed by right-clicking on the new level. The pages displayed on the right of the form (Columns & Summary above) depend on the type of view displayed (or the type hooked up to the displayed level). For card views (e.g. cvPeople linked to lvPeople), only a single Rows page is displayed, while the view in mid-creation above displays three pages:

Having created the new view, it just needs to be hooked up to a datasource, as shown by the left screenshot below:

The DataSource above is a property of the grid's DataController. In a similar fashion, functionality is also delegated to other objects such as Filtering, Options and Styles. You can also see that a very rich set of event handlers have been provided. Switching to the Grid Designer's Columns page and clicking on 'Retrieve Fields' is all that is now required to populate the view at design time:

One of the big advantages of our new technology is the ability to use editors as objects. In EQGrid3, a column type was defined as it was created and so changing its type involved the deletion and creation of a new column. Now, the editor is a property and there is only one column class:

In the above screenshot, the Properties property contains a list of editors available. Once an editor object has been selected, Properties may be expanded to display the sub-properties relevant to that particular editor:

Being able to change the editor used by the column like this is extremely useful at runtime too. The ColumnsMultiEditorsDemo shows how to change the editor used on a row by row basis. Other aspects of the Grid Designer are covered by demos and tutorials. For example, the SummaryGroupDemo demo/tutorial pair is only one of several covering group and footer summaries:

Repository Considerations

Return

EQGrid4 provides a wealth of repository facilities, thus enabling centralized management of control attributes. Take a look at the following screenshot:

As you can see from the above image, there are no fewer than four non-visual components providing repository and/or centralized control! In order to understand these controls, let us look first at their properties and their component editors: LookAndFeelController EditStyleController StyleRepository

EditRepository

The LookAndFeelController is the simplest of these components. It provides a centralized location for the LookAndFeel properties of all our cross platform components. Note the blue highlighted values above - if there are no AssignedValues (as illustrated), changing the LookFeelController's NativeStyle and/or Kind property will affect all the controls. Setting one of these properties in the StyleController or an editor results in the appropriate change to AssignedStyles and will override the central setting. Thus at runtime, it is very easy to provide the user with centralized control and, in fact, you will see this in most of the demos provided. One thing that it is extremely important to realise: setting NativeStyle to True will take priority over settings provided by the StyleController below. On XP systems, this provides XP themes support, but for other systems, you will most likely prefer to set it False and use one of the Kind property's values instead. The EditStyleController provides a common set of properties and these may be referenced by the StyleController property of multiple editors. Note that the EditStyleController itself has a StyleController property, thus providing an inheritance hierarchy. This could be used, for example, as an application wide set of properties inherited from a company set. The following screenshots were taken after tweaking some properties in the EditStyleController instance and show the affect of assigning the controller to the cxTextEdit1 control shown in the earlier screenshot:

Note that the EditStyleController relates to editors only. Grid styles are controlled via the StyleRepository component and this maintains collections of styles and stylesheets. A stylesheet contains a set of styles appropriate for a particular type of grid view. A style relates to an element of a grid view. A more extensive discussion is provided in the next topic: Styles & Themes. The final non-visual control to describe here is the EditRepository, and it is probably the most innovative and powerful of the four. You might have noticed the RepositoryItem object property in the screenshots above. In order to set this property, we need to add an appropriate item to the repository:

The top left image above is a repeat of the one shown earlier and the one underneath it shows the default properties of the new TextItem. Now it is just a question of modifying a few properties followed by assigning the item to the editor:

The blue highlighted properties are the ones which were modified within the repository item. Notice how they do not overwrite the editor's properties despite taking precedence. The right hand screenshots also show the effect of the StyleController changes made earlier. The EditRepository is particularly useful for those editors which hold lists of items, as these may be stored centrally and used by many editors. For example, options such as "High, Medium & Low" are very common. There is one caveat I should mention here. When the EditRepository concept was first developed, it was designed for use by the

in-place editors only. This proved to be so useful that we extended it to the stand-alone editors, but that introduces a complication. Event handlers are implemented by Delphi as properties and, as a consequence, supplying event handler code for one control results in all the other editors hooked up to the EditRepository gaining the same functionality. This is not a problem for in-place editors, as only one can exist at any given time. However for standalone editors, you should be aware of this and code accordingly. This problem will be fixed in a future upgrade by preventing event handlers entered at the editor level affecting the repository item. Access to central repository event handlers will be restricted to controls that do not provide their own versions. In the meantime, it is better not to use event handlers for editors hooked up to repository items. This should not be a significant restriction though, because editors very often do not need event handlers. Import Facility Return

EQGrid4's radical new architecture means that assistance is required for converting existing grids and this is supplied by the design-time Import facility. In the left screenshot below, a TcxGrid control has been dropped on a tabsheet and right-clicked:

To see the effect of clicking on the Options button and for screenshots & information on the tutorial which converts two EQGrid3 controls into a single EQGrid4 with master/detail views, go to ConvertGrid3MasterDetail tutorial. See the Imports topic for the types of grid which may be imported into a EQGrid4 table view.

Styles & Themes

This topic covers all aspects of customizing the way that EQGrid4 Views display data. I have already covered the different types of display (table, banded table & card views) in Views. but this is only half the story, as EQGrid4 provides ample opportunity to customize these views at design and runtime: Styles & Stylesheets Look and Feel Custom Draw Styles cover the display of the visual elements which make up the grid (headers, group panel, detail rows, footer etc), while LookAndFeel covers the appearance of the control as a container (and includes XP theme support). Custom draw provides comprehensive facilities for when you want to go the extra mile by manually coding the display of one or more grid elements. Thus, EQGrid4 provides complete control of the visual presentation of data.

Styles & Stylesheets

Return

Styles cover the display of the visual elements which make up the grid (headers, group panel, detail rows, footer etc). There are three objects which you need to understand in order to use this technology: Style: an object containing a Font plus a background color which can be assigned to a grid view element Stylesheet: an object containing a collection of styles, which can be assigned to a grid view or to another stylesheet (of the same type). StyleRepository: a component which manages a collection of stylesheets and/or styles Using the Styles repository and Style sheets technology provides centralized control over the appearance of all EQGrid4 controls and ExpressEditors in your application(s). The following screenshots show a TcxStyleRepository component from one of the shipped demos together with its component editor (invoked by double-click or by right-click and 'Edit...', as shown):

The right screenshot above was achieved by clicking on the Add button. As stated before, a style sheet may be assigned to a grid view, but as the different view types have different sets of screen elements, it is necessary to select the type of style sheet required. The above operation results in:

There are no styles assigned to the new style sheet as yet. Note also the StyleSheet property. Any unassigned style elements will inherit from an appropriate style assigned via the style sheet. If a style is not assigned via this stylesheet, its stylesheet property is checked and so on. If there is no style available for a particular element via this StyleSheet hierarchy, a hard-coded default style is applied. Returning to the StyleRepository Editor, it provides the normal Add/Edit/Delete options for StyleSheets plus the 'Save to INI', 'Load from INI' and 'Predefined' buttons. The INI buttons do what you would expect, but the 'Predefined' option deserves some space here. Clicking on it reveals:

Note the selection of the type of StyleSheet required (see the mouse over the dropdown list). Once the type has been selected, clicking on the Load button adds an appropriate sheet to the repository, and this can be referenced by our existing sheet:

When the pumpkin stylesheet is assigned above, the individual styles get copied across as you can see. Note the Group value this contains a value explicitly entered and will remain regardless of any re-assignment of the StyleSheet property. Now to discuss the Styles themselves. The Repository Editor contains a Styles page:

The left screenshot below shows the affect of assigning a Background style and a StyleSheet to a view:

The right screenshot above shows the effect of clearing the StyleSheet. If we return to cxGridBandedTableViewStyleSheet1 and clear the Group style value (currently cxStyle13), it will revert to cxStyle41 (because of its reference to the pumpkin style) and

this change affects the view above as well. Thus, the Styles/StyleSheet technology provides proper centralized control. See Repository Considerations for additional information on using the Styles repository.

Look and Feel

Return

The previous topic covered the display of elements internal to the grid control and, apart from a few RootLevelStyles, it mostly concerned the display of views. LookAndFeel covers the external aspects of the display such as the style of the scrollbars and the '3d' emphasis on the separator lines and buttons. A big difference between the Styles and LookAndFeel technology is that the latter is part of our cross platform display toolbox. The latter is shared by the ExpressEditors and other Developer Express products, thus providing a common look & feel across components. The basic LookAndFeel property is very simple, as the following examples of a grid and an editor show:

LookAndFeel comprises two basic properties: Kind and NativeStyle. The latter takes precedence when set to True and provides XP theme support (thus not effective for Win2000 or Win9x). If NativeStyle is set to False, then the Kind property takes effect and it has three settings (as shown by the dropdown above). The TcxLookAndFeelController component provides a way of managing the look & feel of multiple components. Once dropped onto a form, changing its Kind and/or NativeStyle properties affect all controls which do not have assigned values. Note the AssignedValues property settings above - the grid will not be affected because its assigned NativeStyle will always take priority. The TcxLookAndFeelController is very simple:

The following four screenshots show the different look & feels available under XP:

NativeStyle=True

Kind=lfUltraFlat

Kind=lfFlat

Kind=lfStandard

Examine the horizontal scrollbars above, as they show the differences most clearly in these reduced size screenshots. See Repository Considerations for additional information on how LookAndFeel relates to the repository facilities.

Custom Draw

Return

Stylesheets & LookAndFeel should be the first places to go when customizing the EQGrid4 display. There can be times, however, when the easy options do not provide quite enough control, as it is impossible to cater for every circumstance. This is where custom draw comes into its own, and EQGrid4 provides extensive facilities in this area. Important note: please consider that this topic is optional! Superb display results can be achieved from EQGrid4 without going anywhere near the items discussed here. It is necessary, however, to show the flexibility and power of the product and what is available when you are prepared to do a little more work. If you are new to our products or this is your first read of this paper, you might prefer to postpone reading this section and skip to Runtime Customization. For the purposes of this topic, custom draw is defined as changes to the output display made by code executed via event handlers. The bulk of this work will be done in handlers containing 'CustomDraw' within their names, but the object based architecture of EQGrid4 means that user and data related display changes can be made via other events also, as we will see below. Custom drawing is available at different logical levels and they will be covered in turn: grid (i.e. the container 'decorations') view (table or card) item (i.e. column for table view or row for card view) The following screenshots show the event handlers available to the TcxGrid itself:

Hmmm! Apparently not a good start, as there is no custom draw in sight! However, note the assigned event handlers and the parameters highlighted above. These object references provide access to the elements and properties available for events which affect the grid as a whole. For example, when the focused view changes (e.g. in master/detail display), you may wish to display or hide a column depending on some external state. There is no need for specific custom draw event handlers for the grid itself as it can be viewed as a container for view(s) and this is where you will find the real action:

Note the different events highlighted for the different types of view: yellow - all types cyan - table and banded table magenta - banded table only and card view only Similar events are available at the item level (i.e. column for table views and row for card views):

Now for some examples of custom drawing, provided by the shipped demos. First, the use of OnCustomDrawCell via a slightly modified event handler in the EditorsInPlace demo:

The code above does the complete drawing of the Info row of a grid card (note that ADone has been set to true to prevent any default drawing occurring). The results of this can been seen in the following image, but I would like to make a couple of points first: the images are displayed in 256 color mode only and look much better in the actual demo. If you try this demo, see the effect of resizing the form - reducing the height will result in a single row. Also, you are likely to be impressed by the instant drawing of the images as you scroll horizontally.

Note: the compressed 256 color screenshot does not reflect the true quality of the images. Now an example of using the OnGetContentStyle event handler:

The code above sets the style of the row depending on the Status value (an integer is returned relating to the currently selected combobox item). Note the use of tvItemsSTATUS.Index when referencing the column - this is a common technique and needed because there is no absolute way of knowing where the column is actually displayed at runtime because of the column moving and grouping facilities. Using an early pre-release version of the IssueList demo, the following was displayed:

You are probably wondering the same as I did: "how did the images get into the cells?" It was an interesting exercise finding out and the following screenshots tell the story:

The Status column contains an ImageComboBox editor and this is hooked up to an item within an EditRepository. The Type and Priority columns are handled in a similar fashion (note the edrepItemType & edrepItemPriority entries in the top right screenshot above). Finally, an example to show you the kind of stunning results which can be achieved with only a little extra effort (and we provide this particular code already!):

Runtime Customization
Obviously, ease of use and design-time facilities available are important when developing using a grid control, but at the end of the day it is the end-user experience which is crucial. You will find that EQGrid4 is superb here and this topic covers the major options available at runtime: runtime view customization column moving and resizing column grouping column sorting column filtering new item row incremental search design-time features available group and footer summaries preview feature

Runtime View Customization Return

EQGrid4 provides runtime control over which bands and columns are actually displayed. In order to produce the following screenshot: 1. 2. 3. 4. the ViewBanded Demo was opened in the IDE the cxGridPopupMenu1's Grid property was hooked up to the grid the demo was compiled and run the form was reduced in size and one of the column headers was right-clicked

Clicking where shown above displays the non-modal Customization form. This allows columns and/or rows to be hidden from the view and stored for possible later re-display. The next screenshot shows a column in the process of being moved from the grid's display (note the two columns already hidden):

The Customization form shows Columns only for other than banded table views. A band can be drag/dropped in the same way and the following shows the result of hiding the 'Creator Info' and 'Owner Info' bands:

The Customization form is can be moved and resized. Both pages are shown above to illustrate that the hidden Bands still own their columns (EQGrid3 users will appreciate this!).

Column Moving and Resizing Return

Using the example from the previous topic, and by right-clicking on a column header:

Note: see the previous topic (Runtime view customization) for how the context menu was created without writing any code. There are two items displayed above which relate to moving and two for sizing: Remove This Column places the column into the Customization form (see previous topic) Field Chooser displays the Customization form, thus allowing you to move hidden bands/columns (see previous topic) Best Fit adjusts the width of the focused column according to its caption (and subject to constraints placed on band/column widths) Best Fit (all columns) does what you would expect. Again, width constraints may affect the result. For table views, columns may also be moved via drag/drop of band or column headers. They also may be resized by dragging on a column header's vertical border:

In the above example, the Name column is being widened. For card views, resizing of card widths is done by dragging a vertical separator, thus changing the widths of all cards:

Column Grouping Return

EQGrid4 provides MS Excel style column grouping:

To produce the above screenshot, the State (MRUEdit) column header was dragged and dropped on the GroupBy panel and the CA state expanded. Note that the column was automatically added to the Customization form. If you wish, the entry in that form can be dragged back to the column headers to display as a column as well as a group. Note the two icons on the State entry in the GroupBy panel - yes, sorting and filtering is available on grouped columns. Multiple grouping levels are supported and simple drag/drop allows the grouping hierarchy to be organized every which way:

Column Sorting Return

Table views may be sorted at runtime by clicking on column headers. The first click sorts in ascending order and subsequent clicks reverse the order. Hold down the shift key while clicking on another header to sort by multiple columns:

In the above example, the 'Purchase Date' detail header has been clicked twice and the top view is sorted by Customer (status) within State

Column Filtering Return

EQGrid4 provides MS Excel style filtering, i.e. a filter dropdown via column headers:

The dropdown filter displays the unique values held within the column plus special rows at the top. These special rows depend on the data and (Custom...) can be followed by (Blanks) and (NonBlanks) entries (if there are a mixture of blank/non-blanks). As they are not shown above, we can tell instantly that there are no blank entries in that column! Notice the Filter Status row at the bottom (there is an option to hide it). Clicking the right hand checkbox toggles the display between all or just the filtered records and this is blindingly fast! Clicking on the left checkbox closes the row and removes the filter. If the filter is by a single column, selecting (All) from the filter dropdown has the same effect. In the example above, two columns affect the items displayed. Selecting (Custom....) from the dropdown invokes the Custom Filter Dialog, thus allowing more sophisticated filter criteria.

See how adding a second condition reduces the number of rows displayed:

New Item Row Return

EQGrid4 provides the option of displaying a 'new item row' in order to add records in-situ. This can be located at the top of the table view

Incremental Search Return

Once this optional facility is active, typing in a cell will provide fast navigation to the next row containing the characters typed:

Design-time Features Available Return

The following design-time features are also available to the end-user: automatic grouping by unlimited number of columns automatic sorting by unlimited number of columns summaries calculations switching between levels band/column drag/drop from/to view and customization form default views save/restore view options into the registry or INI-files centralized Look & Feel object

Group and Footer Summaries Return

Here, I want to describe a particularly cool runtime customization facility:

The above screenshot was produced by right-clicking on the Time column's footer. Note that Sum and Average are disabled, indicating that the possible options relate to the type of the column. The Customer column, for example, only enables the Count and None options. What will really surprise you about this, though, is the lack of effort involved in providing this runtime functionality! It merely requires two simple steps at design-time: 1. drop a TcxGridPopupMenu component onto the form 2. hook-up its Grid property to the required grid How could it be simpler?

The magic is performed when UseBuiltInMenus is set to True (the default). This property is plural as it also provides a context menu for column headers:

This time, the right-click was performed on the Model column header and this belongs to a different View, another demonstration of the high functionality/work ratio provided by this product. If you compare this screenshot with the previous one, you will see that I used the 'Group By Box' option to hide them from both views.

Preview Feature Return

For table views, EQGrid4 provides an automatic MS Outlook style preview feature:

Miscellaneous
Printing Facilities Compatibility/Conversion Compatibility Considerations Import (conversion facility) Export Formats Demos and Tutorials Demo Concepts Demo List (alphabetically) Demo List (by project group) Examples EditorsInPlace Demo ConvertGrid3MasterDetail Tutorial RichMemo (feature demo)

Printing Facilities

Return

Printing support is available via the ExpressPrinting System (EPS), and this is available as a separate product. A complete description of EPS is outside the scope of this paper, but you may find some comprehensive white papers via the VCL Soapbox. Here, I will describe the report designer specifically prepared for this product:

Options available on the other four pages follow:

The following two screenshots show the demo provided with the EPS followed by its Print Preview:

In the above screenshot, a few modifications of the title and header have been made at runtime (via dialogs invoked by toolbar buttons).

Compatibility/Conversion

Return

Compatibility Considerations Import (conversion facility) Export Formats

Compatibility Considerations

Return

EQGrid4 is completely new technology and makes full use of compiler and IDE facilities available since Delphi 4. In order to keep the product lean and mean (assuming that such a big product is entitled to be called lean), inevitably backward compatibility could not be maintained. We have done our best to minimize the effects of this, but EQGrid3 customers should be aware of the following points : EQGrid3 and EQGrid4 can co-exist, so you can migrate at your own speed EQGrid3/EQGrid4 each have its own set of editors. See editor compatibility below EQGrid4 does not include a TreeList control (ExpressQuantumTreeList is a separate product). Instead, you may use EQGrid4's provider mode for showing/editing custom data. EQGrid4 can import a EQGrid3 control into a table view and this covers all except the conversion of your code. the EQGrid4 help file contains EQGrid3/EQGrid4 properties/methods/functions comparison lists to aid your code conversion many demo/tutorial pairs are shipped with the product covering how functionality is now implemented.
Editor Compatibility

EQGrid4 is a cross-platform product and this presented us with a problem concerning the editors. In EQGrid3, they are RTF based (i.e. require a richedit dll) and this provided enhanced drag/drop and multiple undo/redo functionality. We could not use RTF for cross-platform and so this functionality is not provided by the new editors. It is possible though, for EQGrid3 stand-alone editors (but not in-place) to be used together with EQGrid4. If you have any problems converting existing controls, please contact support@devexpress.com, who will be pleased to help you. We also offer an online support forum and this can be accessed via our website: http://www.devexpress.com. Finally, if you prefer peer-to-peer support, our newsgroups may supply answers from other customers, our excellent dxsquad volunteers or ourselves (although we cannot always promise the latter, as we are often extremely busy).

Import (conversion facility)

Return

EQGrid4 provides conversion facilities for multiple grids via a design-time Import facility: ExpressQuantumGrid 3 standard DBGrid third party grids As might be expected, the EQGrid3 conversion does the most, and includes the conversion of styles, grouping and summaries. The Import process cannot, however, handle the conversion of event handlers. Unfortunately, there is no way that we can predict the way that these are being used. However, the EQGrid4 help file contains a EQGrid3/EQGrid4 comparison of properties/methods/events and this makes this conversion process as painless as possible. But, if you still have difficulty in this or any other area, please write to support@devexpress.com and we will be pleased to help. Incidentally, it is worth mentioning that our support department does far more than merely fixing bugs and often produces working examples to help customers to use specific features. See the Import Facility within the Design-time topic for screenshots of the import designer and the ConvertGrid3MasterDetail Tutorial for a worked example of a master/detail conversion. Two other relevant demo/tutorial pairs are shipped with EQGrid4: ConvertGrid3Demo and ConvertDBGridDemo

Export Formats

Return

Getting data into EQGrid4 views is very flexible because of: support for data access via bound, unbound and provider modes the design-time Import conversion facility

Getting data from EQGrid4 views is provided by Export functions for the following output formats: XML HTML Excel Text The content of the export depends on the format's capabilities and the list above is arranged from most to least. For example, Excel and Text outputs are restricted to a single view. The Export functions are included in the cxExportGrid4Link file:

As you can see, all four formats allow limiting the export to expanded and/or selected rows. The AUseNativeFormat option for Excel can be set to True if you need the output to create native column types (e.g. currency, date and time). Note: when using any of the above routines, you will also need to add a reference to cxExport within your uses statement.

Export to XML

Return

The XML format reflects most of the grid's display features such as master/detail, styles and grouping etc. The following image shows the data exported:

Export to HTML

Return

The HTML format reflects the same grid display features as the XML format (such as master/detail, styles and grouping etc). The following image shows the data exported:

Export to Excel

Return

This export format is restricted to a single level, i.e. just one view and any detail view is ignored. The following image shows the data exported (with AUseNativeFormat option set to True):

Export to Text

Return

As you might imagine, exporting in text format is very limited, as there is no way of handling multiple views, styles or grouping etc. The following image shows the data exported:

Demos and Tutorials

Return

Demo Concepts Demo List (alphabetically) Demo List (by project group) Examples EditorsInPlace Demo ConvertGrid3MasterDetail Tutorial RichMemo (feature demo)

Demo Concepts

Return

EQGrid4 is a big product and there is a lot to learn, so it was important for us to make this process as painless as possible and, as a consequence, we provide three types of demo: Web Site Demos Feature Demos Demo/Tutorial pairs The Web Site Demos are full featured executables which you can download from our website (http://www.devexpress.com). These demos normally make use of our other products also, such as ExpressBars. Feature Demos do not use our other products and thus can be compiled and executed out of the box. They are designed to show you EQGrid4 working within real life scenarios. See RichDemo for an example. Demo/Tutorial pairs are a new concept designed to get you up to speed with as little effort as possible. Each tutorial consists of an almost completed demo. This allows you to get to grips with our technology without that usual frustrating boring preamble before being able to practice on the interesting stuff. Once you have finished the tutorial (a word document provided in the project folder), you can check it against the demo (i.e. the one we prepared earlier!). See EditorsInPlace Demo & ConvertGrid3MasterDetail Tutorial for runtime and design-time examples respectively. The following sections describe all the demos shipped with EQGrid4. Website demos are not included, as they are moving targets. However, one demo that you really shouldn't miss seeing is the Grid4Features demo. This provides a fairly

comprehensive workout of the product's capabilities:

The exquisite control on the left is our ExpressNavBar (and 256 colors does not do it full justice!).

Demo List (alphabetically)

Return

The table below shows all the shipped demos in alphabetical order. Four project groups have been provided: 1,2,3 and F (feature demos). The first three groups are rather arbitrary, but tend to be in the order we expect you will want to look at the demos. After this table, you will find further lists that allow you to see the composition of each group more easily. Note: the demos below have been tested under D5, D6 & D7, but the demos make use of ADO datasets, so Delphi 5 users need to have installed the Borland ADO Service Pack for them to work properly and, unfortunately, Delphi 4 users will not be able to run them. Demo Name Group Description Uses provider mode to fill an array and also changes the 3 editor assigned to a column on the fly via an event ColumnsMultiEditorsDemo handler Shows the ability to share an edit repository item between 3 ColumnsShareDemo columns of different views. Master/Detail using grid views and showing various 1 ColumnsSimpleDemo column editors. Shows the output of the design-time Import of a standard 2 ConvertDBGridDemo DBGrid Shows EQGrid3 and EQGrid4 versions of the same 1 ConvertGrid3Demo dataset Shows two EQGrid3 controls (master/detail) and the ConvertGrid3MasterDetailDemo 3 conversion into a EQGrid4 control with master/detail views. Displays a filtered card view with various background 2 CustomDrawCardViewDemo effects via custom draw Displays a table view with a custom draw editor enabling 3 CustomDrawTableViewDemo custom effects on various grid elements. Experiment with various in-place column editors. They are EditorsInPlaceDemo 1 displayed using three tabbed card views. Practice using lookup data-aware editors for reading and writing. 1 EditorsLookupDemo Shows the use as stand-alone editors and bound to a grid column.

EditorsMaskDemo FilterByCodeDemo GridMenuViewsDemo IssueList

2 3 2 F

Practice using masked data-aware editors for reading and writing. Use the various modes including regular expressions with incremental completion. Shows how to build complex filters in code. Use context sensitive popup menus for headers, detail records, group summaries and footer summaries. An example of using several grid controls to manage a popular type of application. A chance to see the grid in action and to apply your own touches to a useful utility application. Starts by displaying a grid with a single master view and separate edit controls for detail records. A single menu click converts the grid into master/detail with the detail displaying in card view. Displays master/detail levels in grid views. This demo is designed mainly for the tutorial, which covers all the basic steps. Displays two tables (as were needed by EQGrid3) and a single menu click converts into a single table displaying master/detail grid views. An example of building and registering a descendant editor. It provides the facility to display RTF data in the grid, so is useful in its own right. The demo using the editor displays all the tutorial documents. Note: before opening the main demo form, the package supplied must be installed first. A feature demo showing how to display different query results in the grid at runtime. Having chosen a database, its tables and fields are displayed in a hierarchy within a grid control. Names of tables and fields can be dragged into an edit area where SQL can be built and the results from executing it can be seen in a second grid. Displays records displayed in cards within four tabs: DevExpress, Slate, High Contrast and User Defined. Editing facilities are provided for the User Defined style. Practice using stylesheets. Switch between predefined and user defined styles. Accesses the StyleSheet Designer dialog at runtime Edit and assign styles to various grid elements. Shows how to provide runtime customization of group summary values. The user can right click on a group footer and change the summary type Displays group summary information within the grouped row and different summary details as a footer row following its detail records. Shows summaries within group footers of a detail table displayed via master/detail views. This is the major summary demo showing group and footer summaries and the various options available Loads an INI file into the grid. Data is displayed in master/detail views by section. A very simple example of data loaded from a text file displayed in two columns (as you might want for a lookup). MineSweeper! This demo shows the ability of the grid to work with all kinds of unstructured data. Displays information about the solar system. Data is loaded from a simple CSV file. Provides options showing all aspects of using bands and column customization at runtime and the simple code required for this. Displays timesheets grouped by project. User information is in a fixed left band and summary/total details are fixed on the right. Departments are displayed on the left showing the grid as a single column list. This controls User records displayed as Cards on the right.

MasterDetailCardDemo

MasterDetailDemo

MasterDetailTableDemo

RichMemo

SQLBrowser

StylesCardViewDemo

StylesMultiDemo StylesSimpleDemo SummaryFooterDemo

1 1 2

SummaryGroupDemo SummaryGroupFooterDemo SummaryMultiDemo UnboundExternalDataDemo UnboundListDemo UnboundModeDemo UnboundSimpleDemo ViewBandedDemo ViewBandedFixedDemo ViewCardSimpleDemo

3 3 3 1 2 1 2 2 2 1

ViewTableSimpleDemo

Categories are displayed on the left showing the grid as a single column list. This controls the records displayed on the right in table mode. Return

Demo List (by project group)

The first three groups below are rather arbitrary, but tend to be in the order we expect that you will want to look at the demos. Group 1 Demos Group 2 Demos Group 3 Demos Feature Demos Note: the demos below have been tested under D5, D6 & D7, but the demos make use of ADO datasets, so Delphi 5 users need to have installed the Borland ADO Service Pack for them to work properly and, unfortunately, Delphi 4 users will not be able to run them.

Group 1 Demos
Demo/Tutorial

Return Demo Master/Detail using grid views and showing various column editors.

Tutorial Steps 1-26: hooking up the in-place editors to the columns ColumnsSimple Steps 27-30: un-comment and review code Shows EQGrid3 and EQGrid4 Steps 1-11: use the Import facility ConvertGrid3 versions of the same dataset to convert an existing version 3 grid. Experiment with various in-place Steps 1-24: hook up in-place column editors. They are editors to columns EditorsInPlace displayed using three tabbed Steps 25-27: un-comment and card views. review code Practice using lookup dataSteps 1-7: linking the stand-alone aware editors for reading and editors to the database. writing. Steps 8-15: customize the lookup EditorsLookup Shows the use as stand-alone editors editors and bound to a grid Steps 16-18: un-comment & review column. code Displays master/detail levels in Steps 1-9: add a Grid component grid views. This demo is and set up its master level designed mainly for the tutorial, Steps 10-25: create the detail which covers all the basic steps. views MasterDetail Steps 26-35: create columns for the views. Steps 36-38: un-comment and review code Displays records displayed in Steps 1-4: create a grid level cards within four tabs: Steps 5-11: create and customize a DevExpress, Slate, High cardview StylesCardView Contrast and User Defined. Steps 12-14: hook up the Editing facilities are provided for stylesheet to a cardview and the User Defined style. examine the code Practice using stylesheets. Steps 1-7: customize a Switch between predefined and StyleRepository StylesMulti user defined styles. Accesses Steps 8-12: examine the code the StyleSheet Designer dialog at runtime. Edit and assign styles to various Steps 1-7: creating and grid elements. customizing a new style Steps 8-9: binding a style to a StylesSimple specific grid element Steps 10-14: hook up the style and examine the code Loads an INI file into the grid. Steps 1-3: Examine the pre-built Data is displayed in master/detail classes. UnboundExternalData views by section. Steps 4-10: Use the pre-built classes.

UnboundMode

ViewCardSimple

MineSweeper! This demo shows the ability of the grid to work with all kinds of unstructured data. Departments are displayed on the left showing the grid as a single column list. This controls User records displayed as Cards on the right

Steps 1-7: un-comment and review code

Categories are displayed on the left showing the grid as a single column list. This controls the ViewTableSimple records displayed on the right in table mode.

Steps 1-8: creating and using a new card view Steps 9-19: adding rows to the card view and assigning editors Step 20-22: assigning styles to the card view and working with options Steps 1-8: creating and using a new table view Steps 9-11: working with columns Steps 12-19: working with editors Step 20-22: working with styles and reviewing code

Group 2 Demos
Demo/Tutorial

Return Tutorial Steps 1-7: use the Import facility to convert an existing Delphi TDBGrid. Steps 1-6: hook up an event and review code. Steps 1-8: adding editors to the database Steps 9-26: mask creation within editors Steps27-31: setting the background color of editors Steps 32-35: Controlling the Look & Feel properties Steps 1-3: hooking up a GridPopupMenu component to the grid Steps 4-8: embedding a custom popup menuitem into the GridPopupMenu Steps 9-11: uncomment and review code Steps 1-3: Hooking up the tables at each level for the single grid Steps 4-7: establishing the master detail relationship via the grid view Steps 8-16: uncomment and review code. Steps 1-5: hooking up the tables at each level for the single grid Steps 6-14: uncomment and review code

Demo Shows the output of the designtime Import of a standard ConvertDBGrid DBGrid. Displays a filtered card view with CustomDrawCardView various background effects via custom draw. Practice using masked dataaware editors for reading and writing. Use the various modes including EditorsMask regular expressions with incremental completion.

GridMenuViews

Use context sensitive popup menus for headers, detail records, group summaries and footer summaries.

MasterDetailCard

Starts by displaying a grid with a single master view and separate edit controls for detail records. A single menu click converts the grid into master/detail with the detail displaying in card view. Displays two tables (as were needed by EQGrid3) and a single menu click converts into a single table displaying master/detail grid views. Shows how to provide runtime customization of group summary values. The user can right click on a group footer and change the summary type.

MasterDetailTable

SummaryFooter

UnboundList

Steps 1-6: hooking up the tables at each level Steps 7-13: creating footer summaries Steps 14-18: uncomment and review code Steps 19-22: set up a built-in context popup menu for the Grid. A very simple example of data Steps 1-3: Examine the pre-built loaded from a text file displayed classes. in two columns (as you might Steps 4-9: Use the pre-built want for a lookup). classes.

UnboundSimple

Displays information about the Steps 1-5: set grid options solar system. Data is loaded from Steps 6-10: examine methods. a simple CSV file. Provides options showing all aspects of using bands and column customization at runtime and the simple code required for this. Steps 1-5: creating bands Steps 6-9: assigning columns to the bands Steps 10-12: examine how to create and delete bands on runtime Steps 1-4: creating bands Steps 5-7: working with bands properties Step 8-12: assigning columns to the bands

ViewBanded

Displays timesheets grouped by project. User information is in a ViewBandedFixed fixed left band and summary/total details are fixed on the right.

Group 3 Demos
Demo/Tutorial ColumnsMultiEditors

Return Demo Uses provider mode to fill an array and also changes the editor assigned to a column on the fly via an event handler Shows the ability to share an edit repository item between columns of different views. Tutorial Steps 1-7: hook up an event and review code

Steps 1-5: add a TcxEditRepository component and create a repository item Steps 6-10: share the repository ColumnsShareDemo item between columns and views. Steps 11-15: un-comment and review code. Shows two EQGrid3 controls Steps 1-13: use the Import facility (master/detail) and the to convert an existing version 3 ConvertGrid3MasterDetail conversion into a EQGrid4 grid. Steps 14-17: bind the grid views control with master/detail views into a master-detail relationship. Displays a table view with a Steps 1-7: hook up an event and custom draw editor enabling review code CustomDrawTableView custom effects on various grid elements. Shows how to build complex Steps 1-9: Examine and activate filters in code. pre-built conditions. FilterByCode Steps 10-13: Add new filter condition. Displays group summary Steps 1-4: grouping data by information within the grouped columns. row and different summary Steps 5-8: creating a summary details as a footer row group. SummaryGroup following its detail records. Steps 9-12: binding summary items to a group. Steps 13-14: linking columns to a group. Shows summaries within Steps 1-4: hook up the tables at group footers of a detail table each level displayed via master/detail Steps 5-13: create group views. summaries SummaryGroupFooter Steps 14-17: uncomment and review code Steps 18-21: set up a built-in context popup menu. This is the major summary Steps 1-9: hook up events and demo showing group and review code SummaryMulti footer summaries and the various options available

Feature Demos

Return

You will find these available via a project group (i.e. a bpg file) named Grid4FeatureDemosD5, Grid4FeatureDemosD6 or Grid4FeatureDemosD7, as appropriate.

Demo IssueList

Description An example of using several grid controls to manage a popular type of application. A chance to see the grid in action and to apply your own touches to a useful utility application. An example of building and registering a descendant editor. It provides the facility to display RTF data in the grid, so is useful in its own right. The demo using the editor displays all the tutorial doc file content.

RichMemo

Note: before opening the main demo form, the package supplied must be installed first. A feature demo showing how to display different query results in the grid at runtime. Having chosen a database, its tables and fields are displayed in a SQLBrowser hierarchy within a grid control. Names of tables and fields can be dragged into an edit area where SQL can be built and the results from executing it can be seen in a second grid.

Examples
EditorsInPlace Demo

Return

ConvertGrid3MasterDetail Tutorial RichMemo (feature demo) One example of each of a demo, tutorial and feature demo have been chosen to illustrate common facilities. If you are interested in adding custom editors to EQGrid4 though, you should make a point of looking at the RichMemo feature demo. This provides an RTF (rich text format) editor and the topic covers compiling and installing it to your component palette.

EditorsInPlace Demo

Return

I'm discussing this demo in slightly more depth to provide you with a feel for the common features of all the demo/tutorial pairs provided. The main objectives when producing these demos were to provide simple examples of specific features and to avoid questions such as "OK, a pretty form, now what do I do next?". All the demos, therefore, share a common look & feel and contain a descriptive title referencing the 'About' form:

All the demos have an Options menu:

The 'Show Demo Description' (now unchecked compared with the previous screenshot) and the 'Grid Look&Feel' menu items are common to all demos. Note how the cards have adjusted automatically to a single row because of the form's height reduction. To finish this topic, a couple of examples of in-place editors in action:

ConvertGrid3MasterDetail Tutorial

Return

The rest of the above document (e.g. in ..\ExpressQuantumGrid 4\Delphi 6\Tutorials\ConvertGrid3MasterDetailDemo\ConvertGrid3MasterDetailDemo.doc) will be displayed in sections between screenshots and commentary. The tutorial starts by adding a TcxGrid control:

At this point, we have an answer to the question posed earlier in the Import topic:

The two EQGrid3 controls referenced above are on the form in the first of two tabsheets:

Next, the master grid is imported to the existing cxGrid1Level1:

As the tutorial says, the master view has been populated:

I should add at this point that I cheated slightly when creating the above screenshot by temporarily leaving the Import Designer to make a couple of tweaks to the form underneath. Two group rows were expanded and the cxStyleRepository1 icon (created by the Import process) was moved from the top left corner of the form. Adding the detail view is quite similar, but we also need to add a child level and it is simpler not to create a second style repository:

Before closing the Import Designer, it looked like this:

The master table contains a column displaying a JPEG image and, as the picture editor defaults to TBitMap, there is a little bit of work required to correct this:

It is worth noting that the conversion covers all group and footer summaries:

Next, linking up the master/detail views is surprisingly easy:

It was discovered very early in beta testing that people were trying to run tutorials without actually completing the steps, so the tutorials were modified to fail gracefully in those circumstances. Thus, the final steps for all the tutorials is to un-comment code and comment-out the initial warning ShowMessage:

The tutorial may now be compiled and executed and, provided that all the steps have been followed accurately, it should provide the same results as the completed demo provided.

RichMemo (feature demo) Return

EQGrid4 comes with an excellent set of 36 editors (18 each of unbound and data-aware) and they can all be used as standalone or in-place (within a table view column or a card view row). No matter how many we provide, however, there will never be enough and so we have built an architecture which makes the creation and installation of editors a very easy process. The RichMemo demo contains an example of such a custom editor. It provides an RTF (rich text format) editor and the demo application uses it stand-alone and in-place to display all the doc files describing the EQGrid4 tutorials. Before opening the RichMemoMain form though, it is necessary to install the custom editors in your IDE:

Once the following two components are installed ....

... the demo can be compiled and run:

Summary
This paper has presented an introduction to the ExpressQuantumGrid version 4 product. The significant points covered include: fast, fast, fast a single solution to all grid needs - master/detail and unbound included cross-platform (Delphi, BCB & Kylix a comprehensive set of editors which can be used in and out of the grid a powerful regular expression editor with optional incremental completion centralized styles and editor repositories advanced design time support (includes Structure Navigator, Grid Designer and Import facilities) advanced runtime features (band/column moving, grouping, filtering & sorting) export in XML, HTML, Excel or Text format full source available comprehensive help file plus many demos/tutorials printing support via the ExpressPrinting System (available separately) Enjoy, and don't forget the "Wow!" factor.

Mike Orriss (mikeo@devexpress.com)