Next Generation Data Grid for Delphi: Template

[Sascha]

Intro

If you’re developing in Delphi and looking for a powerful, flexible, and highly customizable data grid solution, then

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

is the perfect choice. In this blog post, we'll delve into how the grid can be leveraged to present data in an interactive, customizable, and aesthetically pleasing way. Whether you're building an enterprise-level application, a desktop app, or a web-based solution, the TMS FNC Data Grid is equipped with robust features designed to enhance the user experience and make data interaction seamless.

Template

To make the Data Grid visually attractive, there are several techniques and features that can be leveraged. The Data Grid provides a wide array of customization options to enhance the visual appeal of your application while maintaining functionality. Here are some ways to improve the aesthetics of your data grid:

Global Font & Appearance


To apply a global font-scale and fixed layout style to the entire TMS FNC Data Grid, you can use code that sets the font properties and layout configurations for all cells in the grid. This ensures a consistent appearance across the grid, regardless of the data or specific cell properties. Below is an example code snippet that demonstrates how to apply these settings:


TMSFNCDataGrid1.GlobalFont.Scale := 1.2;
TMSFNCDataGrid1.CellAppearance.FixedLayout.Font.Style := [TFontStyle.fsBold];

Column Appearance


If you need to modify the appearance of a specific column, this can be done by adjusting properties at the column level. At design-time, simply set the properties under the Appearance section. However, at runtime, an additional setting is required to ensure the grid applies the column-level settings.


TMSFNCDataGrid1.Columns[0].Appearance.FixedLayout.Fill.Color := gcRed;
TMSFNCDataGrid1.Columns[0].AddSetting(gcsAppearance);


Cell Appearance


Even at cell level, we can modify the appearance.


TMSFNCDataGrid1.Layouts[3, 3].Fill.Color := gcRed;


Customized Drawing


Last but not least, want to give the grid, a specific column or cell a unique look & feel. Want to display additional data or visualize that in a special way, then custom drawing is what you need. The code below demonstrates how to draw a progressbar, customized text and change the font color based on the value. Additionally, it shows how to include or exclude various parts of the cell before it is being drawn.


procedure TForm1.TMSFNCDataGrid1AfterDrawCell(Sender: TObject;
AGraphics: TTMSFNCGraphics; ACell: TTMSFNCDataGridCell);
var
txt: string;
r: TRectF;
v: Integer;
s: Single;
begin
if (ACell.Column = 3) and (ACell.Row > 0) then
begin
AGraphics.Stroke.Kind := gskNone;

txt := TMSFNCDataGrid1.Strings[ACell.Column, ACell.Row];

r := ACell.Rect;
InflateRectEx(r,-10,-10);

if txt = 'On Leave' then
AGraphics.Fill.Color := $FFEF5A5A
else if txt = 'Flight' then
AGraphics.Fill.Color := $FFF0C531
else if txt = 'Abroad' then
AGraphics.Fill.Color := $FF587EE6
else if txt = 'Office' then
AGraphics.Fill.Color := $FF9BEC96;

AGraphics.DrawRoundRectangle(r);

AGraphics.Font.Color := gcWhite;
AGraphics.DrawText(r, txt, False, gtaCenter, gtaCenter);
end;

if (ACell.Column = 4) and (ACell.Row > 0) then
begin
txt := TMSFNCDataGrid1.Strings[ACell.Column, ACell.Row];
if txt <> '' then
v := StrToInt(txt)
else
begin
v := 0;

r := ACell.Rect;
InflateRectEx(r, -6, -10);

AGraphics.Fill.Color := $FFDDE8FE;

AGraphics.DrawRoundRectangle(r, 3);

s := r.Width * (v / 100);

if s < 5 then
s := 5;

r.Right := r.Left + s;

AGraphics.Stroke.Kind := gskNone;
AGraphics.Fill.Color := $FF8DB7FB;
AGraphics.DrawRoundRectangle(r, 3);
end;
end;

if (ACell.Column = 5) and (ACell.Row > 0) then
begin
if TMSFNCDataGrid1.Strings[4, ACell.Row] = '100' then
AGraphics.Font.Color := $FF5BC659
else
AGraphics.Font.Color := $FFCD3524;

AGraphics.DrawText(ACell.TextRect, '&#128; ' + TMSFNCDataGrid1.Strings[ACell.Column, ACell.Row], False, gtaTrailing, gtaCenter, gttNone);
end;
end;

procedure TForm1.TMSFNCDataGrid1BeforeDrawCell(Sender: TObject;
AGraphics: TTMSFNCGraphics; ACell: TTMSFNCDataGridCell;
var ACanDraw: Boolean);
begin
if (ACell.Column = 3) and (ACell.Row > 0) then
ACell.DrawElements := ACell.DrawElements - [gcdText];

if (ACell.Column = 4) and (ACell.Row > 0) then
ACell.DrawElements := ACell.DrawElements - [gcdText];

if (ACell.Column = 5) and (ACell.Row > 0) then
ACell.DrawElements := ACell.DrawElements - [gcdText];
end;


Applying the Template


As a sample, we've changed the Biolife ClientDataSet demo and applied the template.

Download

Go ahead and download both the template and the Biolife ClientDataSet demo with the template applied.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Conclusion


TMS FNC Data Grid offers powerful customization options, allowing you to modify the look and feel of the entire grid or individual columns. At design-time, you can easily adjust properties under the Appearance section, while at runtime, additional settings ensure column-specific styles are applied. These features enable you to create visually appealing and highly personalized data grids for your applications. TMS FNC Data Grid is part of the

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.