TWebDBGrid Custom Drawing

WEB TMS WEB Core
1

Hi,

I need custom drawing for TWebDBGrid, to draw each cell/row in different color and background, as with TDBGrid.

Please advise,

2

Me too! :)

3

TWebDBGrid descends from TWebStringGrid, so what is in the doc for TWebStringGrid applies for TWebDBGrid too:

https://download.tmssoftware.com/doc/tmswebcore/components/twebstringgrid/

Add a cell with custom drawing

This code snippet adds a custom drawing element to cell 2,2 and performs a custom drawn line from top/left corner to bottom/right corner

procedure TForm1.WebButton1Click(Sender: TObject);
var
  ACanvas: TCanvas;
  el: TJSHTMLCanvasELement;
begin
  webstringgrid1.AddCanvas(2,2);
  el := webstringgrid1.GetCanvas(2,2);
  ACanvas := TCanvas.Create(el);
  ACanvas.MoveTo(0,0);
  ACanvas.LineTo(webstringgrid1.ColWidths[2]-1,webstringgrid1.RowHeights[2]-1);
  ACanvas.Free;
end;
1 Like
4

Hi Bruno,

First, I see that it descends from TWebDBGrid = class(TCustomGrid).
My need is to draw each line/column in a color according to the content.
In VCL I do it with the two paint events, for background, and draw.

Please provide example how I can do it with TWebDBGrid, as I do not understand from the code you provided how to do it. You show how to add line on the existing content.

Many thanks,
Chen

5

It was not clear from your description that you just needed value dependent cell coloring.
If you use the demo Demo\Basics\DBGrid and add CSS in main HTML file

    <style>
    .red { background-color: red;}
    </style>

and then event handler

procedure TForm1.WebDBGrid1GetCellClass(Sender: TObject; ACol, ARow: Integer;
  AField: TField; AValue: string; var AClassName: string);
var
  v,e: integer;
begin
   if (acol = 3) then
   begin
     val(AValue, v, e);
     if v > 200 then
     begin
       AClassName := 'red';
     end;
   end;
end;

all cells in this column with value > 200 will be red

1 Like
6

This solution is fine when I know in advance the possible color combinations.
In my application the grid display events table, each event has text color and background color according to user customized event types.

Is there a more flexible solution instead of using CSS for it? Is it possible to dynamically add/update CSS styles?

Thanks,

7

You can use the CSSCodeManager or you can create new instances of TWebCSSClass to dynamically insert CSS.