With the AutoSelect property activated when an Item contains subitems and you select one of these subitems, the one painted in blue, as selected, is the correspondent in the first level with the ordinal number of the pressed one.
Wow!!! Sound complex, don't true?
No. It really is an evident problem.
{Steps: 1- Create a bootstrap App.
2- Drop a TWebButton on the form created by the IDE.
3- Drop a TWebListControl on the same form.
4- Create the OnClick event handler of the TWebButton with the code indicated to fill the TWebListControl.Items. (above)
5- In the TWeblistControl component, change the next properties:
1- AutoSelect := True;
The problem is that when you click on a subitem, the activated one is the
one in the first level with the same position.
Not the one in the second level.
If you click in the second SubItem of the Fourth Item, the Control shows as selected the Second Item of the first level.
The mistake is in the next procedure: unit WEBLib.Lists ===>>> procedure TListControl.Paint;
When painting, the Item is not considered the level of the clicked item.
Next is the code to create the Items on the TWebListControl component.
var Node :TListItem;
SubNode :TListItem;
begin
WebListControl1.Items.Clear;
Node := WebListControl1.Items.Add;
Node.Text := 'First Item';
Node := WebListControl1.Items.Add;
Node.Text := 'Second Item';
Node := WebListControl1.Items.Add;
Node.Text := 'Third Item';
Node := WebListControl1.Items.Add;
Node.Text := 'Fourth Item';
SubNode := Node.Items.Add;
SubNode.Text := 'Fourth -> First';
SubNode := Node.Items.Add;
SubNode.Text := 'Fourth -> Second';
SubNode := Node.Items.Add;
SubNode.Text := 'Fourth -> Third';
SubNode := Node.Items.Add;
SubNode.Text := 'Fourth -> Fourth';
Node := WebListControl1.Items.Add;
Node.Text := 'Fifth Item';
Node := WebListControl1.Items.Add;
Node.Text := 'Sixth Item';
In this reply, I want to publish the code to create the test project and contain the solution (workaround) I created.
Next is the code of the .dfm file.
object Form4: TForm4
Width = 640
Height = 480
CSSLibrary = cssBootstrap
ElementFont = efCSS
Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText
Font.Height = -15
Font.Name = 'Tahoma'
Font.Style = []
ParentFont = False
OnCreate = WebFormCreate
object WebButton1: TWebButton
Left = 56
Top = 136
Width = 96
Height = 25
Caption = 'Fill Items'
ChildOrder = 1
ElementClassName = 'btn-group'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
WidthPercent = 100.000000000000000000
OnClick = WebButton1Click
end
object WebListControl1: TWebListControl
Left = 184
Top = 136
Width = 300
Height = 60
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
WidthPercent = 100.000000000000000000
ChildOrder = 1
DefaultItemClassName = 'list-group-item'
DefaultItemLinkClassName = 'list-group-link'
ElementFont = efCSS
ElementListClassName = 'list-group'
Items = <
item
ItemClassName = 'list-group-item'
Items = <>
LinkClassName = 'list-group-link'
Text = 'Item 0'
end
item
ItemClassName = 'list-group-item'
Items = <>
LinkClassName = 'list-group-link'
Text = 'Item 1'
end
item
ItemClassName = 'list-group-item'
Items = <>
LinkClassName = 'list-group-link'
Text = 'Item 2'
end>
Style = lsListGroup
OnItemClick = WebListControl1ItemClick
end
object WebButton2: TWebButton
Left = 192
Top = 56
Width = 249
Height = 25
Caption = 'Activate the workaround'
ChildOrder = 1
ElementClassName = 'btn-group'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
WidthPercent = 100.000000000000000000
OnClick = WebButton2Click
end
end
Next is the code of the .pas file
unit Unit4;
interface
uses
System.SysUtils, System.Classes, JS, Web, WEBLib.Graphics, WEBLib.Controls,
WEBLib.Forms, WEBLib.Dialogs, Vcl.Controls, WEBLib.Lists, Vcl.StdCtrls, WEBLib.StdCtrls;
type
TForm4 = class(TWebForm)
WebButton1: TWebButton;
WebListControl1: TWebListControl;
WebButton2: TWebButton;
procedure WebButton1Click(Sender: TObject);
procedure WebListControl1ItemClick(Sender: TObject; AListItem: TListItem);
procedure WebFormCreate(Sender: TObject);
procedure WebButton2Click(Sender: TObject);
private
FWorkaroundActive :Boolean;
function GetWorkaroundActive:Boolean;
procedure SetWorkaroundActive(Value :Boolean);
public
property WorkaroundActive :Boolean read GetWorkaroundActive write SetWorkaroundActive;
end;
var
Form4: TForm4;
{Steps: 1- Create a bootstrap App.
2- Drop a TWebButton on the form created by de IDE
3- Drop a TWebListControl on the same form
4- Create the OnClick event handler of tha TWebButton with the next code: -->>>
5- In the TWeblistControl component change the next properties:
1- AutoSelect := True;
The problem is that when you click on a subitem, the one is activated is the correspondant on the first level.
No the one in the second level.
The mistake is in the next procedure: unit WEBLib.Lists ===>>> procedure TListControl.Paint;
When paint the Item is not taken into account the level of the clicked item.
}
implementation
{$R *.dfm}
function TForm4.GetWorkaroundActive: Boolean;
begin
Result := FWorkaroundActive;
end;
procedure TForm4.SetWorkaroundActive(Value: Boolean);
begin
if FWorkaroundActive then begin
WebButton2.Caption := 'Activate Workaround';
WebListControl1.AutoSelect := True;
WebListControl1.OnItemClick := nil;
FWorkaroundActive := False;
end
else begin
WebButton2.Caption := 'Deactivate Workaround';
WebListControl1.AutoSelect := False;
WebListControl1.OnItemClick := WebListControl1ItemClick;
FWorkaroundActive := True;
end;
end;
procedure TForm4.WebButton1Click(Sender: TObject);
var Node :TListItem;
SubNode :TListItem;
begin
WebListControl1.Items.Clear;
Node := WebListControl1.Items.Add;
Node.Text := 'First Item';
Node := WebListControl1.Items.Add;
Node.Text := 'Second Item';
Node := WebListControl1.Items.Add;
Node.Text := 'Third Item';
Node := WebListControl1.Items.Add;
Node.Text := 'Fourth Item';
SubNode := Node.Items.Add;
SubNode.Text := 'Fourth -> First';
SubNode := Node.Items.Add;
SubNode.Text := 'Fourth -> Second';
SubNode := Node.Items.Add;
SubNode.Text := 'Fourth -> Third';
SubNode := Node.Items.Add;
SubNode.Text := 'Fourth -> Fourth';
Node := WebListControl1.Items.Add;
Node.Text := 'Fifth Item';
Node := WebListControl1.Items.Add;
Node.Text := 'Sixth Item';
end;
procedure TForm4.WebButton2Click(Sender: TObject);
begin
WorkaroundActive := not WorkAroundActive;
end;
procedure TForm4.WebFormCreate(Sender: TObject);
begin
WebListControl1.AutoSelect := True;
WebListControl1.OnItemClick := nil;
end;
procedure TForm4.WebListControl1ItemClick(Sender: TObject; AListItem: TListItem);
procedure DeactivateAllItems(Items :TListItem);
var i :Integer;
begin
for i := 0 to Items.Items.Count -1 do begin
Items.Items[i].Active := False;
DeactivateAllItems(Items.Items[i]);
end;
end;
var i :Integer;
begin
for i := 0 to WebListControl1.Items.Count -1 do begin
WebListControl1.Items[i].Active := False;
DeactivateAllItems(WebListControl1.Items[i]);
end;
DeactivateAllItems(WebListControl1.Items[0]);
AListItem.Active := True;
end;
end.
Thanks for reporting. We traced & solved this issue. The next update will address this.