Add a TriState feature to the indeterminate checkbox

[Jinjinov]

Is your feature request related to a problem? Please describe.

Now that #1467 is done, I would like for the checkbox to cycle trough unchecked, checked, indeterminate on mouse click

Describe the solution you'd like

Enable three states:

• either add bool IsTriState to the checkbox
• or determine when Check<TValue> is Check<bool?>

Overwrite @onchange so that bool? goes from false to true and then to null on mouse click

• false = unchecked
• true = checked
• null = indeterminate

Additional context

Working example: https://blazor.radzen.com/checkbox

[stsrki]

I'm not sure about this feature. It's not really how the native checkbox is working. And if you inspect the Radzen checkbox you will see it is just a custom div with some styling, not a regular input element.

[Jinjinov]

I agree that this is not how a checkbox works, but it is a really useful feature if you want to make an "advanced search with filters" on your website, for example:

• [X] Action
• [ ] Comedy
• [-] Drama

search should include all Action movies, it can be a Comedy or not, but exclude any Drama

It doesn't have to be a checkbox, but a control like this can be very useful.

[David-Moreira]

@stsrki this one's already custom right? Maybe we could add it to this one? The indeterminate would be the dot just sitting in the middle of the bar, I think it could actually look quite cool. And then you would have a bridge to also change the style to a custom checkbox if you really wanted I'm guessing. Does this make sense?

[David-Moreira]

Also to answer @Jinjinov question, I guess you have two immediate options to solve your problem:

• Create a nullable property that looks at the IsChecked and IsIndeterminate Checkbox properties and calculates it.
• Wrap Checkbox in your own checkbox component and also calculate it yourself.

EDIT: I am dumb, disregard the first option. You want to click and be able to set the indeterminate. But if you really need a solution immedtialy, I guess you can still take the second option and see if you can override and implement it yourself I'm guessing. :X

EDIT2: With the second option... maybe try with tracking the last known state and setting the IsIndeterminate flag to true at the correct times. This should theoretically work, right @stsrki ?

[stsrki]

The switch is just a regular checkbox with custom styles. And switching between true, false, and null is not so easy like it seems. We use @onchange which gives you only true or false. And somehow we would need to intercept that event and convert it to null in some cases. And we would also need to intercept a value coming from Parameter when check box is changed from outside. A lot of magic for my taste...

[stsrki]

EDIT2: With the second option... maybe try with tracking the last known state and setting the IsIndeterminate flag to true at the correct times. This should theoretically work, right @stsrki ?

In theory yes. The problem is that the native checkbox has only two states, and on top of that indeterminate overrides everything.

<Check TValue="bool?"
       Checked="true"
       Indeterminate="false">
    1
</Check>
<Check TValue="bool?"
       Checked="false"
       Indeterminate="false">
    2
</Check>
<Check TValue="bool?"
       Checked="true"
       Indeterminate="true">
    3
</Check>
<Check TValue="bool?"
       Checked="false"
       Indeterminate="true">
    4
</Check>

I don't think it can be done with a custom component.

[David-Moreira]

I might be wrong but I actually think you can or I am just not seeing the whole picture yet. I'll see if I have time later today to test it out.

[Jinjinov]

I made my own component, for now it will be useful: https://stackoverflow.com/a/66370265/4675770

I am already using it in my project and it is working just as I wanted.

[David-Moreira]

Oh glad you got it working then. :) I was trying something with wrapping the Blazorise Check with an internal queue that tracks the next value and basically just looking at every possible choice, but this block here looks simpler:

Checked = Checked switch
{
    false => true,
    true => null,
    null => false,
};

I don't think the code on that thread handles the Parameter Checked being mutated from outside though. Maybe it should have a custom setter, but you might not need it for your use case eitherway. :)

[Jinjinov]

Yes, doing something like this in Blazorise would be more difficult. Thanks for taking the time to check! :)