arilotta Posted August 28, 2017 Share Posted August 28, 2017 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 3 Quote Link to comment Share on other sites More sharing options...
bbosnjak Posted August 28, 2017 Share Posted August 28, 2017 Thanks for sharing! Sent from my SM-P900 using Tapatalk Quote Link to comment Share on other sites More sharing options...
Sherzod Posted August 28, 2017 Share Posted August 28, 2017 Thanks for sharing! Quote Link to comment Share on other sites More sharing options...
mehmet07 Posted August 29, 2017 Share Posted August 29, 2017 Thanks arilotta Quote Link to comment Share on other sites More sharing options...
mos Posted January 31, 2018 Share Posted January 31, 2018 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? Quote Link to comment Share on other sites More sharing options...
arilotta Posted January 31, 2018 Author Share Posted January 31, 2018 It should be sufficient to substitute "Selected[i].ToString.ToLower" with LowerCase(IntToStr(Selected[i])) Regards Andrea Quote Link to comment Share on other sites More sharing options...
mos Posted January 31, 2018 Share Posted January 31, 2018 Hi Andrea, Since Selected is a boolean should that actually be BoolToStr? Quote Link to comment Share on other sites More sharing options...
arilotta Posted January 31, 2018 Author Share Posted January 31, 2018 Yes, I think you're right. Andrea Quote Link to comment Share on other sites More sharing options...
mos Posted February 5, 2018 Share Posted February 5, 2018 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? Quote Link to comment Share on other sites More sharing options...
arilotta Posted February 5, 2018 Author Share Posted February 5, 2018 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 Quote Link to comment Share on other sites More sharing options...
mos Posted February 6, 2018 Share Posted February 6, 2018 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. Quote Link to comment Share on other sites More sharing options...
arilotta Posted February 6, 2018 Author Share Posted February 6, 2018 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; Quote Link to comment Share on other sites More sharing options...
mos Posted March 6, 2018 Share Posted March 6, 2018 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? Quote Link to comment Share on other sites More sharing options...
arilotta Posted March 6, 2018 Author Share Posted March 6, 2018 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;">'+ Quote Link to comment Share on other sites More sharing options...
Ruslan Posted March 6, 2018 Share Posted March 6, 2018 Can you attach screen to show how component looks? Quote Link to comment Share on other sites More sharing options...
arilotta Posted March 7, 2018 Author Share Posted March 7, 2018 See the attached screen shot. Quote Link to comment Share on other sites More sharing options...
mos Posted March 7, 2018 Share Posted March 7, 2018 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? Quote Link to comment Share on other sites More sharing options...
MarBar77 Posted March 11, 2018 Share Posted March 11, 2018 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 Quote Link to comment Share on other sites More sharing options...
KdWpenza Posted March 13, 2018 Share Posted March 13, 2018 Hi Arilotta, tell me please, this component is ported for the mobile version ??? Best regards, Dmitry. Quote Link to comment Share on other sites More sharing options...
arilotta Posted March 13, 2018 Author Share Posted March 13, 2018 .@MarBar77 good job, I think it could be useful @KdWpenza No, I haven't ported it to mobile... Quote Link to comment Share on other sites More sharing options...
MarBar77 Posted March 14, 2018 Share Posted March 14, 2018 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. Quote Link to comment Share on other sites More sharing options...
rgreat Posted March 22, 2018 Share Posted March 22, 2018 Can someone adapt it to beta version? Quote Link to comment Share on other sites More sharing options...
arilotta Posted March 23, 2018 Author Share Posted March 23, 2018 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 Quote Link to comment Share on other sites More sharing options...
rgreat Posted March 23, 2018 Share Posted March 23, 2018 When trying to click on checkbox: Quote Link to comment Share on other sites More sharing options...
rgreat Posted March 23, 2018 Share Posted March 23, 2018 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; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.