Hey guys. I am trying to use the dropdown component to decide the swimlane on the kanban board but when I refresh my browser my current solution does save the dropdown option but the kanban is reset. How can I make sure the kanban also persists?
@using Syncfusion.Blazor.Kanban
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns
@inject Blazored.LocalStorage.ILocalStorageService LocalStorage
<h3>Machine View Models</h3>
@if (MachineViewModels != null && MachineViewModels.Any())
{
<!-- Dropdown for selecting filter option -->
<SfDropDownList TValue="string"
TItem="FilterOption"
Placeholder="@dropdownPlaceholder"
DataSource="@filterOptions"
Value="@selectedFilterOption"
ValueChanged="OnOptionChanged">
<DropDownListFieldSettings Text="Text" Value="Id"></DropDownListFieldSettings>
</SfDropDownList>
<SfKanban TValue="MachineViewModel" KeyField="Stage" DataSource="@MachineViewModels" @ref="kanban">
<KanbanColumns>
<KanbanColumn HeaderText="In Transit To Dealer" KeyField=@(new List<string>() { "In Transit To Dealer" }) AllowAdding="true"></KanbanColumn>
<KanbanColumn HeaderText="Retailed To End Customer" KeyField=@(new List<string>() { "Retailed To End Customer" }) AllowAdding="true"></KanbanColumn>
</KanbanColumns>
<KanbanCardSettings HeaderField="Machine" ContentField="EndCustomerName"></KanbanCardSettings>
<KanbanSwimlaneSettings KeyField="@SwimlaneField"></KanbanSwimlaneSettings>
<KanbanEvents TValue="MachineViewModel" DragStop="@DragStopHandler"></KanbanEvents>
<KanbanDialogSettings>
<Template>
@{
MachineViewModel data = (MachineViewModel)context;
<table>
<tbody>
<tr>
<td class="e-label">Machine</td>
<td>
<SfTextBox CssClass="e-field" Value="@data.Machine" Enabled="false"></SfTextBox>
</td>
</tr>
<tr>
<td class="e-label">Stage</td>
<td>
<SfTextBox CssClass="e-field" Value="@data.Stage" Enabled="false"></SfTextBox>
</td>
</tr>
<tr>
<td class="e-label">End Customer</td>
<td>
<SfDropDownList TValue="EndCustomerViewModel"
TItem="EndCustomerViewModel"
CssClass="e-field"
DataSource="EndCustomerViewModels"
Value="@selectedEndCustomer"
ValueChanged="HandleValueChange">
<DropDownListFieldSettings Text="EndCustomerName" Value="EndCustomerName"></DropDownListFieldSettings>
</SfDropDownList>
</td>
</tr>
</tbody>
</table>
}
</Template>
</KanbanDialogSettings>
</SfKanban>
}
else
{
<p>No machines to display.</p>
}
@code {
// Filter option class
public class FilterOption
{
public string Id { get; set; }
public string Text { get; set; }
}
private string dropdownPlaceholder = "Select Filter Option";
[Parameter]
public List<MachineViewModel> MachineViewModels { get; set; }
[Parameter]
public List<StageViewModel> StageViewModels { get; set; }
[Parameter]
public List<EndCustomerViewModel> EndCustomerViewModels { get; set; }
private EndCustomerViewModel selectedEndCustomer;
private MachineViewModel currentMachineViewModel;
private string SwimlaneField = nameof(MachineViewModel.Dealer); // Default SwimlaneField
private string selectedFilterOption;
private List<FilterOption> filterOptions = new List<FilterOption>
{
new FilterOption { Id = "1", Text = "Machine" },
new FilterOption { Id = "2", Text = "Dealer" },
new FilterOption { Id = "3", Text = "End Customer" }
};
private SfKanban<MachineViewModel> kanban; // Reference to the Kanban component
protected override async Task OnInitializedAsync()
{
// Retrieve the saved filter option ID
var savedOptionId = await LocalStorage.GetItemAsync<string>("SelectedFilterOptionId");
if (!string.IsNullOrEmpty(savedOptionId))
{
// Restore the selected filter option
selectedFilterOption = savedOptionId;
// Update SwimlaneField and placeholder based on the saved ID
SwimlaneField = savedOptionId switch
{
"1" => nameof(MachineViewModel.Machine),
"2" => nameof(MachineViewModel.Dealer),
"3" => nameof(MachineViewModel.EndCustomerName),
};
dropdownPlaceholder = savedOptionId switch
{
"1" => "Machine Selected",
"2" => "Dealer Selected",
"3" => "End Customer Selected",
_ => "Select Filter Option"
};
}
else
{
// Default values if no saved state is found
selectedFilterOption = null;
dropdownPlaceholder = "Select Filter Option";
SwimlaneField = nameof(MachineViewModel.Dealer); // Default SwimlaneField
}
}
// Handles the filter option change
private async Task OnOptionChanged(string selectedOptionId)
{
// Update SwimlaneField and placeholder
SwimlaneField = selectedOptionId switch
{
"1" => nameof(MachineViewModel.Machine),
"2" => nameof(MachineViewModel.Dealer),
"3" => nameof(MachineViewModel.EndCustomerName),
};
dropdownPlaceholder = selectedOptionId switch
{
"1" => "Machine Selected",
"2" => "Dealer Selected",
"3" => "End Customer Selected",
_ => "Select Filter Option"
};
selectedFilterOption = selectedOptionId;
// Persist the selected ID in localStorage
await LocalStorage.SetItemAsync("SelectedFilterOptionId", selectedOptionId);
// Recreate Kanban component if necessary
if (kanban != null)
{
kanban = null;
}
StateHasChanged(); // Trigger a UI update
}
// Handles the end customer selection change
private void HandleValueChange(EndCustomerViewModel selectedValue)
{
selectedEndCustomer = selectedValue;
Console.WriteLine($"Selected EndCustomer: {selectedEndCustomer?.EndCustomerName}");
if (currentMachineViewModel != null)
{
currentMachineViewModel.EndCustomerName = selectedEndCustomer.EndCustomerName;
currentMachineViewModel.NotifyChange(); // Notify change in machine's end customer
}
}
// This method will be triggered when a card is dragged and dropped into a column
public async Task DragStopHandler(Syncfusion.Blazor.Kanban.DragEventArgs<MachineViewModel> args)
{
var targetColumn = args.Data[0].Stage;
var draggedMachineViewModel = args.Data[0];
Console.WriteLine($"Current machine: {currentMachineViewModel?.Machine}");
// Update the current machine model
currentMachineViewModel = draggedMachineViewModel;
// Check if the target column is "Retailed To End Customer"
if (targetColumn == "Retailed To End Customer")
{
var cardData = args.Data[0]; // The dragged card data
// Open the dialog for the dragged card
await kanban.OpenDialogAsync(Syncfusion.Blazor.Kanban.CurrentAction.Edit, cardData); // Open the dialog asynchronously for the card
}
}
}
::contentReference[oaicite:0]{index=0}
