Skip to content

Commit 2c5a877

Browse files
sabitertanmckaragoz
sabitertan
and
mckaragoz
authored
Added ability to set Select All checkbox positions (#113)
* Added ability to set Select All checkbox position * Added new positions for SelectAll * Updated select all positions * AfterSearchBox Little Change --------- Co-authored-by: mckaragoz <[email protected]>
1 parent d2e26fc commit 2c5a877

File tree

7 files changed

+112
-5
lines changed

7 files changed

+112
-5
lines changed

‎CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<div @attributes="UserAttributes" id="@_elementId" class="@Classname" style="@Stylename" tabindex="-1" @onkeydown="HandleKeyDown" @onfocusout="HandleOnFocusOut">
88
<CascadingValue Value="@this" IsFixed="true">
9-
@if (MultiSelection && SelectAll && ParentList == null)
9+
@if (MultiSelection && SelectAll && SelectAllPosition == SelectAllPosition.BeforeSearchBox && ParentList == null)
1010
{
1111
<MudListItemExtended T="T" IsFunctional="true" Icon="@SelectAllCheckBoxIcon" IconColor="@Color" Text="@SelectAllText" OverrideMultiSelectionComponent="MultiSelectionComponent.None" OnClick="@(() => SelectAllItems(_allSelected))" OnClickHandlerPreventDefault="true" Dense="@Dense" Class="mb-2" />
1212
<MudDivider />
@@ -17,12 +17,21 @@
1717
@if (SearchBox == true)
1818
{
1919
<MudListSubheaderExtended T="T" Style="position: sticky; top: -12px; background-color: var(--mud-palette-background); z-index: 10">
20-
<div @onkeydown:stopPropagation>
20+
21+
<div @onkeydown:stopPropagation class="mud-list-item-extended">
22+
@if (MultiSelection && SelectAll && SelectAllPosition == SelectAllPosition.NextToSearchBox && ParentList == null)
23+
{
24+
<MudCheckBox CheckedIcon="@SelectAllCheckBoxIcon" Color="@Color" @bind-Checked="_allSelected" @onclick="() => SelectAllItems(_allSelected)" Dense="true" />
25+
}
2126
<MudTextField @bind-Value="@_searchString" Class="@ClassSearchBox" OnKeyUp="@(() => UpdateSelectedStyles())" Immediate="true" Variant="Variant.Outlined" Margin="Margin.Dense"
22-
Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color" AutoFocus="@SearchBoxAutoFocus" />
27+
Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color" AutoFocus="@SearchBoxAutoFocus" />
2328
</div>
24-
2529
</MudListSubheaderExtended>
30+
@if (MultiSelection && SelectAll && SelectAllPosition == SelectAllPosition.AfterSearchBox && ParentList == null)
31+
{
32+
<MudListItemExtended T="T" IsFunctional="true" Icon="@SelectAllCheckBoxIcon" IconColor="@Color" Text="@SelectAllText" OverrideMultiSelectionComponent="MultiSelectionComponent.None" OnClick="@(() => SelectAllItems(_allSelected))" OnClickHandlerPreventDefault="true" Dense="@Dense" Class="mb-2" />
33+
<MudDivider />
34+
}
2635
}
2736
<MudVirtualize IsEnabled="@Virtualize" Items="GetSearchedItems()" Context="item" OverscanCount="@OverscanCount">
2837
@if (MudSelectExtended != null)

‎CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor.cs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,13 @@ public bool MultiSelection
285285
[Category(CategoryTypes.FormComponent.ListBehavior)]
286286
public bool SelectAll { get; set; }
287287

288+
/// <summary>
289+
/// Sets position of the Select All checkbox
290+
/// </summary>
291+
[Parameter]
292+
[Category(CategoryTypes.List.Appearance)]
293+
public SelectAllPosition SelectAllPosition { get; set; } = SelectAllPosition.BeforeSearchBox;
294+
288295
/// <summary>
289296
/// Define the text of the Select All option.
290297
/// </summary>

‎CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
<CascadingValue Value="@this" IsFixed="true">
110110
<MudListExtended @ref="@_list" T="T" @bind-SelectedValue="@Value" @bind-SelectedValues="@SelectedValues" @bind-SelectedItem="@SelectedListItem" @bind-SelectedItems="@SelectedListItems"
111111
Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
112-
MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllText="@SelectAllText"
112+
MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllPosition="@SelectAllPosition" SelectAllText="@SelectAllText"
113113
CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
114114
ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" ToStringFunc="@ToStringFunc">
115115
@ChildContent

‎CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor.cs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,13 @@ public bool Dense
196196
[Category(CategoryTypes.FormComponent.ListBehavior)]
197197
public bool SelectAll { get; set; }
198198

199+
/// <summary>
200+
/// Sets position of the Select All checkbox
201+
/// </summary>
202+
[Parameter]
203+
[Category(CategoryTypes.List.Appearance)]
204+
public SelectAllPosition SelectAllPosition { get; set; } = SelectAllPosition.BeforeSearchBox;
205+
199206
/// <summary>
200207
/// Define the text of the Select All option.
201208
/// </summary>

‎CodeBeam.MudExtensions/Enums/SelectAllPosition.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions.Enums
4+
{
5+
public enum SelectAllPosition
6+
{
7+
[Description("Upper line")]
8+
BeforeSearchBox,
9+
[Description("Start of the searchbox in the same line")]
10+
NextToSearchBox,
11+
[Description("Below line")]
12+
AfterSearchBox
13+
}
14+
}

‎ComponentViewer.Docs/Pages/Components/SelectExtendedPage.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,9 @@
2929
<ExampleCard ExampleName="SelectExtendedExample5" Title="Chips" Description="Chips can be used as value visualization.">
3030
<SelectExtendedExample5 />
3131
</ExampleCard>
32+
33+
<ExampleCard ExampleName="SelectExtendedExample7" Title="Select All position" Description="Select All can be places next to search.">
34+
<SelectExtendedExample7 />
35+
</ExampleCard>
3236
</ExamplePage>
3337

‎ComponentViewer.Docs/Pages/Examples/SelectExtendedExample7.razor‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<MudGrid>
2+
<MudItem xs="12" sm="8">
3+
<MudSelectExtended ItemCollection="states" SearchBox="true" SelectAllPosition="_selectAllPosition" SelectAll="true" MultiSelectionTextFunc="@GetMultiSelectionText" MultiSelection="true" ValuePresenter="_valuePresenter" @bind-Value="value" @bind-SelectedValues="options" T="string" Label="US States" AdornmentIcon="@Icons.Material.Filled.Search" AnchorOrigin="Origin.BottomCenter">
4+
@foreach (var state in states)
5+
{
6+
<MudSelectItemExtended T="string" Value="@state" Text="@state" />
7+
}
8+
</MudSelectExtended>
9+
</MudItem>
10+
11+
<MudItem xs="12" sm="4">
12+
<MudRadioGroup T="SelectAllPosition" @bind-SelectedOption="_selectAllPosition">
13+
<MudRadio Option="SelectAllPosition.BeforeSearchBox" Color="Color.Primary">Before Search (Default)</MudRadio>
14+
<MudRadio Option="SelectAllPosition.NextToSearchBox" Color="Color.Primary">Start of the searchbox in the same line</MudRadio>
15+
<MudRadio Option="SelectAllPosition.AfterSearchBox" Color="Color.Primary">After Search</MudRadio>
16+
</MudRadioGroup>
17+
<MudGrid Class="mt-3 px-4">
18+
<MudItem xs="6">
19+
<MudText Typo="Typo.subtitle2">Value:</MudText>
20+
<MudText Typo="Typo.subtitle2">"</MudText>
21+
<MudText Typo="Typo.body2" Class="pl-4">@value</MudText>
22+
<MudText Typo="Typo.subtitle2">"</MudText>
23+
</MudItem>
24+
<MudItem xs="6">
25+
<MudText Typo="Typo.subtitle2">SelectedValues: HashSet&lt;string&gt;</MudText>
26+
<MudText Typo="Typo.subtitle2">{</MudText>
27+
<MudText Typo="Typo.body2" Class="pl-4">@(string.Join(", ", options.Select(x => $"\"{x}\"")))</MudText>
28+
<MudText Typo="Typo.subtitle2">}</MudText>
29+
</MudItem>
30+
</MudGrid>
31+
</MudItem>
32+
</MudGrid>
33+
34+
@code {
35+
ValuePresenter _valuePresenter = ValuePresenter.Text;
36+
SelectAllPosition _selectAllPosition;
37+
string value { get; set; } = "Nothing selected";
38+
IEnumerable<string> options { get; set; } = new HashSet<string>() { "Alaska", "California" };
39+
40+
private string[] states =
41+
{
42+
"Alabama", "Alaska", "American Samoa", "Arizona",
43+
"Arkansas", "California", "Colorado", "Connecticut",
44+
"Delaware", "District of Columbia", "Federated States of Micronesia",
45+
"Florida", "Georgia", "Guam", "Hawaii", "Idaho",
46+
"Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
47+
"Louisiana", "Maine", "Marshall Islands", "Maryland",
48+
"Massachusetts", "Michigan", "Minnesota", "Mississippi",
49+
"Missouri", "Montana", "Nebraska", "Nevada",
50+
"New Hampshire", "New Jersey", "New Mexico", "New York",
51+
"North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
52+
"Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
53+
"Rhode Island", "South Carolina", "South Dakota", "Tennessee",
54+
"Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
55+
"Washington", "West Virginia", "Wisconsin", "Wyoming",
56+
};
57+
58+
private string GetMultiSelectionText(List<string> selectedValues)
59+
{
60+
if (!selectedValues.Any())
61+
{
62+
return null;
63+
}
64+
return $"{selectedValues.FirstOrDefault()} + {selectedValues.Count-1} state{(selectedValues.Count-1 > 1 ? "s have" : " has")} been selected";
65+
}
66+
}

0 commit comments

Comments
 (0)