andyhill Posted May 6, 2022 Share Posted May 6, 2022 I have a need to use the colour of the CheckBox tick to indicate a particular status where one can change its colour at runtime (not CSS) - please advise - thanks. Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 9, 2022 Author Share Posted May 9, 2022 Please advise - Thanks Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 9, 2022 Share Posted May 9, 2022 On 5/7/2022 at 2:47 AM, andyhill said: not CSS Hello, Without CSS - no way. That's for sure. Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 9, 2022 Author Share Posted May 9, 2022 Perhaps I should have said not a static CSS rule, I need an individual approach that will not effect any other checkbox Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 10, 2022 Author Share Posted May 10, 2022 Any ideas Sherzod ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 11, 2022 Share Posted May 11, 2022 I will try to analyze. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 11, 2022 Share Posted May 11, 2022 And it's not easy with "CSS" either. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 12, 2022 Share Posted May 12, 2022 Using FontAwesome... Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 12, 2022 Share Posted May 12, 2022 27 minutes ago, Sherzod said: 1. CustomCSS: .customCheckbox .x-form-checkbox { font-family: FontAwesome; font-size: 14px; background-image: none !important; margin: 4px 0 0 0; } .customCheckbox.x-form-cb-checked .x-form-checkbox:before { content: '\f046'; color: green; } .customCheckbox .x-form-checkbox:before { content: '\f096'; } 2. Usage: procedure TMainForm.UniFormCreate(Sender: TObject); begin with UniCheckBox1.JSInterface do begin JSConfig('cls', ['customCheckbox']); end; end; 1 Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 12, 2022 Author Share Posted May 12, 2022 Yes, thank you Sherzod, colour is good - but how do I change this colour at runtime due to some internal status ? eg. if FaultyFlag = True then begin TickColor = Red end else begin TickColor = Green end; Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 12, 2022 Author Share Posted May 12, 2022 Sherzod, this was me testing:- CSS s:= '.customCheckboxGreen .x-form-checkbox '+ '{ '+ ' font-family: FontAwesome; '+ ' font-size: 16px; '+ ' background-image: none !important; '+ ' margin: 4px 0 0 0; '+ // Top, Right, Bottom, Left '} '+ '.customCheckboxGreen.x-form-cb-checked .x-form-checkbox:before '+ '{ '+ ' content: ''\f046''; '+ ' color: green; '+ '} '+ '.customCheckboxGreen .x-form-checkbox:before '+ '{ '+ ' content: ''\f096''; '+ '} '; CustomCSS.Add(s); // s:= '.customCheckboxRed .x-form-checkbox '+ '{ '+ ' font-family: FontAwesome; '+ ' font-size: 16px; '+ ' background-image: none !important; '+ ' margin: 4px 0 0 0; '+ // Top, Right, Bottom, Left '} '+ '.customCheckboxRed.x-form-cb-checked .x-form-checkbox:before '+ '{ '+ ' content: ''\f046''; '+ ' color: red; '+ '} '+ '.customCheckboxRed .x-form-checkbox:before '+ '{ '+ ' content: ''\f096''; '+ '} '; CustomCSS.Add(s); CHECKBOX cbPurOwing.LayoutConfig.BodyPadding:= '0 2 2 2'; // Top, Right, Bottom, Left *** NEVER UPDATES, MUST BE SET IN IDE *** with cbPurOwing.JSInterface do begin JSConfig('cls', ['customCheckboxGreen']); end; cbPurOwing.ClientEvents.ExtEvents.Clear; s:= 'mousedown=function mousedown(sender, x, y, eOpts) '#13#10 + '{ '#13#10 + // sender.preventDefault(); ' preventDefault(); '#13#10 + ' ajaxRequest(this, ''_eOpts_'', [''eOpts=''+eOpts]); '#13#10 + // eOpts=MouseButton: 0=Left, 2=Right '} '; cbPurOwing.ClientEvents.ExtEvents.Add(s); AJAXEVENT if EventName = '_eOpts_' then begin s:= Params['eOpts'].AsString; // MouseButton: 0=Left, 2=Right b:= StrToIntDef(s, 0); if b = 2 then begin // removeCls, addCls (setCls) configs with cbPurOwing do begin JSInterface.JSCall('removeCls', ['customCheckboxGreen']); JSInterface.JSCall('addCls', ['customCheckboxRed']); end; end else begin with cbPurOwing do begin JSInterface.JSCall('removeCls', ['customCheckboxRed']); JSInterface.JSCall('addCls', ['customCheckboxGreen']); end; end; end; // '_eOpts_' PROCESS LeftClick = Green RightClick THROWS UP CONTEXT MENU (I set disable above) ??? Please advise - thanks - Andy Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 8 hours ago, andyhill said: colour is good - but how do I change this colour at runtime due to some internal status ? Hello, For example. 1. CustomCSS: .customCheckbox .x-form-checkbox { font-family: FontAwesome; font-size: 14px; background-image: none !important; margin: 4px 0 0 0; } .customCheckbox.x-form-cb-checked .x-form-checkbox:before { content: '\f046'; } .customCheckbox .x-form-checkbox:before { content: '\f096'; } .customCheckbox.cred { color: red; } .customCheckbox.cgreen { color: green; } 2. Exemplary usage: procedure TMainForm.UniButton13Click(Sender: TObject); begin UniCheckBox1.JSInterface.JSCall('removeCls', ['cgreen']); UniCheckBox1.JSInterface.JSCall('addCls', ['cred']); end; procedure TMainForm.UniButton14Click(Sender: TObject); begin UniCheckBox1.JSInterface.JSCall('removeCls', ['cred']); UniCheckBox1.JSInterface.JSCall('addCls', ['cgreen']); end; Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 13, 2022 Author Share Posted May 13, 2022 Sherzod, the CSS above no longer works as intended ? Also I asked why I could not prevent Context Popup on Checkbox ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 6 minutes ago, andyhill said: the CSS above no longer works as intended ? Works for me. What's the issue? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 41 minutes ago, andyhill said: Also I asked why I could not prevent Context Popup on Checkbox ? procedure TMainForm.UniFormCreate(Sender: TObject); begin with UniCheckBox1.JSInterface do begin JSConfig('cls', ['customCheckbox']); JSAddListener('afterrender', 'function(me){me.getEl().dom.addEventListener("contextmenu", function(e){e.preventDefault()})}'); //<-------- end; end; Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 13, 2022 Author Share Posted May 13, 2022 Thanks Sherzod for the Context Code. I have an issue with internal syncing of TUniCheckbox Tick with the browser - please show me how to set Checked with JavaScript instead. Here is my code:- procedure TfMain.cbPurOwingAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin ////////////////////////////////////////////////////////////////////////////// if EventName = '_RightClick_' then begin RightClickFlag:= True; ByPassChangeFlag:= True; if cbPurOwing.Checked = False then begin cbPurOwing.Checked:= True; // THIS HAS ISSUES SYNCRONIZING INTERNALLY WITH THE BROWSER ??? end else begin cbPurOwing.Checked:= False; // THIS HAS ISSUES SYNCRONIZING INTERNALLY WITH THE BROWSER ??? end; UniSession.AddJS('Ext.defer(function() {ajaxRequest(fMain.cbPurOwing, "_Process_", []);}, 1000)'); end; // '_RightClick_' ////////////////////////////////////////////////////////////////////////////// if EventName = '_Process_' then begin ByPassChangeFlag:= False; cbPurOwingChange(Self); end; end; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 14, 2022 Share Posted May 14, 2022 Tell me what you want to do. Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 14, 2022 Author Share Posted May 14, 2022 UniSession.AddJS( cbPurOwing checked = True or False ) Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 15, 2022 Share Posted May 15, 2022 6 hours ago, andyhill said: UniSession.AddJS( cbPurOwing checked = True or False ) Sorry, you didn't fully describe your case... But try: UniCheckBox1.JSInterface.JSCall('setValue', [True]); //False Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 15, 2022 Author Share Posted May 15, 2022 Thank you Sherzod 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.