TUniCheckBox Change Tick Colour at Runtime (not CSS)

[andyhill]

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.

[andyhill]

Please advise - Thanks

[Sherzod]

On 5/7/2022 at 2:47 AM, andyhill said:

not CSS

Hello,

Without CSS - no way. That's for sure.

 

[andyhill]

Perhaps I should have said not a static CSS rule, I need an individual approach that will not effect any other checkbox

[andyhill]

Any ideas Sherzod ?

[Sherzod]

I will try to analyze. 

[Sherzod]

And it's not easy with "CSS" either.

[Sherzod]

Using FontAwesome...

[Sherzod]

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;

 

[andyhill]

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; 

[andyhill]

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

 

[Sherzod]

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;

 

[andyhill]

Sherzod, the CSS above no longer works as intended ?

Also I asked why I could not prevent Context Popup on Checkbox ?

[Sherzod]

6 minutes ago, andyhill said:

the CSS above no longer works as intended ?

Works for me. What's the issue?

[Sherzod]

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;

 

[andyhill]

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;
 

[Sherzod]

Tell me what you want to do.

[andyhill]

 UniSession.AddJS( cbPurOwing checked = True or False )

[Sherzod]

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

 

[andyhill]

Thank you Sherzod