Skip to content

Commit 2baaee4

Browse files
csharpfritzcsharpfritz
committed
Missing docs
1 parent 8768cc4 commit 2baaee4

File tree

4 files changed

+580
-0
lines changed

4 files changed

+580
-0
lines changed

‎docs/EditorControls/CheckBoxList.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
# CheckBoxList
2+
3+
The CheckBoxList component renders a group of checkboxes, allowing users to select multiple items from a list. It supports both static items and data-bound scenarios.
4+
5+
Original Web Forms documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.checkboxlist?view=netframework-4.8
6+
7+
!!! warning "Not Yet Implemented"
8+
This component is not yet available in BlazorWebFormsComponents. This documentation is a placeholder for the planned implementation.
9+
10+
## Planned Features
11+
12+
- Static items via `StaticItems` parameter with `ListItem` collection
13+
- Data binding via `Items` parameter with `DataTextField` and `DataValueField`
14+
- Multiple selection tracking via `SelectedItems` or `SelectedValues`
15+
- `RepeatColumns` for multi-column layout
16+
- `RepeatDirection` (Vertical or Horizontal)
17+
- `RepeatLayout` (Table, Flow, OrderedList, UnorderedList)
18+
- `TextAlign` for label positioning (Left or Right)
19+
- `OnSelectedIndexChanged` event handler
20+
- Style attributes and CssClass formatting
21+
22+
## Web Forms Declarative Syntax
23+
24+
```html
25+
<asp:CheckBoxList
26+
AccessKey="string"
27+
AutoPostBack="True|False"
28+
BackColor="color name|#dddddd"
29+
BorderColor="color name|#dddddd"
30+
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset"
31+
BorderWidth="size"
32+
CellPadding="integer"
33+
CellSpacing="integer"
34+
CssClass="string"
35+
DataSourceID="string"
36+
DataTextField="string"
37+
DataValueField="string"
38+
Enabled="True|False"
39+
EnableTheming="True|False"
40+
EnableViewState="True|False"
41+
Font-Bold="True|False"
42+
Font-Italic="True|False"
43+
Font-Names="string"
44+
Font-Overline="True|False"
45+
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|Large|X-Large|XX-Large"
46+
Font-Strikeout="True|False"
47+
Font-Underline="True|False"
48+
ForeColor="color name|#dddddd"
49+
Height="size"
50+
ID="string"
51+
OnDataBinding="DataBinding event handler"
52+
OnDisposed="Disposed event handler"
53+
OnInit="Init event handler"
54+
OnLoad="Load event handler"
55+
OnPreRender="PreRender event handler"
56+
OnSelectedIndexChanged="SelectedIndexChanged event handler"
57+
OnUnload="Unload event handler"
58+
RepeatColumns="integer"
59+
RepeatDirection="Horizontal|Vertical"
60+
RepeatLayout="Table|Flow|OrderedList|UnorderedList"
61+
runat="server"
62+
SelectedIndex="integer"
63+
SelectedValue="string"
64+
TabIndex="integer"
65+
TextAlign="Left|Right"
66+
ToolTip="string"
67+
Visible="True|False"
68+
Width="size">
69+
70+
<asp:ListItem Value="value1" Text="Display Text 1" Selected="True|False" />
71+
<asp:ListItem Value="value2" Text="Display Text 2" />
72+
73+
</asp:CheckBoxList>
74+
```
75+
76+
## Proposed Blazor Syntax
77+
78+
### Basic Usage
79+
80+
```razor
81+
<CheckBoxList TItem="object"
82+
StaticItems="items"
83+
OnSelectedIndexChanged="HandleSelectionChanged" />
84+
85+
@code {
86+
private ListItemCollection items = new()
87+
{
88+
new ListItem("Option One", "1"),
89+
new ListItem("Option Two", "2"),
90+
new ListItem("Option Three", "3")
91+
};
92+
93+
private void HandleSelectionChanged()
94+
{
95+
// Handle selection change
96+
}
97+
}
98+
```
99+
100+
### Multi-Column Layout
101+
102+
```razor
103+
<CheckBoxList TItem="object"
104+
StaticItems="items"
105+
RepeatColumns="3"
106+
RepeatDirection="RepeatDirection.Horizontal" />
107+
```
108+
109+
### Data Binding
110+
111+
```razor
112+
<CheckBoxList TItem="Category"
113+
Items="categories"
114+
DataTextField="Name"
115+
DataValueField="Id" />
116+
117+
@code {
118+
private List<Category> categories = new()
119+
{
120+
new Category { Id = "1", Name = "Electronics" },
121+
new Category { Id = "2", Name = "Clothing" },
122+
new Category { Id = "3", Name = "Books" }
123+
};
124+
125+
public class Category
126+
{
127+
public string Id { get; set; }
128+
public string Name { get; set; }
129+
}
130+
}
131+
```
132+
133+
### Getting Selected Items
134+
135+
```razor
136+
<CheckBoxList @ref="checkboxList" TItem="object" StaticItems="items" />
137+
<Button Text="Submit" OnClick="HandleSubmit" />
138+
139+
@code {
140+
private CheckBoxList<object> checkboxList;
141+
142+
private void HandleSubmit()
143+
{
144+
var selectedItems = checkboxList.SelectedItems;
145+
foreach (var item in selectedItems)
146+
{
147+
Console.WriteLine($"Selected: {item.Text} ({item.Value})");
148+
}
149+
}
150+
}
151+
```
152+
153+
## Contributing
154+
155+
If you would like to help implement this component, please see our [contributing guide](https://github.com/FritzAndFriends/BlazorWebFormsComponents/blob/dev/CONTRIBUTING.md).
156+
157+
## See Also
158+
159+
- [CheckBox](CheckBox.md) - Single checkbox control
160+
- [RadioButtonList](RadioButtonList.md) - Radio button selection list
161+
- [DropDownList](DropDownList.md) - Single selection dropdown
162+
- [ListBox](ListBox.md) - Multiple selection list control

‎docs/EditorControls/ListBox.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# ListBox
2+
3+
The ListBox component renders an HTML `<select>` element with the `multiple` attribute or `size` attribute, allowing users to view and select one or more items from a scrollable list.
4+
5+
Original Web Forms documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.listbox?view=netframework-4.8
6+
7+
!!! warning "Not Yet Implemented"
8+
This component is not yet available in BlazorWebFormsComponents. This documentation is a placeholder for the planned implementation.
9+
10+
## Planned Features
11+
12+
- Static items via `StaticItems` parameter with `ListItem` collection
13+
- Data binding via `Items` parameter with `DataTextField` and `DataValueField`
14+
- Single and multiple selection modes via `SelectionMode` property
15+
- `Rows` property to control visible height
16+
- Two-way binding with `@bind-SelectedValue` (single selection)
17+
- Selected items collection for multiple selection
18+
- `OnSelectedIndexChanged` event handler
19+
- Style attributes and CssClass formatting
20+
21+
## Web Forms Declarative Syntax
22+
23+
```html
24+
<asp:ListBox
25+
AccessKey="string"
26+
AutoPostBack="True|False"
27+
BackColor="color name|#dddddd"
28+
BorderColor="color name|#dddddd"
29+
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset"
30+
BorderWidth="size"
31+
CssClass="string"
32+
DataSourceID="string"
33+
DataTextField="string"
34+
DataValueField="string"
35+
Enabled="True|False"
36+
EnableTheming="True|False"
37+
EnableViewState="True|False"
38+
Font-Bold="True|False"
39+
Font-Italic="True|False"
40+
Font-Names="string"
41+
Font-Overline="True|False"
42+
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|Large|X-Large|XX-Large"
43+
Font-Strikeout="True|False"
44+
Font-Underline="True|False"
45+
ForeColor="color name|#dddddd"
46+
Height="size"
47+
ID="string"
48+
OnDataBinding="DataBinding event handler"
49+
OnDisposed="Disposed event handler"
50+
OnInit="Init event handler"
51+
OnLoad="Load event handler"
52+
OnPreRender="PreRender event handler"
53+
OnSelectedIndexChanged="SelectedIndexChanged event handler"
54+
OnUnload="Unload event handler"
55+
Rows="integer"
56+
runat="server"
57+
SelectedIndex="integer"
58+
SelectedValue="string"
59+
SelectionMode="Single|Multiple"
60+
TabIndex="integer"
61+
ToolTip="string"
62+
Visible="True|False"
63+
Width="size">
64+
65+
<asp:ListItem Value="value1" Text="Display Text 1" Selected="True|False" />
66+
<asp:ListItem Value="value2" Text="Display Text 2" />
67+
68+
</asp:ListBox>
69+
```
70+
71+
## Proposed Blazor Syntax
72+
73+
### Single Selection
74+
75+
```razor
76+
<ListBox TItem="object"
77+
StaticItems="items"
78+
Rows="5"
79+
@bind-SelectedValue="selectedValue" />
80+
81+
@code {
82+
private string selectedValue = "";
83+
84+
private ListItemCollection items = new()
85+
{
86+
new ListItem("Option One", "1"),
87+
new ListItem("Option Two", "2"),
88+
new ListItem("Option Three", "3"),
89+
new ListItem("Option Four", "4"),
90+
new ListItem("Option Five", "5")
91+
};
92+
}
93+
```
94+
95+
### Multiple Selection
96+
97+
```razor
98+
<ListBox TItem="object"
99+
StaticItems="items"
100+
SelectionMode="ListSelectionMode.Multiple"
101+
Rows="5"
102+
SelectedValues="selectedValues" />
103+
104+
@code {
105+
private List<string> selectedValues = new();
106+
}
107+
```
108+
109+
## Contributing
110+
111+
If you would like to help implement this component, please see our [contributing guide](https://github.com/FritzAndFriends/BlazorWebFormsComponents/blob/dev/CONTRIBUTING.md).
112+
113+
## See Also
114+
115+
- [DropDownList](DropDownList.md) - Single selection dropdown
116+
- [CheckBoxList](CheckBoxList.md) - Multiple checkboxes in a list
117+
- [RadioButtonList](RadioButtonList.md) - Radio button selection list

0 commit comments

Comments
 (0)