Display a cell or row of a TUniDBGrid in a different style

[cdev]

Hi,

 

I want the selected row/cell in a TUniDBGrid to be displayed in a particular way.

I have found that this can be done with this code:

.x-grid-row-selected .x-grid-cell-inner {
    font-weight: bold;
    background-color:red;
}

Where should this be entered ? 

I guess in the UniEvents-property of the UniDBGrid, but there I can select Ext.grid.Panel, Ext.data.Store, Ext.selection.CellModel,  Ext.selection.RowModel, Ext.selection.ChekboxModel and Ext.toolbar.Paging.  And in what event should I put this code ?

Thank you

[x11]

ServerModule.CustomCSS

[x11]

in MainModule

 

procedure TUniMainModule.LoadScriptCSS;
begin
  if upMobile in UniMainModule.UniPlatforms then
  begin
    UniSession.AddJS('Ext.Loader.loadScript("/files/' + cCSSDir + 'custommob.css")');
  end;

  if upDesktop in UniMainModule.UniPlatforms then
  begin
    UniSession.AddJS('Ext.Loader.loadScript("/files/' + cCSSDir + 'custom.css")');
  end;
end;


procedure TUniMainModule.UniGUIMainModuleBeforeLogin(Sender: TObject; var Handled: Boolean);
begin
  LoadScriptCSS;
...
...
end;

 

[cdev]

Thank you for your fast answer.  But I guess your solution is for all grids in my application.  I just want this behaviour for one specific grid.  How do I do this for only one grid ?

[x11]

then add class with any name (for example MySpecGrid) to specific grids

and add this class to CSS:

.MySpecGrid .x-grid-row-selected .x-grid-cell-inner {
    font-weight: bold;
    background-color:red;
}

 

[cdev]

That's nice !  I didnot know this LayoutConfig.cls property: very interesting.

Unfortunately, this did not do the trick.  I want the color of the selected row to be painted in red.  But with this CSS-code this is not working.

Do you have an idea how I could change this blue selected row color in for example red ?

[x11]

9 minutes ago, cdev said:

I want the color of the selected row to be painted in red. 

use event OnDrawColumnCell

 

 Attribs.Color

Attribs.Font.Color

 

 

Attribs.Style.Cls := 'myDelCell';// custom.css - for cell border

CustomCSS^

.myDelCell {
	border-top: 1px solid red !important;
	border-bottom: 1px solid red !important;
}

 

[fraxzi]

Hi,

 

it didn't work as expected.

 

[irigsoft]

2 hours ago, fraxzi said:

Hi,

 

it didn't work as expected.

 

Hi,

try it like this in CSS:

.myDelCell {
        background-color:red !important;
	border-top: 1px solid red !important;
	border-bottom: 1px solid red !important;
}

[fraxzi]

Hi Irigsoft,

 

Same result.

 

Thanks,

Frances

[irigsoft]

Try this:

/*color selected row*/
.DBG .x-grid-item-selected .x-grid-cell {
      font-weight: bold!important;
     background-color:red!important;
    }
 

Happy hollidays

[fraxzi]

On 12/26/2020 at 5:20 PM, irigsoft said:

Try this:

/*color selected row*/
.DBG .x-grid-item-selected .x-grid-cell {
      font-weight: bold!important;
     background-color:red!important;
    }
 

Happy hollidays

Hi Irigsoft,

 

Same result.

On 12/26/2020 at 5:20 PM, irigsoft said:

Try this:

/*color selected row*/
.DBG .x-grid-item-selected .x-grid-cell {
      font-weight: bold!important;
     background-color:red!important;
    }
 

Happy hollidays

 

Hi.

Testing with 1.90.0.1542 on "uni_carbon_triton" theme.

still not working.

 

Happy Holidays! 

 

Thanks,

Frances

[fraxzi]

Hi Irigsoft,

 

It works! after "Full Build" weird but it works.

[irigsoft]

Hi, I'm glad if it really helped you.

Is important to know that is on custom CSS on Server side.

On 12/19/2020 at 12:11 PM, x11 said:

ServerModule.CustomCSS

 

[jahlxx]

Hi.

 

How can I change font type ans size of dbgrids?

I'm trying this in custom css, with no success:

.x-grid-cell-inner {
   font: normal 12px arial;
}

How can I do it?

Thanks.

 

[Sherzod]

5 minutes ago, jahlxx said:

How can I change font type ans size of dbgrids?

Hi,

Have you tried using OnDrawColumnCell event?

[jahlxx]

Yes, and works, and I use it for some cases, but as default I'd like to put a font type, size, style, ...

I have to do it vor every grid in the application?

Is not possible to do it with CSS?

 

Thanks.

[irigsoft]

24 minutes ago, jahlxx said:

Hi.

 

How can I change font type ans size of dbgrids?

I'm trying this in custom css, with no success:

.x-grid-cell-inner {
   font: normal 12px arial;
}

How can I do it?

Thanks.

 

If You use !important ?

.x-grid-cell-inner {
   font: normal 12px arial !important;
}

[Sherzod]

21 minutes ago, jahlxx said:

.x-grid-cell-inner {
   font: normal 12px arial;
}

It may not always work. Because this rule can be overridden by another rule which is used by the theme.

By the way, this rule works for the classic theme.

[jahlxx]

Ok. Thanks. It works.

 

[jahlxx]

The only problem is that the style is applied to treeviews too.

Can be solved ?

Thanks.

[Sherzod]

1 minute ago, jahlxx said:

The only problem is that the style is applied to treeviews too.

???

You need to use cls, something like this:

 

[jahlxx]

Ok. For example, in  custom CSS:

.MyTree .x-grid-cell-inner {
    white-space: nowrap !important;
      border-bottom: 0px solid black !important;
      border-right: 0px solid black !important;
}

.x-grid-cell-inner {
    white-space: nowrap !important;
      border-bottom: 1px solid black !important;
      border-right: 1px solid black !important;
}

To the treeview, assign the cls MyTree, and left blank in all other grid in the application.

The tree is without lines, and all the grids, are with lines.

With this, I only modify the exceptions, bnot all the grids.

Thanks.