Color one item in TUniRadioGroup

[Mohammed Nasman]

Hello All,

 

I have a TUniRadioGroup that has multiple items created on runtime.

 

I would like color one item of them based on some criteria, can I do that on runtime, or do I have to create array of TUniRadioButton instead?

 

[Sherzod]

Hi,

 

You can try to use like this:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  // for example for second Item
  UniRadioGroup1.JSInterface.JSCode(#1'.queryById(1).el.setStyle("color", "green");');
end;

Best regards,

[Mohammed Nasman]

Perfect, thank you

[Mohammed Nasman]

I have an issue with the code above, I'm not sure if it a bug conflict with sytle,

 

change the form font to bold or bigger size, the code above will work only first time, then will not work, if I revert the font style to original one, it will back to work as expected.

[Sherzod]

Hi,

 

Can you make a simple testcase for this?

[Mohammed Nasman]

Just drop UniRadioGroup into form with UniButton, adding items at run time, add following code:

// just a a method to fill the UniRadioGroup(rgAnswers)
procedure TMainForm.AddAnswers;
begin
  rgAnswers.Items.Clear;
  rgAnswers.Items.Add('Answer 1');
  rgAnswers.Items.Add('Answer 3');
  rgAnswers.Items.Add('Answer 3');
  rgAnswers.ItemIndex := -1;

end;

procedure TMainForm.rgAnswersClick(Sender: TObject);
begin
  if rgAnswers.ItemIndex = 1 then
    rgAnswers.JSInterface.JSCode(#1'.queryById(1).el.setStyle("color", "blue");')
  else
    rgAnswers.JSInterface.JSCode(#1'.queryById(1).el.setStyle("color", "red");')
end;


procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  AddAnswers
end;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  AddAnswers
end;

it will work without a problem, go to Font property of the Form, set the font to bold, then try again, it will color the items for first time, then it will not work

 

[Sherzod]

Ok, I will check it now

[Sherzod]

Can you try this?:

procedure TMainForm.rgAnswersClick(Sender: TObject);
begin
  if rgAnswers.ItemIndex = 1 then
    rgAnswers.JSInterface.JSCode(#1'.queryById(1).el.down(".x-form-cb-label-after").el.dom.style.color="blue";')
  else
    rgAnswers.JSInterface.JSCode(#1'.queryById(1).el.down(".x-form-cb-label-after").el.dom.style.color="red";')
end;

[Mohammed Nasman]

Now it's working as expected, thank you

[Freeman35]

Hello,

1- How can I can change Item's font attibute too? bold etc.

2- How can I can change Item's css name

regards

[Freeman35]

On 8/23/2017 at 7:15 PM, Sherzod said:

Can you try this?:

procedure TMainForm.rgAnswersClick(Sender: TObject);
begin
  if rgAnswers.ItemIndex = 1 then
    rgAnswers.JSInterface.JSCode(#1'.queryById(1).el.down(".x-form-cb-label-after").el.dom.style.color="blue";')
  else
    rgAnswers.JSInterface.JSCode(#1'.queryById(1).el.down(".x-form-cb-label-after").el.dom.style.color="red";')
end;

Hi, this code not work in 1480. Get error  "O348.queryById(...) is null"

regards.

[Sherzod]

27 minutes ago, Freeman35 said:

this code not work in 1480. Get error  "O348.queryById(...) is null"

Hi,

Try this:

UniRadioGroup1.JSInterface.JSCode(#1'.items.getAt(0).el.down(".x-form-cb-label-after").el.dom.style.color="green";');

 

[Freeman35]

Thank you very much.

I'll nearly goes mad   What is wrong ? I didn't see problem like this as long as my life  

S:= Format(#1'.items.getAt(' + IntToStr(GRP_.ItemIndex) +').el.down(".x-form-cb-label-after").el.dom.style.color="%s";',[uniColor2Web(clRed)]); // not work
S:= Format(#1'.items.getAt(%d).el.down(".x-form-cb-label-after").el.dom.style.color="%s";',[GRP_.ItemIndex, uniColor2Web(clRed)]);// not work
S:= Format(#1'.items.getAt(' + IntToStr(GRP_.ItemIndex) +').el.down(".x-form-cb-label-after").el.dom.style.color="%s";',[uniColor2Web(clRed)]);// not work
S:= Format(#1'.items.getAt(0).el.down(".x-form-cb-label-after").el.dom.style.color="%s";',[uniColor2Web(clRed)]); // WORK !!!!!!
GRP_.JSInterface.JSCode(S);

O348.items.getAt(...) is undefined

[Sherzod]

8 minutes ago, Freeman35 said:

What is wrong ?

Because ItemIndex is -1

 

8 minutes ago, Freeman35 said:

IntToStr(GRP_.ItemIndex)

= -1

O52.items.getAt(-1).el.down(".x-form-cb-label-after").el.dom.style.color="#FF0000";

 

[Freeman35]

No, I'll check now. If value high then 0 I get this error. Can you confirm this on your test case please.

regards

[Freeman35]

any news for this?

[Sherzod]

Hi,

Sorry for the delay

 

23 hours ago, Freeman35 said:

S:= Format(#1'.items.getAt(' + IntToStr(GRP_.ItemIndex) +').el.down(".x-form-cb-label-after").el.dom.style.color="%s";',[uniColor2Web(clRed)]); // not work 
S:= Format(#1'.items.getAt(%d).el.down(".x-form-cb-label-after").el.dom.style.color="%s";',[GRP_.ItemIndex, uniColor2Web(clRed)]);// not work 
S:= Format(#1'.items.getAt(' + IntToStr(GRP_.ItemIndex) +').el.down(".x-form-cb-label-after").el.dom.style.color="%s";',[uniColor2Web(clRed)]);// not work 
S:= Format(#1'.items.getAt(0).el.down(".x-form-cb-label-after").el.dom.style.color="%s";',[uniColor2Web(clRed)]); // WORK !!!!!! GRP_.JSInterface.JSCode(S);

 

Where do you call these codes?

[Freeman35]

No problem, I can understand you alone and try answer all forum.

That stringS for just  test,  problem is " getAt(0) " here. if give bigger then 0(zero), I mean,  getAt(1) or getAt(2) (ofcourse items added) get error.

code add button click. so form showed. maybe can important, form showed model.

regards

[Sherzod]

On 11/1/2018 at 4:59 PM, Sherzod said:

Try this:

UniRadioGroup1.JSInterface.JSCode(#1'.items.getAt(0).el.down(".x-form-cb-label-after").el.dom.style.color="green";');

 

I'm sorry, It was wrong it seems:

Correct:

radioGroup.items.getAt...

  S:= Format(#1'.radioGroup.items.getAt(' + IntToStr(UniRadioGroup1.ItemIndex) +').el.down(".x-form-cb-label-after").el.dom.style.color="%s";',['green']);
  UniRadioGroup1.JSInterface.JSCode(S);

 

 

[Freeman35]

Perfect...

Thank you so much,