Jump to content

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
Link to comment
Share on other sites

  • 5 months later...

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?

Link to comment
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.

Link to comment
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;
Link to comment
Share on other sites

  • 4 weeks later...

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?

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

Link to comment
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?

Link to comment
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
 
Link to comment
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.

 

Link to comment
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;

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...