Add some way to specify indeterminate checkboxes in blazor

[mohankumar91]

Add some way to specify indeterminate checkboxes in blazor

Need this output (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)

[mkArtakMSFT]

We've moved this issue to the Backlog milestone. This means that it is not going to happen for the coming release. We will reassess the backlog following the current release and consider this item at that time. However, keep in mind that there are many other high priority features with which it will be competing for resources.

[julienGrd]

Hello, just a up to know what the the current state of this issue. Is something plan for example for the .net core 3.1 ?

thanks !

[mkArtakMSFT]

@julienGrd this is not something we plan to handle for 3.1.
At the moment, this is not even planned to happen during 5.0 timeframe. @SteveSandersonMS is this something we would accept a PR for?

[SteveSandersonMS]

It would be best to submit either a design proposal (ie a description of how this would be implemented) or a PR with a rough version of that implementation. Then we could determine whether this fits well enough to bake into the core.

[faina09]

I implemented this simple component in .NET core 3.1+.
Here is a fiddle.

The css is from bootstrap, needed to display an empty box, a checked one and a box "full" to indicate the states 0,1,-1 (can change these values easily):

<style>
    [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url(/img/glyphicons-halflings.png); background-position: 14px 14px; background-repeat: no-repeat; }
    .bootstrap-checkbox { display: inline-block; position: relative; width: 13px; height: 13px; border: 1px solid #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
        .bootstrap-checkbox i { position: absolute; left: -2px; top: -3px; }
    .icon-stop { background-position: -312px -72px; }
    /* -24px *1 -18px *4 */
    .icon-check { background-position: -288px 0px; }
</style>

and this is the blazor component:

<div @ref=checkboxElement class="bootstrap-checkbox" @onclick="(e) => OnClick(e)"><i class="@ImgClass"></i></div>@Description

@code {

    public ElementReference checkboxElement { get; set; }
    [Parameter]
    public string Description { get; set; }
    [Parameter]
    public bool? Checked { get; set; }
    public string ImgClass { get; set; }
    public int Value { get; set; }

    protected override void OnInitialized()
    {
        Value = Checked switch { null => -1, true => 1, false => 0 };
        ImgClass = Value switch { -1 => "icon-stop", 1 => "icon-check", _ => "" };
    }

    public void OnClick(MouseEventArgs e)
    {
        switch (ImgClass)
        {
            case "":
                ImgClass = "icon-check";
                Value = 1;
                break;
            case "icon-check":
                ImgClass = "icon-stop";
                Value = -1;
                break;
            case "icon-stop":
                ImgClass = "";
                Value = 0;
                break;
        }
    }
}