cdev Posted December 19, 2020 Share Posted December 19, 2020 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 Quote Link to comment Share on other sites More sharing options...
x11 Posted December 19, 2020 Share Posted December 19, 2020 ServerModule.CustomCSS Quote Link to comment Share on other sites More sharing options...
x11 Posted December 19, 2020 Share Posted December 19, 2020 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; 1 Quote Link to comment Share on other sites More sharing options...
cdev Posted December 19, 2020 Author Share Posted December 19, 2020 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 ? Quote Link to comment Share on other sites More sharing options...
x11 Posted December 19, 2020 Share Posted December 19, 2020 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; } Quote Link to comment Share on other sites More sharing options...
cdev Posted December 19, 2020 Author Share Posted December 19, 2020 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 ? Quote Link to comment Share on other sites More sharing options...
x11 Posted December 19, 2020 Share Posted December 19, 2020 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; } Quote Link to comment Share on other sites More sharing options...
fraxzi Posted December 26, 2020 Share Posted December 26, 2020 Hi, it didn't work as expected. Quote Link to comment Share on other sites More sharing options...
irigsoft Posted December 26, 2020 Share Posted December 26, 2020 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; } Quote Link to comment Share on other sites More sharing options...
fraxzi Posted December 26, 2020 Share Posted December 26, 2020 Hi Irigsoft, Same result. Thanks, Frances Quote Link to comment Share on other sites More sharing options...
irigsoft Posted December 26, 2020 Share Posted December 26, 2020 Try this: /*color selected row*/ .DBG .x-grid-item-selected .x-grid-cell { font-weight: bold!important; background-color:red!important; } Happy hollidays Quote Link to comment Share on other sites More sharing options...
fraxzi Posted December 28, 2020 Share Posted December 28, 2020 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 Quote Link to comment Share on other sites More sharing options...
fraxzi Posted December 28, 2020 Share Posted December 28, 2020 Hi Irigsoft, It works! after "Full Build" weird but it works. Quote Link to comment Share on other sites More sharing options...
irigsoft Posted December 28, 2020 Share Posted December 28, 2020 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 Quote Link to comment Share on other sites More sharing options...
jahlxx Posted March 11, 2021 Share Posted March 11, 2021 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 11, 2021 Share Posted March 11, 2021 5 minutes ago, jahlxx said: How can I change font type ans size of dbgrids? Hi, Have you tried using OnDrawColumnCell event? Quote Link to comment Share on other sites More sharing options...
jahlxx Posted March 11, 2021 Share Posted March 11, 2021 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. Quote Link to comment Share on other sites More sharing options...
irigsoft Posted March 11, 2021 Share Posted March 11, 2021 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; } Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 11, 2021 Share Posted March 11, 2021 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. Quote Link to comment Share on other sites More sharing options...
jahlxx Posted March 11, 2021 Share Posted March 11, 2021 Ok. Thanks. It works. Quote Link to comment Share on other sites More sharing options...
jahlxx Posted March 11, 2021 Share Posted March 11, 2021 The only problem is that the style is applied to treeviews too. Can be solved ? Thanks. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 11, 2021 Share Posted March 11, 2021 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: Quote Link to comment Share on other sites More sharing options...
jahlxx Posted March 11, 2021 Share Posted March 11, 2021 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.