does BlazorColorPicker allow passing two parameters in 'Closed' event

Question

My requirement is to send two parameters in Closed event. I would appreciate if anyone can point me on how to achieve this. Please find BlazorColorPicker documentation: https://github.com/tossnet/Blazor-Color-Picker. Thanks.

Please see the code below. I have multiple color pickers in my application. 'Item' can be different based on which color picker was clicked. As per my requirement, below code should set the user selected color to a particular color picker that was clicked. But shows error when two paremeters are passed to Closed event.

     <button class="btn btn-primary" @onclick="OpenModal">
              <div style="background-color:@item.Color" class="buttonColor"></div>
     </button>

     <ColorPicker Title="My Blazor ColorPicker" IsOpened="isOpened" Closed="(args => ChangeEvent(args, item))" MyColor="@item.Color">
     </ColorPicker>



    public void ChangeEvent(ChangeEventArgs args, ItemElement item) 
    {
        item.Color = args.Value.ToString();
        isOpened = false;           
    }

I would appreciate if anyone can point the rite way to pass two parameters in Closed event. Thank you.

Edited: Modified code as per suggested answers.

My code was similar to what was suggested in the answers. But modified exactly similar now. Still shows error.

     <button class="btn btn-primary" @onclick="OpenModal">
              <div style="background-color:@item.Color" class="buttonColor"></div>
     </button>

     <ColorPicker Title="My Blazor ColorPicker" IsOpened="isOpened"  Closed="((args) => ClosedEvent(args, sitem))" MyColor="@item.Color">
     </ColorPicker>


    public void ChangeEvent(string args, ItemElement item) 
    {
        item.Color = args;
        isOpened = false;           
    }

Would appreciate if question can be reopened and answered. Thank you.

Additional details:

For reference, image showing multiple color picker in my application. Multiple color pickers

I was initially using Input type = "color" for colorPicker which worked fine for my scenario. But I needed a palette option as shown. color picker with palette option . Which was not available in Input type = "color". And was available in blazorColorPicker.

I am fine with using any color picker package as along as it satisfies my requirement of handling multiple color pickers and showing palette option similar to image shown above.

Answer 1

Here's a demo showing one way.

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

@foreach(var picker in _pickers)
{
     <button class="btn btn-primary me-2" @onclick="() => this.OnOpen(picker)">
        <div style="background-color:@picker.Color" class="buttonColor">&nbsp;</div>
        @picker.Title
    </button>

    <ColorPicker IsOpened="picker.IsOpen" MyColor="@picker.Color" Closed="(value) => this.OnClose(picker, value)"  />
}

<div class="bg-dark text-white m-2 p-2">
    @foreach(var picker in _pickers)
    {
        <pre>@picker.Title - Color: @picker.Color  - IsOpen: @picker.IsOpen</pre>
    }

</div>

@code{
    private List<ColorPickerData> _pickers = new();

    protected override Task OnInitializedAsync()
    {
        _pickers.Add(new() { Title="Picker 1" });
        _pickers.Add(new() { Title="Picker 2" });
        _pickers.Add(new() { Title = "Picker 3" });
        return Task.CompletedTask;
    }

    private Task OnClose(ColorPickerData data, string value)
    {
        data.IsOpen = false;
        data.Color = value;
        return Task.CompletedTask;
    }

    private Task OnOpen(ColorPickerData data)
    {
        data.IsOpen = true;
        return Task.CompletedTask;
    }

    public class ColorPickerData
    { 
        public string Title { get; set; } = "Color Picker";
        public bool IsOpen { get; set; }
        public string Color { get; set; } = "#000000";
    }
}