EQGrid4 Intro

Purpose of this ArticleThis 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. Custom Draw is an advanced topic covering the wide range of custom draw events available. Design-time support Design-time Features provides a walk through of design capabilities illustrated by a range of screenshots. List of Editors (includes TcxButton) . design-time features available list. column filtering including custom filtering dialog examples. Runtime runtime view customization covers the Customization form (column Customization hiding). column Grouping shows grouping facilities (including sorting & filtering). HTML. Repository Considerations discusses the non-visual controls provided and compares their use. column sorting screenshots. StyleSheets and the StyleRepository.Further Details provides additional information on the TcxButton and the Mask & Blob editors. Miscellaneous Printing Facilities covers the report link provided for the separate ExpressPrinting System product. Compatibility/Conversion includes: Compatibility Considerations Import (conversion facility) from EQGrid3. 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. 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. Styles & Themes Styles & Stylesheets discusses Styles. Grid Designer describes EQGrid4's component editor. incremental search example (Grid4Features demo). DBGrid Export Formats XML. column moving and resizing describes the automatic facilities provided by the TcxGridPopupMenu non-visual component.Controls List of Controls (excludes Editors). Structure Navigator covers this important feature in more detail. new item row screenshot. Editors . . Look and Feel covers its NativeStyle & Kind properties and XP Themes. Most of the items listed are covered in this paper in greater detail and appropriate links are provided. 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 . 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.Feature Checklist Return This section provides a quick list of EQGrid4 functionality. 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. unbound and provider data modes (i. 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).e. EQGrid4 ships with a comprehensive help file. banded table & card in bound/unbound modes) comprehensive data access facilities bound. group footer and group row summaries grid Import of settings from EQGrid3. 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. standard DBGrid.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. providing easy practice of our technology) EQGrid4 is probably the most advanced and powerful visual component ever produced . XML. or W2W InfoPowerGrid grid Export .extendable facility allows creation of your own customized export formats Exporters included for XLS. Note the highlighted rows in the Object Inspector. Before looking at the Level and View objects.the grid contains default Level and View objects within the Structure Navigator. 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 . It is possible to display several views at each hierarchical level via a tabbed pages paradigm. as these show the two objects available to this top 'container' level and they are discussed in detail in Styles & Themes below.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 objects manage and own Views: .DetailTabsPosition to dtpTop or dtpLeft to enable multiple view display at the top level. Set RootLevelOptions. Level and View objects. it is worth drawing your attention to the RootLevelOptions property. Depending on the type of view.Note the Options. as this provides the position of detail views (if any) and this corresponds to the similar RootLevelOptions property already discussed. How the data is displayed depends upon the type of editor linked to the column/row. Their properties and methods could have been shown by expanding the GridView property in the above screenshots. 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. but it is less confusing to display them separately: As you can now see. The other objects are described in the Views topic. A candidate for our FAQ list! View objects manage the presentation of visual data. Incidentally. where the six types of view are compared.DetailTabsPosition property. only the first child view will display. EQGrid4's object-based architecture does not stop at Views. if the property is left with its default value of dtpNone. columns (table views) or rows (card views) are presented and they display data from fields. 'object based' accurately describes this technology! See the next topic for a discussion of the DataController object. Data Modes Return EQGrid4 uses the Developer Express DataController technology and this provides three data modes: . unbound mode is suitable for array input. Typically. when you need to display structured data within your grid control. Set this True for increased performance with large datasets. The TcxCustomDataSource class provides an interface which you override to implement a data source for the data controller. for instance. DetailInSQLMode . not grids operating in the equivalent of GridMode. You will need to set the DetailKeyFieldNames property also. sorts or filters the data. InsertRecord & DeleteRecord for writing data). the traditional method of hooking up a control to data. the end-user's filter string is stored in the underlying dataset's Filter property. thus loading all records up front. In provider mode. This mode can be used. AutoDataSetFilter . Compare the DataController properties of the unbound and data-aware versions of the table view: As you can see. This provides an end-user filtering capability when in GridMode. See the UnboundSimple demo & tutorial and/or the Unbound Mode topic in the EQGrid4 help file for more information. In unbound mode. each with unbound and data-aware versions. 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. Thus. although you may also need SetValue.when set to true.bound mode provider mode unbound mode In bound mode.defaults to false. the DataController is not connected to a data source and is pre-populated with records manually. the grid automatically sets GridMode to false. while provider mode can handle things like disk file structures. Note: if the user groups. 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. banded table and card view. Some of the data-aware properties are worth a comment here: GridMode . Although the grid is now extremely fast.set this to true if the detail view is driven by a TQuery component or similar when the grid should manage SQL refreshing automatically. The events available for data-aware and unbound DataControllers follow a similar pattern to the properties shown above: . The DataController is available via a View property. See the UnboundList demo & tutorial and/or the Provider Mode topic in the EQGrid4 help file to learn more. the data-aware version provides DataSource and associated properties and this tells us that provider mode requires an unbound view. the DataController is connected to a TDataSet by means of a TDataSource object: in other words. the DataController is connected to a user-defined (custom) data source and data is requested as needed. There are six views available: table. creating a custom data source requires code in two methods (GetRecordCount & GetValue. The following three screenshots provide an example of each: . table.Views Return Views provide card. and banded table representations of data. Bands provide the ability to create sets of columns. There is a further advantage . Second. RichMemo. the editors can be used inside the grid or stand-alone. A band may be floating or fixed to the left or the right of the grid.e. we were able to provide 36 editors from 18 base objects (i. as we have. then there are times when you will want the same impact outside the grid. which can then be moved and/or resized as a single item. 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. Once you create really professional and advanced editors for displaying/modifying data within a grid. the unbound and data-aware editors are objects which only differ by the latter providing a data-awareness interface. One of the demos we provide. While designing this new editor architecture. EQGrid4 supports unbound and provider modes also. unbound & data-aware versions). In the above example. so there is another consideration . shows how to add your own custom editor and. by providing simple wrappers. the Year band scrolls horizontally. 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. Have a look at the properties maintained by these views: The above properties all relate to unbound views.unbound and data-aware versions are required for each in-place editor. while keeping the Manufacturer and Units Sold columns always visible.extendibility. What does all this mean in practice? Consider the following screenshots of the properties of the date editor in all four modes: . once the component is installed in a design-time package. thus doubling the logical number of editors to 72 (as would be needed without using objects in such a manner). As a testament to the elegance of the architecture. you can use the RTF memo editor in exactly the same way as the others. 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. the Date and Time editors: . the base editor) varies according to the editor's functionality.e. Note how only the unbound stand-alone editor needs a place to store the actual data. even though the in-place editors show an abridged name). You will see that all four editors above contain a RepositoryItem property. The magenta and yellow highlights above represent unbound and bound uses of the DataController. In the previous version of the grid. The content of the Properties object (i. for example. 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. See the Repository Considerations topic for details of central management of editor property settings. Compare. depending on data). there were different column types created and thus we needed to provide a wrapper editor for runtime swapping of assigned editors.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. . See Group and Footer Summaries for details and screenshots. Component TcxGrid Description The ExpressQuantumGrid 4 control. (Dev Express page) TcxLookAndFeelController Provides XP Themes support plus centralized LookAndFeel properties.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. without any code on your part. Drop one on the form. Assign the StyleController property of all your editors to this component for centralized control. A non-visual component containing a set of properties common to all editor types. The list below excludes the editors. hook up its Grid property and then your grid has powerful column header and footer context menu items right out of the box. (Dev Express page) See Repository Considerations for more details. See Repository Considerations for more details. Just drop an instance of this non-visual control on the form to manage the grid and editors.Controls List of Controls (excludes Editors) List of Editors (includes TcxButton) Editors . TcxEditStyleController also has a StyleController property. TcxEditStyleController (Express Editors 4 page) .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 . thus allowing an inheritance hierarchy to be established. (Dev Express page) TcxGridPopupMenu A non-visual component providing context menus. Example 1 Mask Edit An improved version on the standard TMaskEdit control. Full support for regular expressions with or without incremental completion is provided. See Repository Considerations for more details. See the Blob Edit if the memo is better 3 displayed within a dropdown window or if the blob field contains graphic data. footer etc. You can set up common default properties and re-use them in editor instances merely by assigning their RepositoryItem properties. (Dev Express page) TcxEditRepository A non-visual component containing a central collection of editor defaults. 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). Memo Edit An editor with multi-line support for displaying and editing memo type blob fields. (Dev Express page) List of Editors Return The examples below were taken from the EQGrid4 FeaturesDemo available from our website. TcxTabControl TcxPageControl They are used within property & component editors.).TcxStyleRepository A non-visual component. 2 . If the descriptions below are blank. Stylesheets relate to all the styles contained within a View. which maintains collections of styles and stylesheets. These two controls are contained in the ExpressPageControl product shipped with EQGrid4. (Express Editors 4 page) See Repository Considerations for more details. See the Mask Editor topic below for more information. This demo allows you to experiment with the effect of changing all the editor properties plus much more. then the editor provides the standard functionality you would expect plus LookAndFeel and Styles support. while a style relates to an individual View element (header. detail row. Editor Text Edit Description An improved version on the standard TEdit control. 6 Hook this control up to a standard TImageList to display ComboBox images with or without associated text. Button Edit TcxButtonEdit and TcxDBButtonEdit contain buttons collections. 5 CheckBox See TcxButton for a 'normal' button. For example.Date Edit 4 The TcxDateEdit/TcxDateEdit controls support smart date input. Image 7 Spin Edit 8 ComboBox 9 Calculator Edit 10 HyperLink Edit 11 . you can type in expressions such as TODAY+1. 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. The contents of blob fields are displayed within a resizable dropdown window. MRU Edit 16 Popup Edit TcxPopupEdit andTcxDBPopupEdit are button type editors with a dropdown window. Note: the component editor uses the cxPageControl product internally (provided free of charge with EQGrid4). Lookup 18 . 17 The SysPanelStyle property determines whether the window displays the footer panel (thus providing sizing capability and the close button). Most Recently Used. It also supports an optional custom button (Zoom). which can display another control. Automatic addition of text input to the MRU history occurs when the editor loses focus. See Blob Editor for further screenshots. See Memo Edit. Unbound and data-aware controls providing a dropdown ComboBox lookup list. Blob Edit 15 TcxBlobEdit is a button type editor with the ability to display and edit blob data. if the blob field contains a memo and you would prefer to display in situ. See TcxButton for more details and screenshots. TcxButton is an enhanced TButton control: . plus a DropDownMenu property and LookAndFeel support. See Button Edit for the edit control containing one or more buttons.cxButton 19 An enhanced TButton providing three visual modes. it has been placed here because it belongs with the other stand-alone controls provided with EQGrid4. 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. 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: . 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. TcxButton would always display using XP Themes and this might look odd if there were no manifest present. If set to True. hence the introduction of the UseSystemPaint property.The UseSystemPaint property needs an explanation. a form was populated as shown: The following changes were made cxButton2.NativeStyle is set to True. the standard TButton requires a manifest before it will display using XP Themes. If the LookAndFeel. without special action.Kind set to cxbkDropDown cxButton3. In XP systems. NativeStyle=True.As you can see. DropDownMenu for cxButton2 and both for cxButton3. you need to use OnClick for cxButton1. Setting it to False allows the LookAndFeel. Well. the Borland proprietary support is provided too. All the above screenshots were taken with LookAndFeel. you may be rather surprised by the right screenshot above. If that is removed. especially since Paradox for DOS supplied much better facilities ten years ago. The pattern matching capabilities of the standard component are surprisingly poor.Kind property to come into play: If you are not familiar with XP. It is produced as a result of including an XP Themes manifest within the project. via our custom property editor: . we listened and have implemented full regular expression support and have even extended it to include automatic expression completion! Of course. 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. Perl programmer. 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: . there are occasions where the next character(s) can only take particular value(s) . typing 'b' will result in 'bigge' and typing 's' will complete the word. They are amazingly potent and deeply expressive ways to describe complex patterns in texts. With our mask editor. For example. This needs a bit of explanation though. and those who build browser based JavaScript software. The 'Extended regular expression' mask kind provides automatic expression completion. When an expression is being evaluated against the mask.there is no choice. Automatic completion will provide characters until there is a choice again.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. Java Developer. you can now define the precise text which you allow a user to enter within a given field. if the mask only allows the values 'bigger' and 'biggest'. Blob Editor Return The TcxBlobEdit and TcxDBBlobEdit components provide editing facilities for all kinds of blob data. a resizable image is displayed after clicking on the cell's button: . 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. . it provides excellent property and component editors but it goes much further. 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. This is a powerful facility . which only display when grouped by the appropriate column(s). we see: The group footer summaries are different when grouped by companies instead of cars (see the first screenshot).you can set appropriate totals or summaries. Yes. For example. As you would expect. . After completing the above operation and also expanding a couple of groups. Note also the customized information provided on the group rows and the group footer summaries available for expanded groups.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. 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). The Structure Navigator is covered by the following topic and the Grid Designer comes after it. 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). however. There is much more to Styles support.Thus. The latter is an innovative piece of design and this provides superb access to EQGrid4's hierarchy of 'Levels' and 'Views'. 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 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. the Grid Designer provides a drag/drop facility to simplify this (illustrated later in the paper).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). Note the position of the horizontal scrollbar . As another example of EQGrid4's versatility. Selecting a stylesheet and clicking the Edit button produces the StyleSheet Editor: In the example above. This image illustrates another point . the Footer element of the table view has had its font size and color changed using the standard Font dialog. here is another demo screenshot: The image above shows two grids: a single column table view (used as a filter) and a card view. and this is covered in the Styles & Themes topic. . your end-users can group every which way without generating rubbish totals! Although this is obviously a complex facility. This. 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. and hence the introduction of the Structure Navigator (bottom right in the above screenshot). its Object instance's properties are displayed in the Object Inspector and the Object TreeView: . is a superb way of providing runtime customization. When the lvFilms Level is selected (as above). We had difficulty in managing this at design time initially however.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. because levels may have different views hooked up on the fly according to the data requirements. but we have found them useful while writing the demos). of course. it is worth mentioning here that the above screenshots were taken from the MasterDetailDemo. followed by right-clicking on the new level. the subject of the next topic. Alternatively however. while the view in mid-creation above displays three pages: . views. currently set to dtpTop (can also be dtpLeft & dtpNone). This determines how detail views are displayed as tabbed pages. columns.DetailTabsPosition property. For card views (e. only a single Rows page is displayed. rows and summaries: The screenshot above was obtained by clicking on 'Add Level' (with Grid selected). bands. This particular tutorial provides good practice in using the Structure Navigator and the Grid Designer. you can see the advantage of having a logical layout compared with physical (the latter does not show the link between lvFilms and tvFilms). you can see the Customize button an this invokes the Grid Designer. you can right-click on another part of the grid and select the Editor option from the context menu provided. 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). At the bottom of the Structure Navigator. by providing a 'step by step' guide to this new technology. which ships as a demo and as a tutorial. Note the Options. It provides centralized facilities for managing levels. Before you read on though. Grid Designer Return As just described in the previous topic. cvPeople linked to lvPeople). the Grid Designer is accessed via the Structure Navigator's Customize button. The Grid Designer is very powerful and can be regarded as a state of the art replacement for the ExpressQuantumWizard.By comparing the Structure Navigator and Object TreeView.g. In EQGrid3. In a similar fashion. You can also see that a very rich set of event handlers have been provided. a column type was defined as it was created and so changing its type involved the deletion and creation of a new column. as shown by the left screenshot below: The DataSource above is a property of the grid's DataController. Now. 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. functionality is also delegated to other objects such as Filtering. it just needs to be hooked up to a datasource.Having created the new view. Options and Styles. the editor is a property and there is only one column class: . The ColumnsMultiEditorsDemo shows how to change the editor used on a row by row basis. For example. 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 Properties property contains a list of editors available. the SummaryGroupDemo demo/tutorial pair is only one of several covering group and footer summaries: . Once an editor object has been selected. Other aspects of the Grid Designer are covered by demos and tutorials.In the above screenshot. Repository Considerations Return EQGrid4 provides a wealth of repository facilities. thus enabling centralized management of control attributes. let us look first at their properties and their component editors: LookAndFeelController EditStyleController StyleRepository EditRepository . 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. thus providing an inheritance hierarchy. you will most likely prefer to set it False and use one of the Kind property's values instead. in fact. A more extensive discussion is provided in the next topic: Styles & Themes. changing the LookFeelController's NativeStyle and/or Kind property will affect all the controls. A style relates to an element of a grid view. this provides XP themes support. One thing that it is extremely important to realise: setting NativeStyle to True will take priority over settings provided by the StyleController below. You might have noticed the RepositoryItem object property in the screenshots above. and it is probably the most innovative and powerful of the four. you will see this in most of the demos provided. Thus at runtime. we need to add an appropriate item to the repository: . A stylesheet contains a set of styles appropriate for a particular type of grid view. Note the blue highlighted values above . The EditStyleController provides a common set of properties and these may be referenced by the StyleController property of multiple editors.The LookAndFeelController is the simplest of these components. The final non-visual control to describe here is the EditRepository. Grid styles are controlled via the StyleRepository component and this maintains collections of styles and stylesheets. Note that the EditStyleController itself has a StyleController property. Setting one of these properties in the StyleController or an editor results in the appropriate change to AssignedStyles and will override the central setting. 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. On XP systems.if there are no AssignedValues (as illustrated). In order to set this property. It provides a centralized location for the LookAndFeel properties of all our cross platform components. for example. as an application wide set of properties inherited from a company set. it is very easy to provide the user with centralized control and. but for other systems. This could be used. The right hand screenshots also show the effect of the StyleController changes made earlier. 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. as these may be stored centrally and used by many editors. For example. Medium & Low" are very common.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. When the EditRepository concept was first developed. There is one caveat I should mention here. The EditRepository is particularly useful for those editors which hold lists of items. Notice how they do not overwrite the editor's properties despite taking precedence. it was designed for use by the . options such as "High. This problem will be fixed in a future upgrade by preventing event handlers entered at the editor level affecting the repository item. Event handlers are implemented by Delphi as properties and. as a consequence. as only one can exist at any given time. supplying event handler code for one control results in all the other editors hooked up to the EditRepository gaining the same functionality. . Access to central repository event handlers will be restricted to controls that do not provide their own versions. it is better not to use event handlers for editors hooked up to repository items. because editors very often do not need event handlers. go to ConvertGrid3MasterDetail tutorial. This proved to be so useful that we extended it to the stand-alone editors. However for standalone editors. but that introduces a complication. In the meantime. This should not be a significant restriction though. This is not a problem for in-place editors. 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. In the left screenshot below. See the Imports topic for the types of grid which may be imported into a EQGrid4 table view. you should be aware of this and code accordingly.in-place editors only. 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. 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. I have already covered the different types of display (table. but as the different view types have different sets of screen elements. it is necessary to select the type of style sheet required. 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. 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). Thus.'..Styles & Themes This topic covers all aspects of customizing the way that EQGrid4 Views display data. but this is only half the story. EQGrid4 provides complete control of the visual presentation of data. detail rows.. 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. banded table & card views) in Views. group panel. while LookAndFeel covers the appearance of the control as a container (and includes XP theme support). The above operation results in: . Styles & Stylesheets Return Styles cover the display of the visual elements which make up the grid (headers. a style sheet may be assigned to a grid view. detail rows. 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. which can be assigned to a grid view or to another stylesheet (of the same type). footer etc). As stated before. as shown): The right screenshot above was achieved by clicking on the Add button. group panel. footer etc). 'Load from INI' and 'Predefined' buttons. a hard-coded default style is applied. but the 'Predefined' option deserves some space here. and this can be referenced by our existing sheet: . Returning to the StyleRepository Editor. The INI buttons do what you would expect. Clicking on it reveals: Note the selection of the type of StyleSheet required (see the mouse over the dropdown list). it provides the normal Add/Edit/Delete options for StyleSheets plus the 'Save to INI'. Any unassigned style elements will inherit from an appropriate style assigned via the style sheet. Once the type has been selected. If a style is not assigned via this stylesheet. its stylesheet property is checked and so on. Note also the StyleSheet property. clicking on the Load button adds an appropriate sheet to the repository. If there is no style available for a particular element via this StyleSheet hierarchy.There are no styles assigned to the new style sheet as yet. Now to discuss the Styles themselves. If we return to cxGridBandedTableViewStyleSheet1 and clear the Group style value (currently cxStyle13).When the pumpkin stylesheet is assigned above. Note the Group value this contains a value explicitly entered and will remain regardless of any re-assignment of the StyleSheet property. 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. the individual styles get copied across as you can see. it will revert to cxStyle41 (because of its reference to the pumpkin style) and . then the Kind property takes effect and it has three settings (as shown by the dropdown above). Once dropped onto a form. Note the AssignedValues property settings above . The TcxLookAndFeelController component provides a way of managing the look & feel of multiple components. 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. Look and Feel Return The previous topic covered the display of elements internal to the grid control and. See Repository Considerations for additional information on using the Styles repository. as the following examples of a grid and an editor show: LookAndFeel comprises two basic properties: Kind and NativeStyle. thus providing a common look & feel across components. A big difference between the Styles and LookAndFeel technology is that the latter is part of our cross platform display toolbox. The basic LookAndFeel property is very simple. it mostly concerned the display of views. If NativeStyle is set to False. Thus.the grid will not be affected because its assigned NativeStyle will always take priority. The latter takes precedence when set to True and provides XP theme support (thus not effective for Win2000 or Win9x). the Styles/StyleSheet technology provides proper centralized control. changing its Kind and/or NativeStyle properties affect all controls which do not have assigned values. apart from a few RootLevelStyles. The latter is shared by the ExpressEditors and other Developer Express products. The TcxLookAndFeelController is very simple: The following four screenshots show the different look & feels available under XP: .this change affects the view above as well. 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. Custom Draw Return Stylesheets & LookAndFeel should be the first places to go when customizing the EQGrid4 display. when the easy options do not provide quite enough control. as we will see below. This is where custom draw comes into its own. There can be times.NativeStyle=True Kind=lfUltraFlat Kind=lfFlat Kind=lfStandard Examine the horizontal scrollbars above.e. See Repository Considerations for additional information on how LookAndFeel relates to the repository facilities. Custom drawing is available at different logical levels and they will be covered in turn: grid (i. custom draw is defined as changes to the output display made by code executed via event handlers. however. For the purposes of this topic. however. to show the flexibility and power of the product and what is available when you are prepared to do a little more work. column for table view or row for card view) The following screenshots show the event handlers available to the TcxGrid itself: .e. the container 'decorations') view (table or card) item (i. but the object based architecture of EQGrid4 means that user and data related display changes can be made via other events also. It is necessary. as they show the differences most clearly in these reduced size screenshots. If you are new to our products or this is your first read of this paper. as it is impossible to cater for every circumstance. and EQGrid4 provides extensive facilities in this area. The bulk of this work will be done in handlers containing 'CustomDraw' within their names. you might prefer to postpone reading this section and skip to Runtime Customization. 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 . you may wish to display or hide a column depending on some external state. in master/detail display).Hmmm! Apparently not a good start. These object references provide access to the elements and properties available for events which affect the grid as a whole. as there is no custom draw in sight! However. note the assigned event handlers and the parameters highlighted above. For example.all types cyan .e. column for table views and row for card views): . when the focused view changes (e.g.table and banded table magenta .banded table only and card view only Similar events are available at the item level (i. reducing the height will result in a single row. First. The results of this can been seen in the following image. you are likely to be impressed by the instant drawing of the images as you scroll horizontally. . Also. see the effect of resizing the form .Now for some examples of custom drawing. 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). provided by the shipped demos. If you try this demo. 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. 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). Using an early pre-release version of the IssueList demo. the following was displayed: .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. Note the use of tvItemsSTATUS. 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!): . The Type and Priority columns are handled in a similar fashion (note the edrepItemType & edrepItemPriority entries in the top right screenshot above).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. . In order to produce the following screenshot: 1. 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.Runtime Customization Obviously. 3. 4. The next screenshot shows a column in the process of being moved from the grid's display (note the two columns already hidden): . 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. ease of use and design-time facilities available are important when developing using a grid control. 2. 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. For table views.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. 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. Column Moving and Resizing Return Using the example from the previous topic. Both pages are shown above to illustrate that the hidden Bands still own their columns (EQGrid3 users will appreciate this!). width constraints may affect the result. They also may be resized by dragging on a column header's vertical border: . Again. columns may also be moved via drag/drop of band or column headers. 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. Multiple grouping levels are supported and simple drag/drop allows the grouping hierarchy to be organized every which way: .yes. the Name column is being widened. sorting and filtering is available on grouped columns. resizing of card widths is done by dragging a vertical separator. Note the two icons on the State entry in the GroupBy panel . If you wish. For card views. Note that the column was automatically added to the Customization form.In the above example. the entry in that form can be dragged back to the column headers to display as a column as well as a group. 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. a filter dropdown via column headers: . i. Hold down the shift key while clicking on another header to sort by multiple columns: In the above example.e. The first click sorts in ascending order and subsequent clicks reverse the order.Column Sorting Return Table views may be sorted at runtime by clicking on column headers. 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. . As they are not shown above.. selecting (All) from the filter dropdown has the same effect.) from the dropdown invokes the Custom Filter Dialog.. These special rows depend on the data and (Custom. If the filter is by a single column. 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. In the example above.The dropdown filter displays the unique values held within the column plus special rows at the top.. This can be located at the top of the table view .) can be followed by (Blanks) and (NonBlanks) entries (if there are a mixture of blank/non-blanks). Selecting (Custom. 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. two columns affect the items displayed.. thus allowing more sophisticated filter criteria. 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). I want to describe a particularly cool runtime customization facility: .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. only enables the Count and None options. 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). drop a TcxGridPopupMenu component onto the form 2. indicating that the possible options relate to the type of the column. The Customer column. This property is plural as it also provides a context menu for column headers: This time. is the lack of effort involved in providing this runtime functionality! It merely requires two simple steps at design-time: 1. What will really surprise you about this. another demonstration of the high functionality/work ratio provided by this product.The above screenshot was produced by right-clicking on the Time column's footer. for example. . the right-click was performed on the Model column header and this belongs to a different View. you will see that I used the 'Group By Box' option to hide them from both views. Note that Sum and Average are disabled. though. If you compare this screenshot with the previous one. EQGrid4 provides an automatic MS Outlook style preview feature: .Preview Feature Return For table views. Here. I will describe the report designer specifically prepared for this product: Options available on the other four pages follow: .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). A complete description of EPS is outside the scope of this paper. and this is available as a separate product. but you may find some comprehensive white papers via the VCL Soapbox. a few modifications of the title and header have been made at runtime (via dialogs invoked by toolbar buttons). .The following two screenshots show the demo provided with the EPS followed by its Print Preview: In the above screenshot. please write to support@devexpress. See editor compatibility below EQGrid4 does not include a TreeList control (ExpressQuantumTreeList is a separate product). However. We have done our best to minimize the effects of this. there is no way that we can predict the way that these are being used. 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. 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. 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. But.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.e. our excellent dxsquad volunteers or ourselves (although we cannot always promise the latter. for EQGrid3 stand-alone editors (but not in-place) to be used together with EQGrid4. and includes the conversion of styles. but EQGrid3 customers should be aware of the following points : EQGrid3 and EQGrid4 can co-exist. as we are often extremely busy). the EQGrid4 help file contains a EQGrid3/EQGrid4 comparison of properties/methods/events and this makes this conversion process as painless as possible. if you still have difficulty in this or any other area.devexpress. We also offer an online support forum and this can be accessed via our website: http://www. our newsgroups may supply answers from other customers. 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. handle the conversion of event handlers. EQGrid4 can import a EQGrid3 control into a table view and this covers all except the conversion of your code. Editor Compatibility EQGrid4 is a cross-platform product and this presented us with a problem concerning the editors. please contact support@devexpress. the EQGrid3 conversion does the most. grouping and summaries. you may use EQGrid4's provider mode for showing/editing custom data. It is possible though.com and we will be pleased to help. Finally. they are RTF based (i. In EQGrid3. 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. The Import process cannot. however. If you have any problems converting existing controls.com. Incidentally. Unfortunately. if you prefer peer-to-peer support. so you can migrate at your own speed EQGrid3/EQGrid4 each have its own set of editors. inevitably backward compatibility could not be maintained. Instead. who will be pleased to help you. unbound and provider modes the design-time Import conversion facility . require a richedit dll) and this provided enhanced drag/drop and multiple undo/redo functionality.com. We could not use RTF for cross-platform and so this functionality is not provided by the new editors. In order to keep the product lean and mean (assuming that such a big product is entitled to be called lean). g. For example.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. 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. Note: when using any of the above routines. styles and grouping etc). The Export functions are included in the cxExportGrid4Link file: As you can see. you will also need to add a reference to cxExport within your uses statement. The AUseNativeFormat option for Excel can be set to True if you need the output to create native column types (e. Excel and Text outputs are restricted to a single view. all four formats allow limiting the export to expanded and/or selected rows. currency. Export to XML Return The XML format reflects most of the grid's display features such as master/detail. styles and grouping etc. date and time). The following image shows the data exported: . This provides a fairly .com). you can check it against the demo (i.Export to Excel Return This export format is restricted to a single level. Demo/Tutorial pairs are a new concept designed to get you up to speed with as little effort as possible. as they are moving targets. However. 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. 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. as a consequence. The following sections describe all the demos shipped with EQGrid4. one demo that you really shouldn't miss seeing is the Grid4Features demo. as there is no way of handling multiple views. These demos normally make use of our other products also. 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.e. See EditorsInPlace Demo & ConvertGrid3MasterDetail Tutorial for runtime and design-time examples respectively. Website demos are not included. The following image shows the data exported (with AUseNativeFormat option set to True): Export to Text Return As you might imagine. Once you have finished the tutorial (a word document provided in the project folder). See RichDemo for an example. the one we prepared earlier!). exporting in text format is very limited. so it was important for us to make this process as painless as possible and. just one view and any detail view is ignored.devexpress. 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.e. such as ExpressBars. Each tutorial consists of an almost completed demo. styles or grouping etc. i. Delphi 4 users will not be able to run them. but tend to be in the order we expect you will want to look at the demos. After this table. 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. . 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. 1 EditorsLookupDemo Shows the use as stand-alone editors and bound to a grid column. unfortunately. Four project groups have been provided: 1. Note: the demos below have been tested under D5. you will find further lists that allow you to see the composition of each group more easily. so Delphi 5 users need to have installed the Borland ADO Service Pack for them to work properly and. 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. but the demos make use of ADO datasets. Practice using lookup data-aware editors for reading and writing. D6 & D7.3 and F (feature demos). The first three groups are rather arbitrary. Master/Detail using grid views and showing various 1 ColumnsSimpleDemo column editors. They are EditorsInPlaceDemo 1 displayed using three tabbed card views. Demo List (alphabetically) Return The table below shows all the shipped demos in alphabetical order.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!). Experiment with various in-place column editors.2. 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 2 MasterDetailDemo 1 MasterDetailTableDemo 2 RichMemo F SQLBrowser F StylesCardViewDemo 1 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 1 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. FilterByCode Steps 10-13: Add new filter condition. Steps 11-15: un-comment and review code. 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. 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. row and different summary Steps 5-8: creating a summary details as a footer row group. Grid4FeatureDemosD6 or Grid4FeatureDemosD7. Steps 9-12: binding summary items to a group. Shows how to build complex Steps 1-9: Examine and activate filters in code. Provides options showing all aspects of using bands and column customization at runtime and the simple code required for this. SummaryGroup following its detail records. 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.e. 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. Data is loaded from Steps 6-10: examine methods. a bpg file) named Grid4FeatureDemosD5. a simple CSV file. User information is in a ViewBandedFixed fixed left band and summary/total details are fixed on the right. summaries SummaryGroupFooter Steps 14-17: uncomment and review code Steps 18-21: set up a built-in context popup menu. as appropriate. Displays group summary Steps 1-4: grouping data by information within the grouped columns. pre-built conditions.UnboundSimple Displays information about the Steps 1-5: set grid options solar system. Steps 13-14: linking columns to a group. 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. 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. An example of building and registering a descendant editor. now what do I do next?". Having chosen a database. RichMemo Note: before opening the main demo form. you should make a point of looking at the RichMemo feature demo. Examples EditorsInPlace Demo Return ConvertGrid3MasterDetail Tutorial RichMemo (feature demo) One example of each of a demo. 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. 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. so is useful in its own right. If you are interested in adding custom editors to EQGrid4 though. The demo using the editor displays all the tutorial doc file content. A feature demo showing how to display different query results in the grid at runtime. A chance to see the grid in action and to apply your own touches to a useful utility application. its tables and fields are displayed in a SQLBrowser hierarchy within a grid control. therefore.Demo IssueList Description An example of using several grid controls to manage a popular type of application. the package supplied must be installed first. This provides an RTF (rich text format) editor and the topic covers compiling and installing it to your component palette. All the demos. It provides the facility to display RTF data in the grid. a pretty form. tutorial and feature demo have been chosen to illustrate common facilities. The main objectives when producing these demos were to provide simple examples of specific features and to avoid questions such as "OK. share a common look & feel and contain a descriptive title referencing the 'About' form: All the demos have an Options menu: . g. The tutorial starts by adding a TcxGrid control: . To finish this topic. Note how the cards have adjusted automatically to a single row because of the form's height reduction. a couple of examples of in-place editors in action: ConvertGrid3MasterDetail Tutorial Return The rest of the above document (e.doc) will be displayed in sections between screenshots and commentary.\ExpressQuantumGrid 4\Delphi 6\Tutorials\ConvertGrid3MasterDetailDemo\ConvertGrid3MasterDetailDemo.The 'Show Demo Description' (now unchecked compared with the previous screenshot) and the 'Grid Look&Feel' menu items are common to all demos.. in . the master grid is imported to the existing cxGrid1Level1: As the tutorial says. 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 view has been populated: .At this point. as the picture editor defaults to TBitMap. it looked like this: The master table contains a column displaying a JPEG image and.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. there is a little bit of work required to correct this: . 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. Adding the detail view is quite similar. Two group rows were expanded and the cxStyleRepository1 icon (created by the Import process) was moved from the top left corner of the form. so the tutorials were modified to fail gracefully in those circumstances. 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. Thus.It is worth noting that the conversion covers all group and footer summaries: Next. the final steps for all the tutorials is to un-comment code and comment-out the initial warning ShowMessage: . . provided that all the steps have been followed accurately.. No matter how many we provide.The tutorial may now be compiled and executed and. the demo can be compiled and run: ... The RichMemo demo contains an example of such a custom editor. however. Before opening the RichMemoMain form though. it should provide the same results as the completed demo provided. 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. 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).. it is necessary to install the custom editors in your IDE: Once the following two components are installed .. there will never be enough and so we have built an architecture which makes the creation and installation of editors a very easy process. . and don't forget the "Wow!" factor. The significant points covered include: fast. grouping.com) . fast a single solution to all grid needs . Mike Orriss ([email protected]/detail and unbound included cross-platform (Delphi. filtering & sorting) export in XML. fast. 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. HTML. Excel or Text format full source available comprehensive help file plus many demos/tutorials printing support via the ExpressPrinting System (available separately) Enjoy.Summary This paper has presented an introduction to the ExpressQuantumGrid version 4 product.