How To Change The Background And Font Colour Of the GroupHeader Property For TUniDBGrid's Column?

[Frederick]

Is there a property that allows me to set the background and font colours of the the GroupHeader property of the TUniDBGrid column?

--
Frederick
(UniGUI Complete - Professional Edition 1.90.0.1572)
 

[Sherzod]

12 minutes ago, Frederick said:

Hello,

If all columns should have the same bg color, then you can try using "customCSS".

[Frederick]

I am currently using the following code to change the column title colours:-

    grdGrid.Columns[0].Title.Color:=clYellow;
    grdGrid.Columns[0].Title.Font.Color:=clBlack;
    for nI := 1 to grdGrid.Columns.Count-1 do begin
        grdGrid.Columns[nI].Title.Color:=clGreen;
        grdGrid.Columns[nI].Title.Font.Color:=clWhite;
    end;

How do I access the last 2 column's GroupHeader?

[Sherzod]

I will check. 

[Frederick]

Ok. Thanks.

[Sherzod]

On 9/28/2023 at 12:10 PM, Frederick said:

Case 1:

 

Case 2:

[Sherzod]

Also considering FontColor:

[Sherzod]

One possible solution:

function afterlayout(sender, layout, eOpts)
{
    function getAllHeaders(column, headers) {
        if (column.ownerCt && column.ownerCt.isColumn) {
            headers.push(column.ownerCt);
            getAllHeaders(column.ownerCt, headers);
        }
    }

    sender.getColumnManager().getColumns().forEach(function(col) {
        var headers = [];
        if (col.isSubHeader) {
            getAllHeaders(col, headers);
            //col.hoverCls = 'customHover';
            headers.forEach(function(header) {
                if (header.titleEl.getStyle('background-color') == 'transparent') { 
                    header.titleEl.setStyle('background-color', col.titleEl.getStyle('background-color'));
                    header.titleEl.setStyle('color', col.titleEl.getStyle('color'));
                    //header.hoverCls = 'customHover';
                }
            })
        }
    })
}

 

[Frederick]

Works great. Thank you!

[Frederick]

This is a follow-up to the solution above.

If you see the screenshot attached, when the grid does not have data, the group title's background and font colour does not change.

However, once data is present in the grid, the JS code above works.

How do I fix this?

Note: This is with UniGUI 1.95.0.1577.

[Sherzod]

10 minutes ago, Frederick said:

If you see the screenshot attached, when the grid does not have data, the group title's background and font colour does not change.

Hello,

Are you sure?

[Frederick]

Yes

[Sherzod]

I will try to check. 

[Frederick]

Thanks

[Sherzod]

On 12/29/2023 at 5:06 PM, Frederick said:

If you see the screenshot attached, when the grid does not have data, the group title's background and font colour does not change.

Hello,

One possible solution:

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with UniDBGrid1 do
    if (not Assigned(DataSource)) or (DataSource.DataSet.IsEmpty) then
      JSInterface.JSCall('getStore().load', [])
end;

 

[Frederick]

Unfortunately, the above does not work.

[Sherzod]

6 hours ago, Frederick said:

Unfortunately, the above does not work.

Also you should add the condition "not DataSet.Active".

[Frederick]

I have added the above condition as follows:-

   with UniDBGrid1 do begin
      if (not Assigned(DataSource)) or (DataSource.DataSet.IsEmpty) or (not DataSource.DataSet.Active) then
         JSInterface.JSCall('getStore().load', []);
   end;

and condition 2 is triggered but the JS call is not doing anything.

[Sherzod]

16 hours ago, Sherzod said:

TMainForm.UniFormReady

Are you using this event? 

[Frederick]

Yes

[Sherzod]

If possible, can you make a simple testcase? 

[Frederick]

Sure. I'll create and upload it here if the problem persists.

[Sherzod]

Ok, please attach, I will try to check. 

[Frederick]

Here is the testcase. Interestingly, regardless of whether it is a clientdataset or SQLite as the datasource for the grid, the group title's background does not change.

Note: I use PostgreSQL as the database and the group header shows correctly when there is data but not when there is none.

gridhdr2.7z

[Sherzod]

1 hour ago, Frederick said:

gridhdr2.7z 2.18 MB · 0 downloads

Please be attentive!

You are making a mistake in the afterlayout function, I have corrected.

function afterlayout(sender, layout, eOpts)
{
//  function afterlayout(sender, layout, eOpts)
//{
    function getAllHeaders(column, headers) {
        if (column.ownerCt && column.ownerCt.isColumn) {
            headers.push(column.ownerCt);
            getAllHeaders(column.ownerCt, headers);
        }
    }

    sender.getColumnManager().getColumns().forEach(function(col) {
        var headers = [];
        if (col.isSubHeader) {
            getAllHeaders(col, headers);
            //col.hoverCls = 'customHover';
            headers.forEach(function(header) {
                if (header.titleEl.getStyle('background-color') == 'transparent') { 
                    header.titleEl.setStyle('background-color', col.titleEl.getStyle('background-color'));
                    header.titleEl.setStyle('color', col.titleEl.getStyle('color'));
                    //header.hoverCls = 'customHover';
                }
            })
        }
    })
//}

}