Creating a Tri-State checkbox component for blazor - checkbox

Question

<input #bind="Checked" type="checkbox" #onclick="eventArgs => { onclick(); }" indeterminate="#indeterminate" class="checkbox-input">
#code {
[Parameter]
public bool? selected { get; set; } = null;
public bool indeterminate { get; set; }
public bool Checked { get; set; }
public void onclick()
{
selected = selected == null ? true : selected == true ? new bool?() : false;
Checked = selected == null || selected == false;
indeterminate = selected == null;
}
}
This doesn't produce the desired result
The checkbox is always either checked or unchecked, never indeterminate.
Any ideas?

Answer 1

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; }
.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;
}
}
}

Answer 2

Using JS interop
Create a simple script
<script>
var auxiliarDOM = auxiliarDOM || {};
auxiliarDOM.setValue = function (element, property,value) {
element[property] = value;
}
</script>
Then in blazor you can has a ElementRef
#inject IJSRuntime JSRuntime
<input #ref="checkRef" type="checkbox" />
private ElementReference checkRef;
//this make the check indeterminate
await JSRuntime.InvokeVoidAsync("auxiliarDOM.setValue", checkRef, "indeterminate", true);
//this make the check no indeterminate
await JSRuntime.InvokeVoidAsync("auxiliarDOM.setValue", checkRef, "indeterminate", false);

Answer 3

Tri-state checkbox component, based on Eliseo's answer:
Working example: Blazor fiddle
JS to set the indeterminate attribute:
<script type="text/javascript">
function setElementProperty(element, property, value) {
element[property] = value;
}
</script>
CheckBox.razor file:
<input #ref=elementRef id="#elementId" type="checkbox" checked="#isChecked" #onchange="OnChange"/>
<label for="#elementId">#ChildContent</label>
CheckBox.razor.cs file:
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System;
using System.Threading.Tasks;
public partial class CheckBox
{
[Inject]
IJSRuntime jsRuntime { get; set; } = null!;
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public bool? Checked { get; set; }
[Parameter]
public EventCallback<bool?> CheckedChanged { get; set; }
private bool isChecked;
private ElementReference elementRef;
private string elementId = Guid.NewGuid().ToString();
private async Task OnChange(ChangeEventArgs e)
{
Checked = Checked switch
{
false => true,
true => null,
null => false,
};
isChecked = Checked != false;
bool indet = Checked == null;
await jsRuntime.InvokeVoidAsync("setElementProperty", elementRef, "indeterminate", indet);
await CheckedChanged.InvokeAsync(Checked);
}
}