Jump to content
uniGUI Discussion Forums
arilotta

New TUniCheckListBox component

Recommended Posts

 

Hi, 

 

this is my first UniGui component: TUniCheckListBox. It resembles the classic VCL component TCheckListBox,

a component that I was familiar with, and that I found was missing from the UniGUI included components.

 

First of all, I would like to thank Delphi Developer, because the main code used in the component was supplied

by him in the following post:

 


 

The component is based on TUniCustomListBox, and its usage is therefore very similar to TUniListBox.

The items in the list can only be multi-selected using the checkbox, rather then the using the left

mouse button click in combination with Ctrl/Shift keys.

 

To install it, just open the UniCustomComponents package, change the Delphi version in the UniCustomComponents package source

(I used UniGUI23 for Delphi 10 Seattle); it should be UniGUI24 for Berlin and UniGUI25 for Tokio....

Then build and install the package.

 

Thanks

 

Andrea Arilotta

 

UniGUI.zip

  • Upvote 3

Share this post


Link to post
Share on other sites

I am trying to build and install this component for XE2 but am getting errors in the following line of code:

JSInterface.JSCode(#1'.el.select("input[type=checkbox]:nth('+(i+1).ToString+')").elements[0].checked='+Selected[i].ToString.ToLower+';');

Compiler seems to be complaining about .ToString and .ToLower  and the error is: "E2018 Record, object or class type required"

 

Does anyone know what changes I would need to make to the above so it builds?

Share this post


Link to post
Share on other sites

It should be sufficient to substitute "Selected[i].ToString.ToLower" with LowerCase(IntToStr(Selected[i]))

 

Regards

Andrea

Share this post


Link to post
Share on other sites

Hi Andrea,

 

  Since Selected is a boolean should that actually be BoolToStr?

Share this post


Link to post
Share on other sites

Hi Andrea,

 

  I noticed one issue. 

 

  If you use the object inspector to set the Items in design time I get AV in the RTL160.bpl.

 

  Do you have any issues setting the items in design time?

Share this post


Link to post
Share on other sites

Hi mos, I corrected the issue you signaled, additionally in the newer version I'm attaching you'll find 2 new properties published:

- ReadOnly

- TrackOver

 

Bye

Andrea

 

 

UniGUI.zip

Share this post


Link to post
Share on other sites

Hi Andrea,

 

  Thanks for the update.  However I have noticed something odd.

 

  I have a simple project with just the main form,  a button and an empty TUniCheckListBox.

 

  On the button click I have the following code:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniCheckListBox1.Items.Add('Item 1');
  UniCheckListBox1.Items.Add('Item 2');
  UniCheckListBox1.Items.Add('Item 3');

  UniCheckListBox1.Selected[1] := True;
end;

When I run the program and click the button I see the items in the listbox but the Selected[1] does not check the checkbox of the item.

Share this post


Link to post
Share on other sites

It is something related to the way events are treated in Unigui.

Either:

 

- populate the CheckListBox at design time or at runtme in the FormCreate event; then handle just the initialization of Selected in the another event

 

- set EnableSynchronousOperations to TRUE in UniMainModule, then adjust your code in this way:

 

procedure TMainForm.testcl(Sender: TObject);
begin
  UniCheckListBox1.Items.Add('Item 1');
  UniCheckListBox1.Items.Add('Item 2');
  UniCheckListBox1.Items.Add('Item 3');
  UniSession.Synchronize;
  UniCheckListBox1.Selected[1]:=true;
end;

Share this post


Link to post
Share on other sites

Hi Arilotta,

 

  Thank you for all your help so far.

 

   I've notice that highlight bar which is present in a normal UniGUI listbox is not present.

 

   Is it possible to show the highlight bar so the user knows which record is selected when you click on the item text?

Share this post


Link to post
Share on other sites

It should be sufficient to replace "x-checklist-item" with "x-boundlist-item"  in procedure TUniCheckListBox.WebCreate,

in this line:

 

  '  list.tpl.html = ''<ul class="x-list-plain"><tpl for="."><li role="option" unselectable="on" class="x-boundlist-item" style="cursor: default;">'+

Share this post


Link to post
Share on other sites

Can you attach screen to show how component looks?

Share this post


Link to post
Share on other sites

Hi Arilotta,

 

  I made the change but noticed that you need to click the checkbox before the item is highlighted.

 

  What I would like is for the highlight bar to operate by just clicking on the row item rather than having to click the checkbox.

 

  In other words  the checkbox and highlight bar operate independently of each other.

 

  I played around with the change and I now understand what is happening.

 

  If you select an item by clicking the checkbox the item gets highlighted.

 

  Is it possible to remove the highlight bar when a checkbox is checked i.e. In other words I don't want the checked items to be highlighted?

Share this post


Link to post
Share on other sites

Hi Andrea,

 

Thanks for sharing your component. I was interested with one more event, maybe someone else will need it.

 

Add new type:

 

TOnCheckChange = procedure(Sender: TObject; index: integer; newState: boolean) of object;

 

in private Add new Field:

 

FOnCheckChange: TOnCheckChange;

 

in public add new property:

 

property OnCheckChange: TOnCheckChange read FOnCheckChange write FOnCheckChange;

 

and in implementation of SetSelected method add new lines at the end of the method:

 

if Assigned(FOnCheckChange) then
  FOnCheckChange(self, index, Value);
 
now we have new event which is fired when someone check or unchecks any position on list giving us index and newstate of checkbox.
 
Regards,
Marcin
 

Share this post


Link to post
Share on other sites

Hi Arilotta,

 

tell me please, this component is ported for the mobile version ???

 

Best regards,

  Dmitry.

Share this post


Link to post
Share on other sites

.@MarBar77 good job, I think it could be useful

 

@KdWpenza No, I haven't ported it to mobile...

Share this post


Link to post
Share on other sites

Andrea do you have any suggestions how to get ItemIndex of clicked item (when no checkbox is cliked). I want to click on particular item text and want to know what is item index of this item. Actually in Onclick ItemIndex is always -1.

 

Share this post


Link to post
Share on other sites

It is already functional, I use it in my projects.

Please see the attached zip,  it contains the package and the unit unit for the component and the image for the icon.

Just compile the package and install it.

 

Unichecklst.zip

Share this post


Link to post
Share on other sites

Btw: add "margin-left: 0px; margin-top: 0px;" to your style. Will look better.

 

procedure TUniCheckListBox.WebCreate;
var JSFunctionBody: string;
begin
  inherited;
  JSFunctionBody :=
  '  var me = sender,'+
  '      list = sender.boundList;'+
  ''+
  '  document._chSelect = function(cmp, indx) {'+
  '      ajaxRequest(cmp, "checkSelect", ["indx=" + (indx - 1)]);'+
  '  };'+
  ''+
  // Se si sceglie x-boundlist-item invece di "x-checklist-item" si ha il supporto per il trackover, i font, highligth dei selezionati, ecc.
  '  list.tpl.html = ''<ul class="x-list-plain"><tpl for="."><li role="option" unselectable="on" class="x-boundlist-item" style="cursor: default">'+
                      '<input id={[Ext.id()]} type="checkbox" style="vertical-align:middle; margin-left: 0px; margin-top: 0px; cursor: pointer; cursor: hand;" onclick="_chSelect('+self.JSName+',{#})" />{val}</li></tpl></ul>'';'+
  ''+
  '  list.addListener(''beforeitemclick'', function() {'+
  '      return false'+
  '  });'+
  ''+
  '  list.addListener(''beforecontainerclick'', function() {'+
  '      return false'+
  '  })';
  JSAddListener('beforerender',
      JSFunction('sender, eOpts',  JSFunctionBody)
  );
end;

Share this post


Link to post
Share on other sites

×