Documents

NextGrid & NextDBGrid

• FieldChooser Tutorial
• NextGrid How To
• InputLine Tutorial
• Html Column Tutorial
• NextGrid Slide Style Tutorial
• Edit events in NextGrid

NextGrid

• NextGrid Quick Start
• Graphic Column Tutorial
• Optimize NextGrid
• Custom Draw in NextGrid
• VirtualColumn Tutorial
• NextGrid Custom Sorting
• TreeColumn Tutorial

NextDBGrid

• NextDBGrid Events
• NextDBGrid Quick Start
• LookupColumn Tutorial

NextInspector

• NextInspector Item Types
• NextInspector Quick Start
• NextInspector Advanced tutorial
• Map VCL property to item

NextSheet

• Formating in NextSheet
• NextSheet Quick Start

NextCollection

• NxInfoPanel Tutorial
• NxOutlookBar Tutorial
• NxPathControl and NxNotebook tutorial
• NxPathControl Quick Start
• NxButton Tutorial
• NxFlipPanel and NxHeaderPanel Quick Start
• NxPageControl and NxNotebook Quick Start

Misc

• DateTime FormatMask
• NxComboBox styles
• NxPreview Quick Start
• Numeric FormatMask
• Enable typing unicode characters in InplaceEditors
• 32bit Bitmaps Tutorial

Labs

• NxReport Project

Related Articles:

NextInspector component is ObjectInspector component written from scratch and with much more features and attractive look.



Work with NextInspector is done in 2 modes:

1. Design-time with help of built-in NextInspector
2. Run-time with easy to learn functions and properties just as in TTreeView from Delphi.

1. Design-time quick start

Click on "Next Suite" Tab inside Components Palette/Toolbox and find NextInspector icon:



Double click on it and new component will be placed on form.

After component is placed on form, we may do first adjustments. Some of them are:

Style - Specify "look and feel" of NextInspector. Value may be psDefault, psOffice2003, psOffice2007 (with support for color schemes), psWhidbey (Visual Stydio appearance). Depending you personal style or application style you may chose one by simply goin trough all and testing. Much other elements may be customized such as margin, grid line, selection color, Item's Font...

MarginColor - Color of most-left part of NextInspector. When set to some of styles above, and iaStyleColors flag in AppearanceOptions, color will be automatically set. Best choice for many situations.

GridColor - Specify grid-lines color. It work similar to MarginColor property, it adjust to the current style if iaStyleColors flag in AppearanceOptions is set.

SelectionColor - Specify color of selection. Default value is same as selection-color in Windows. It is important to note that when some styles are chosen (such as psOffice2007 this property will be ignored, but no worry this will give more consistent look to whole application.

We will back on other properties after.

2. Using Items Editor

Items Editor is special window builded for easy adding, managing and configuring items within NextInspector. Very similar to any design-time editor in Delphi. To open it right-click on component:



and pick "Items Editor...". Items editor will open. You may also double-click on component, or chose "..." beside Items property.



By clicking on buttons new item will be added as child item of currently selected item in editor. If you select item, you will be able to set properties of them within ObjectInspector. You may also drag & drop items within "Items Tree", delete them by clicking on icon, or clear all Items.

You may also notice (Root) item at the top of the Item's hierarchy. This is some kind of "virtual" item and can't be deleted, but helps to add real root items "categories" into NextInspector.

For full list of all items (with screenshots) please read NextInspector Item Types

3. Important properties for Item

Most important property for each item is Name. By setting this property you are able to use name of this item in run-time and directly access to item:

myItem.Caption := 'My simple item';

myItem->Caption = "My simple item";

This approach is best for some very important Item which need to be set or read often.

Another 2 most important properties are Caption and Value.

Caption property specify Item's title. It is WideString.

Value property specify or determine Item's value. It may be set by code, or by editing item with Inplace Editor.

ImageIndex is set, image from NextInspector's Images property (TImageList) will be displayed beside caption:

4. Run-time quick start

Working with NextInspector in run-time is very similar as working with Delphi TTreeView and TTreeNode objects.

4.1. Accessing items

As NextInspector is some kind of tree component, it introduce Items array property by accessing single item (node - TNxPropertyItem) with they absolute index.

NextInspector1.Items[5].Value := 'some value';

NextInspector1->Items[5]->Value = "some value";

Here we may use typecasting and access to some item-type specific properties.

TNxSpinItem(NextInspector1.Items[2]).SpinButtons := False;

or

(NextInspector1.Items[2] as TNxCheckBoxItem).FlatStyle := True;

4.2. SelectedItem property

Very important property of NextInspector is public property SelectedItem. This property indicate which item is currently selected:

NextInspector1.SelectedItem.Value := '3';

NextInspector1->SelectedItem->Value = "3";

4.3. Value property of item

Value property is key property of every ObjectInspector. It keeps values that we may read them later. We may also use AsString, AsInteger... properties for reading values, but for this read next a little bit advanced article.

More info about working with NextInspector in run-time in NextInspector Advanced tutorial

5. More properties of NextInspector

Options property contains flags for fine tuning NextInspector appearance and working.

Table 1: Options property flags

Name	Meaning
poGrid	Show/Hide grid lines. Splitter (Divider) remains visible even if this flag is False.
poEnterSelectNext	Next item will be selected after user press Enter key.
poSplitterMoving	When set to False moving splitter will be disabled.
poImages	reserved for future
poUniformSelect	When set to False holding mouse button and moving it it will select new item, just as in Delphi.

Images - Specify TImageList which will be used to drawn image beside item when ItemIndex is set.

CollapseGlyph and ExpandGlyph specify glyps used to draw and buttons.

SplitterPosition - Specify position of vertical Caption/Value divider line.

RowHeight - Specify height of each item. Example: