Documents

NextGrid & NextDBGrid

NextGrid

NextDBGrid

NextInspector

NextSheet

NextCollection

Misc

Labs

NextGrid .NET

NextGrid Quick Start

Related Articles:

Info
  • Skill:
  • Version: 1.0.0
  • Author: Bojan Nikolic
  • Created:
  • Updated: 2008-04-21
This article will learn you how to work with NextGrid (in both Design-time and Run-time) very quickly.

We recommend to check our next movie: Play Design Time Tutorial.

Design-time quick start



Placing component on form



Click on Berg tab on Component Palette.



Click on Next Grid component Icon and then click on Form. Component will be placed on form.

Working with Next Grid in Design-time is very easy with using build-in Columns Editor. With using Columns Editor you can add, move, delete Columns, set properties, add events very quickly.

To start with adding columns into Next Grid simply double click on component to open Columns Editor, or click on ... button beside Columns property in Object Inspector, or chose "Columns Editor" from pop-up menu.



Manage Columns



When Columns Editor is opened, we can start with adding Columns. To add column, click on one of buttons on top of the Editor.



Columns are grouped into 2 categories (similar to Delphi Component Palette) and they may be changed by simple click.

Table 1: Column types
Icon Meaning
Text Column. Displays standard text with some formating rules.
Image (Icon) Column. Displays Image from ImageLists using Cell's value as ImageIndex for Image.
Number (Float) Column. Displays number with applied FormatMask formating. Inplace editor include spin buttons.
CheckBox Column. Displays checkbox unchecked on checked depending from Cell's AsBoolean value.
Combobox Column. Contain InplaceEditor with Items which may be picked from drop-down list. Value is stored as string into cell. New value may be typed too.
List Column. Contain InplaceEditor with Items which may be picked from drop-down list. Value is stored as Integer who presents ItemIndex of selected item.
Date Column. Contain InplaceEditor with "DatePicker" which may be used for picking new date.
Time Column.
Memo Column. Contain InplaceEditor which provide multi-select typing text. Scrollbars may be shown or hidden.
Button Column. Contain InplaceEditor with separate button who trigger OnButtonClick event. Glyph or Caption on button also may be set.
Increment Column. Display number of each row starting from 1.
Progress Column. Display progress bar in various styles and colors based on Cell's value. Min, Max properties also may be set..
Rating Column. Display ratings (starts...) based on Cell's Ingteger value. Glyph and EmptyGlyph may be set.
Calc Column. Numeric column which include Calculator drop-down control for easy input.
Html Column. Draw simple html layout text based on Cell's value. Also include OnClick event for responds on "a" tag clicks.
Picture Column. Draw TGraphic object (Bitmap, Jpeg, Icon...) attached to ObjectReference property of Cell.
Tree Column. Draw , signs allowing user to set Expanded[ ] property of row, collapse or expand rows in run-time.
Virtual Column. Doesn't store value into memory, instead it use OnGetText and OnSetText events to manage data "virtually".
Guid Column. When new row is added, cell within Guid Column automatically add GUID key.


Column may be easily converted to another column type by righ-clicking on column within Columns Editor and chosing item from "Convert To" sub-menu:



Column may be deleted by clicking on column inside Columns Editor and then click on icon.

Column postions may be changed by simply dragging columns with Columns Editor.

Configuring Columns



One of most importand property of each column is Name property. After column is added, this property is automatically set to some name but it may be changed into something like colMyColumn. Later in code column may be accessed by using column name.

Some of columns are editable (such as Text, Number... columns). To enable editing column set coEditing flag in Options property to True.

After this flag is set next icon will appear beside Column's name:



After double-click on this icon editing will change state.

Important properties are also Width which specify column width. By setting coFixedSize flaf to False with Options property column will be fixed size.

Column's header and footer owe own sub-properties with own properties: Header and Footer.

Run-time quick start



Working with rows



Working with Next Grid in run time is much more easy than working with ListView or StringGrid.

After columns are added and configured withing Columns Editor, rows may be added.

Row can be added with using AddRow() method. After calling this method, each column will get one new empty cell at the end, and you will have one new row in you Grid. This method set LastAddedRow property which may be useful in many situations.

If you like to add more rows in same time use:

AddRow(RowCount);

begin
  NextGrid1.AddRow; // Add single row
  NextGrid1.AddRow(4); // Add 4 rows
  NextGrid1.AddRow(10000);


{
  NextGrid1->AddRow; // Add single row
  NextGrid1->AddRow(4); // Add 4 rows
  NextGrid1->AddRow(10000);


Also, AddCells method for adding several Cells with Values at once. This method will add as many new rows as needed to add all cells.

NextGrid1.AddCells(['Mike', '23', 'True', 'Lisa', '178', 'False']);


NextGrid1->AddCells(["Mike", "23", "true", "Lisa", "178", "false"]);


Inserting new row at specific position may be done with InsertRow method. This method also set LastAddedRow property.

InsertRow(Pos);

Deleting row is done with:

NextGrid.DeleteRow(RowIndex);

Property RowCount return how many rows are total in grid. Setting this property (since this is read-write property) to value lower than current end rows will be deleted, otherwise new rows will be added.

Working with cells



In Next Grid each Cell is a object with own properties and methods.

Acces to a single cell is done by Cell property. Cell property is a 2 dimensions array property. ColumnIndex and RowIndex must be specified in order to access cell.

NextGrid1.Cell[4, 3].AsString := 'test';
NextGrid1.Cell[4, 5].Color := clRed;


NextGrid1->Cell[4, 3]->AsString = "test";
NextGrid1->Cell[4, 4]->Color = clRed;


Each Cell own Value, Color, Hint Text properties.

Setting Hint is done:

NextGrid1.Cell[1, 1].Hint := 'Cell Comment';


NextGrid1->Cell[1, 1]->Hint = "Cell Comment";


Setting, or determing value of cell is done by these properties:

Name Meaning
AsBoolean Specify, Determine Boolean value of Cell
AsDateTime Specify, Determine TDateTime value of Cell
AsFloat Specify, Determine Double value of Cell
AsInteger Specify, Determine Integer value of Cell
AsString Specify, Determine string value of Cell. Equal to Cells property.


Examples:

Cell[4, 2].AsFloat := 3.4;
Cell[4, 2].AsDateTime := Now();
Cell[4, 2].AsBoolean := False;
Cell[4, 2].AsString := 'This is Cell Value'; 


Cell[4][2]->AsFloat = 3.4;
Cell[4][2]->AsDateTime = Now();
Cell[4][2]->AsBoolean = false;
Cell[4][2]->AsString = "This is Cell Value"; 


Property Cells is also multi-dimensional property and it is equialent to Cell[Col, Row].AsString property.

NextGrid1.Cells[2, 2] := 'Cell Text';


NextGrid1->Cells[2, 2] = "Cell Text";


Any .As property for any Column type, it is important to remember that you non-numeric value can't set to numeric column types, and invalid date (in invalid format) using AsString for TNxDateColumn can't be set.

Examples for CheckBox Column:

Cell[5, 1].AsBoolean := True; // correct
Cell[5, 1].AsString := 'True'; // correct
Cell[5, 1].AsString := 'Yes'; // incorrect


Examples for Image Column:

Cell[5, 1].AsInteger := 6; // correct
Cell[5, 1].AsFloat := 6; // correct
Cell[5, 1].AsString := '6'; // correct
Cell[5, 1].AsString := 'six'; // incorrect


Also, Numeric Column types (TNxNumberColumn, TNxImageColumn, TNxRateColumn...) are most optimized for using AsInteger property for setting Value; Date column is most optimized for using AsDateTime; CheckBox Column for using AsBoolean;

Was This Article Useful?

Comments

2009-06-12 03:34:48

I was hoping to learn how to change the color of the text in the cell, not the background color. If I change the font color when I write to a cell the font color for the whole grid changes.

2009-06-12 10:10:23

Hi,

You may use OnCellFormating event. This event having a "var" parameters TextColor and FontStyle.

You may read ACol and ARow parameters and then set this 2 params. Example:

if ACol = 1 then TextColor := clRed;

Best regards

2009-07-19 05:03:02

i was hoping to learn how to print a selection of rows of a nextgrid using a sql request (adodataset)

2009-09-10 07:05:16

I think it'd be useful to add a method or property to paint a row in a given color, and avoid having to loop through all the cells of a row using either Cell[].Color or in the OnCellColoring event, eg.

Row[index].Color := clRed;

2009-09-10 10:49:30

Hello,

I will need to think about adding this feature, but unfortunatelly I am not sure that I will add it.

Best regards

2009-10-30 05:28:27

Hello. Could you please tell me if it is possible to disable a checkbox (or a cell)? I need to be able to prevent a user from changing the state of a checkbox in one of my applications. Regards, Pieter.

2010-01-23 23:05:49

How do i prevent a column from being sortable?

2010-01-24 02:03:32

Hello,

Set coCanSort flag in Options property to False.

I hope that this helps.

2010-03-11 03:19:47

Greetings!

Mr. Berg,
could you update nextdbgrid, and make it recognise short-boolean values(0- false;1-true)?
It would be really helpful.

thanks!

2010-03-11 13:20:12

Hello,

All you need is to add Checkbox column and then set ValueChecked to 1 and ValueUnchecked to 0.

I hope that this helps.

Best regards

2011-01-27 12:01:34

Greetings.

It would be useful if we can show image plus text in a cell. right now we can have image or text.

Thank you for your awesome components.
Only constructive comments, code contributions... will be publishes. Questions, non-official discussion will not be published.