New TUniCheckListBox component

[arilotta]

 

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:

 

http://forums.unigui.com/index.php?/topic/5678-checkbox-in-a-list-no-db/

 

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

[bbosnjak]

Thanks for sharing!

 

Sent from my SM-P900 using Tapatalk

[Sherzod]

Thanks for sharing!

[mehmet07]

Thanks arilotta

[mos]

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?

[arilotta]

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

 

Regards

Andrea

[mos]

Hi Andrea,

 

  Since Selected is a boolean should that actually be BoolToStr?

[arilotta]

Yes, I think you're right.

Andrea

[mos]

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?

[arilotta]

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

[mos]

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.

[arilotta]

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;

[mos]

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?

[arilotta]

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;">'+

[Ruslan]

Can you attach screen to show how component looks?

[arilotta]

See the attached screen shot.

[mos]

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?

[MarBar77]

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

 

[KdWpenza]

Hi Arilotta,

 

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

 

Best regards,

  Dmitry.

[arilotta]

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

 

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

[MarBar77]

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.

 

[rgreat]

Can someone adapt it to beta version?

[arilotta]

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

[rgreat]

 When trying to click on checkbox:

[rgreat]

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;