How to highlight selected list item in mud blazor?

Question

I have created a simple list in the Dialog component using MudBlazor. you can see the screenshot as an example.

this the code part of above dialog component.

    <div class="d-flex">
    <MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary" Class="mr-2">Edit </MudButton>
    <MudTextField @bind-Value="@paymentTerm" ></MudTextField>
</div>

<MudDialog @bind-IsVisible="visible" >

<DialogContent>
    
        <MudList Clickable="true" Dense="true" DisableGutters="false" >
            @foreach (var pytrm in paymentTermList)
            {
                <MudListItem Text="@pytrm" OnClick="@(()=>{paymentTerm=pytrm;visible=false;})"/>
            }

        </MudList>
   
</DialogContent>

</MudDialog>

@code{
    string paymentTerm;
    private bool visible;
    List<string> paymentTermList = new List<string>() { "Cash", "Credit", "Cheque - Cheque" };

    private void OpenDialog() => visible = true;
}

when we click on this one list item this dialog will close and the text value of the clicked item will assign to the above input field. Now I have needed to add 3 features to this list.

1. when click on one item ,it should be highlighted.

2. if we want to click on another item,while one item is already highlighted, the currently highlighted item should be unhighlighted. and clicked item should be highlighted.

3. if the input field is already filled with an item in this list,then if we want to change that value,when you open the dialog again,we should be able to see the value that is already selected should be highlighted.

How can i do this using blazor or mudblazor???anybody who knows about this please help me.I appreciate your help.

Answer 1

I fixed your code to show the selected value in the list. You can try it in this online playground: https://try.mudblazor.com/snippet/wuGPlGvzygPUlypU

Here is the fixed code:

<div class="d-flex">
    <MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary" Class="mr-2">Edit </MudButton>
    <MudTextField @bind-Value="@paymentTerm" ></MudTextField>
</div>

<MudDialog @bind-IsVisible="visible" >

<DialogContent>
    
        <MudList Clickable="true" Dense="true" DisableGutters="false" SelectedValue="@paymentTerm" >
            @foreach (var pytrm in paymentTermList)
            {
                <MudListItem Text="@pytrm" Value="@pytrm" OnClick="@(()=>{paymentTerm=pytrm; visible=false;})"/>
            }

        </MudList>
   
</DialogContent>

</MudDialog>

@code{
    string paymentTerm;
    private bool visible;
    List<string> paymentTermList = new List<string>() { "Cash", "Credit", "Cheque - Cheque" };

    private void OpenDialog() => visible = true;
}

Answer 2

In Index.razor

@page "/"

@inject IDialogService Dialog
@inject ISnackbar Snackbar

<div class="d-flex flex-wrap">
    <MudPaper Class="d-flex align-center pa-2 mx-2 my-2">
        <MudGrid>
            <MudItem xs="12" md="8">
                <MudTextField T="string" @bind-Value="PaymentTerm" />
            </MudItem>
        </MudGrid>
        <MudItem xs="12" md="4">
            <MudButton @onclick="@(_ => OpenPaymentTermsDialog(PaymentTerm))">Edit</MudButton>
        </MudItem>
    </MudPaper>
</div>
@code
{
    public string PaymentTerm { get; set; } = string.Empty;

    private async Task OpenPaymentTermsDialog(string paymentTerm)
    {
        var parameters = new DialogParameters { ["paymentTerm"] = paymentTerm };

        var dialog = Dialog.Show<PaymentTermsDialog>("Select payment term", parameters, new DialogOptions() { CloseButton = true, MaxWidth = MaxWidth.Medium });
        var result = await dialog.Result;

        if (!result.Cancelled)
        {
            Snackbar.Add($"{result.Data} selected as payment term", Severity.Success);
        }
    }
}

In PaymentTermsDialog.razor

@inject ISnackbar Snackbar

<MudDialog>
    <DialogContent>
        <MudChipSet @bind-SelectedChip="selected">
            @foreach (var term in PaymentTerms)
            {
                <MudChip Variant="Variant.Outlined" 
                    Text="@term" 
                    Class="@(term == PaymentTerm ? "mud-chip-selected" : "")" 
                    Color="Color.Secondary" OnClick="@(_ => SelectPaymentTerm(term))"/>
            }
        </MudChipSet>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }

    [Parameter] public string PaymentTerm { get; set; }

    public List<string> PaymentTerms { get; } = new List<string> { "Cash", "Credit", "Cheque - Cheque" };

    MudChip selected;

    void SelectPaymentTerm(string paymentTerm) => MudDialog.Close(DialogResult.Ok(paymentTerm));

    private void Cancel() => MudDialog.Cancel();

In MainLayout.razor

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

Answer 3

You could try binding to a property or field:

<MudList @bind-SelectedItem="SelectedItem" Clickable="true" Dense="true" DisableGutters="false">
    @foreach (var pytrm in paymentTermList)
    {
        <MudListItem Text="@pytrm" OnClick="@(()=>{paymentTerm=pytrm;visible=false;})"/>
    }
</MudList>

@code{
    //...
    private MudListItem SelectedItem { get; set; }
    //...
}