Skip to content

Commit ae0d5be

Browse files
dimodiyordan-mitev
dimodi
and
yordan-mitev
authored
docs(listbox): Add ListBox documentation (#1663)
* docs(listbox): add listbox documentation 1 * docs(listbox): Overview, Toolbar, Selection pages * chore(listbox): Enhance toolbar RenderFragment note * docs(listbox): connect, templates, drag and drop, polishing * Drag and Drop example refactoring * Drag and Drop example refactoring 2 * Drag and Drop example refactoring 3 * Drag and Drop example refactoring 4 * Drag and Drop example refactoring 5 * docs(listbox): Drag and Drop article text * docs(listbox): Events article and some polishing * docs(listbox): Overview and Toolbar polishing * docs(listbox): SEO descriptions * Update components/listbox/overview.md Co-authored-by: Yordan <[email protected]> * Update components/listbox/overview.md Co-authored-by: Yordan <[email protected]> * Update components/listbox/overview.md Co-authored-by: Yordan <[email protected]> * Update components/listbox/overview.md Co-authored-by: Yordan <[email protected]> * Update components/listbox/overview.md Co-authored-by: Yordan <[email protected]> * Update components/listbox/toolbar.md Co-authored-by: Yordan <[email protected]> * Update components/listbox/toolbar.md Co-authored-by: Yordan <[email protected]> * docs(listbox): Address comments --------- Co-authored-by: Yordan <[email protected]>
1 parent f3cd889 commit ae0d5be

File tree

8 files changed

+1419
-0
lines changed

8 files changed

+1419
-0
lines changed

‎_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -536,6 +536,7 @@ intro_columns:
536536
"DateRange Picker": "daterangepicker-overview"
537537
"DropDownList": "components/dropdownlist/overview"
538538
"HTML Editor": "editor-overview"
539+
"ListBox": "listbox-overview"
539540
"Masked Textbox": "maskedtextbox-overview"
540541
"MultiSelect": "multiselect-overview"
541542
"Numeric Textbox": "components/numerictextbox/overview"

‎components/listbox/connect.md

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
---
2+
title: Connect ListBoxes
3+
page_title: ListBox - Connect Multiple Instances
4+
description: How to connect (link) several ListBoxes and move items from one to another with the ListBox toolbar buttons.
5+
slug: listbox-connect
6+
tags: telerik,blazor,listbox
7+
published: True
8+
position: 30
9+
---
10+
11+
# Connect ListBox Instances
12+
13+
One of the main benefits of the Telerik Blazor ListBox is the ability to move items from one component instance to another. This article explains how to link multiple ListBoxes to transfer items.
14+
15+
The ListBox component allows connecting unlimited number of instances. However, the connecting always works in pairs:
16+
17+
* There is one primary ListBox instance and one secondary.
18+
* The primary ListBox is the one that shows toolbar buttons and fires `OnTransfer` events.
19+
* The secondary ListBox can be primary to a third ListBox component, and so on.
20+
21+
22+
## Configuration
23+
24+
To connect ListBox components:
25+
26+
1. Set the `Id` parameter of all ListBox instances.
27+
1. Set the `ConnectedListBoxId` parameter of the primary instance to the `Id` value of the secondary instance.
28+
1. [Hide the transfer buttons]({%slug listbox-toolbar%}) from the secondary instance, unless it's a primary one for another ListBox.
29+
1. Subscribe to the [`OnTransfer` event handler]({%slug listbox-events%}#ontransfer) of all primary ListBoxes.
30+
31+
> The object references in `args.Items` in the [`OnTransfer` handler]({%slug listbox-events%}#ontransfer) do not match the object references in the `Data` collection of the source ListBox. To remove items from the source ListBox, search for them by some unique identifier.
32+
33+
34+
## Example
35+
36+
>caption Connect and move items between ListBoxes
37+
38+
````CSHTML
39+
@* Connect and move items between ListBoxes *@
40+
41+
<TelerikListBox @ref="@ListBoxRef1"
42+
Data="@ListBoxData1"
43+
TextField="@nameof(ListBoxModel.Name)"
44+
Id="@ListBoxId1"
45+
ConnectedListBoxId="@ListBoxId2"
46+
SelectionMode="@ListBoxSelectionMode.Multiple"
47+
@bind-SelectedItems="@ListBoxSelectedItems1"
48+
OnTransfer="@( (ListBoxTransferEventArgs<ListBoxModel> args) => OnListBoxTransfer1(args) )">
49+
<ListBoxToolBarSettings>
50+
<ListBoxToolBar>
51+
<ListBoxToolBarTransferToTool />
52+
<ListBoxToolBarTransferFromTool />
53+
<ListBoxToolBarTransferAllToTool />
54+
<ListBoxToolBarTransferAllFromTool />
55+
</ListBoxToolBar>
56+
</ListBoxToolBarSettings>
57+
</TelerikListBox>
58+
59+
<TelerikListBox @ref="@ListBoxRef2"
60+
Data="@ListBoxData2"
61+
TextField="@nameof(ListBoxModel.Name)"
62+
Id="@ListBoxId2"
63+
ConnectedListBoxId="@ListBoxId3"
64+
SelectionMode="@ListBoxSelectionMode.Multiple"
65+
@bind-SelectedItems="@ListBoxSelectedItems2"
66+
OnTransfer="@( (ListBoxTransferEventArgs<ListBoxModel> args) => OnListBoxTransfer2(args) )">
67+
<ListBoxToolBarSettings>
68+
<ListBoxToolBar>
69+
<ListBoxToolBarTransferToTool />
70+
<ListBoxToolBarTransferFromTool />
71+
<ListBoxToolBarTransferAllToTool />
72+
<ListBoxToolBarTransferAllFromTool />
73+
</ListBoxToolBar>
74+
</ListBoxToolBarSettings>
75+
</TelerikListBox>
76+
77+
<TelerikListBox @ref="@ListBoxRef3"
78+
Data="@ListBoxData3"
79+
TextField="@nameof(ListBoxModel.Name)"
80+
Id="@ListBoxId3"
81+
SelectionMode="@ListBoxSelectionMode.Multiple"
82+
@bind-SelectedItems="@ListBoxSelectedItems3">
83+
<ListBoxToolBarSettings>
84+
<ListBoxToolBar Visible="false" />
85+
</ListBoxToolBarSettings>
86+
</TelerikListBox>
87+
88+
<br />
89+
<br />
90+
91+
<label><TelerikCheckBox @bind-Value="@SelectItemsInDestination" /> Select Moved Items in Destination ListBox</label>
92+
93+
@code {
94+
private TelerikListBox<ListBoxModel> ListBoxRef1 { get; set; } = null!;
95+
private TelerikListBox<ListBoxModel> ListBoxRef2 { get; set; } = null!;
96+
private TelerikListBox<ListBoxModel> ListBoxRef3 { get; set; } = null!;
97+
98+
private const string ListBoxId1 = "listbox1";
99+
private const string ListBoxId2 = "listbox2";
100+
private const string ListBoxId3 = "listbox3";
101+
102+
private List<ListBoxModel> ListBoxData1 { get; set; } = new List<ListBoxModel>();
103+
private List<ListBoxModel> ListBoxData2 { get; set; } = new List<ListBoxModel>();
104+
private List<ListBoxModel> ListBoxData3 { get; set; } = new List<ListBoxModel>();
105+
106+
private IEnumerable<ListBoxModel> ListBoxSelectedItems1 { get; set; } = new List<ListBoxModel>();
107+
private IEnumerable<ListBoxModel> ListBoxSelectedItems2 { get; set; } = new List<ListBoxModel>();
108+
private IEnumerable<ListBoxModel> ListBoxSelectedItems3 { get; set; } = new List<ListBoxModel>();
109+
110+
private bool SelectItemsInDestination { get; set; } = true;
111+
112+
private void OnListBoxTransfer1(ListBoxTransferEventArgs<ListBoxModel> args)
113+
{
114+
if (args.DestinationListBoxId == ListBoxId1)
115+
{
116+
foreach (var item in args.Items)
117+
{
118+
ListBoxData2.RemoveAll(x => args.Items.Any(y => y.Id == x.Id));
119+
ListBoxData1.Add(item);
120+
if (SelectItemsInDestination)
121+
{
122+
ListBoxSelectedItems1 = ListBoxSelectedItems1.Append(item);
123+
}
124+
}
125+
}
126+
else
127+
{
128+
foreach (var item in args.Items)
129+
{
130+
ListBoxData1.RemoveAll(x => args.Items.Any(y => y.Id == x.Id));
131+
ListBoxData2.Add(item);
132+
if (SelectItemsInDestination)
133+
{
134+
ListBoxSelectedItems2 = ListBoxSelectedItems2.Append(item);
135+
}
136+
}
137+
}
138+
139+
ListBoxRef1.Rebind();
140+
ListBoxRef2.Rebind();
141+
}
142+
143+
private void OnListBoxTransfer2(ListBoxTransferEventArgs<ListBoxModel> args)
144+
{
145+
if (args.DestinationListBoxId == ListBoxId2)
146+
{
147+
foreach (var item in args.Items)
148+
{
149+
ListBoxData3.RemoveAll(x => args.Items.Any(y => y.Id == x.Id));
150+
ListBoxData2.Add(item);
151+
if (SelectItemsInDestination)
152+
{
153+
ListBoxSelectedItems2 = ListBoxSelectedItems2.Append(item);
154+
}
155+
}
156+
}
157+
else
158+
{
159+
foreach (var item in args.Items)
160+
{
161+
ListBoxData2.RemoveAll(x => args.Items.Any(y => y.Id == x.Id));
162+
ListBoxData3.Add(item);
163+
if (SelectItemsInDestination)
164+
{
165+
ListBoxSelectedItems3 = ListBoxSelectedItems3.Append(item);
166+
}
167+
}
168+
}
169+
170+
ListBoxRef2.Rebind();
171+
ListBoxRef3.Rebind();
172+
}
173+
174+
protected override void OnInitialized()
175+
{
176+
for (int i = 1; i <= 5; i++)
177+
{
178+
ListBoxData1.Add(new ListBoxModel()
179+
{
180+
Id = i,
181+
Name = $"Foo {i}"
182+
});
183+
}
184+
185+
for (int i = 101; i <= 103; i++)
186+
{
187+
ListBoxData2.Add(new ListBoxModel()
188+
{
189+
Id = i,
190+
Name = $"Bar {i}"
191+
});
192+
}
193+
}
194+
195+
public class ListBoxModel
196+
{
197+
public int Id { get; set; }
198+
public string Name { get; set; } = string.Empty;
199+
}
200+
}
201+
````
202+
203+
204+
## Next Steps
205+
206+
* [Enable ListBox drag-and-drop]({%slug listbox-dragdrop%})
207+
* [Implement ListBox templates]({%slug listbox-templates%})
208+
* [Handle ListBox events]({%slug listbox-events%})
209+
210+
211+
## See Also
212+
213+
* [Live Demo: ListBox](https://demos.telerik.com/blazor-ui/listbox/overview)

0 commit comments

Comments
 (0)