Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HxMultiSelect] Adds Floating Label type to MultiSelect component #899

Merged
Prev Previous commit
Next Next commit
reverted basic demo + separate testing page
hakenr committed Nov 25, 2024
commit fa73fcd36e6efc7221fff23dac340b15d8cb9889
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@
TItem="EmployeeDto"
TValue="int"
Data="@employees"
LabelType="LabelType.Floating"
@bind-Value="selectedEmployeeIds"
TextSelector="@(p => p.Name)"
ValueSelector="@(p => p.Id)"
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
@page "/HxMultiSelect_FloatingLabel"
@rendermode InteractiveServer
@inject IDemoDataService DemoDataService

<div class="m-3">

<HxMultiSelect Label="HxMultiSelect"
TItem="EmployeeDto"
TValue="int"
Data="@employees"
LabelType="LabelType.Floating"
@bind-Value="selectedEmployeeIds"
TextSelector="@(p => p.Name)"
ValueSelector="@(p => p.Id)"
NullDataText="Loading employees..."
EmptyText="-select employees-" />

For visual reference:
<HxSelect TItem="EmployeeDto"
TValue="int?"
Label="HxSelect"
LabelType="LabelType.Floating"
Data="employees"
@bind-Value="selectedEmployeeId"
TextSelector="@(employee => employee.Name)"
ValueSelector="@(employee => employee.Id)"
Nullable="true"
NullText="-select employee-"
NullDataText="Loading employees..." />

</div>


<p class="mt-3">Selected employees (IDs): @String.Join(", ", selectedEmployeeIds.Select(e => e.ToString()))</p>

@code {
private IEnumerable<EmployeeDto> employees;
private List<int> selectedEmployeeIds = new();
private int? selectedEmployeeId;

protected override async Task OnInitializedAsync()
{
employees = await DemoDataService.GetAllEmployeesAsync();
}
}