Completed
Last Updated: 11 Jan 2023 14:35 by ADMIN
Release 4.0.0 (18 Jan 2023) (R1 2023)
Werner
Created on: 21 Feb 2020 11:40
Category: Grid
Type: Feature Request
31
Blazor grid boolean checkbox display

A Blazor Grid column having a boolean data type field should display as checkbox instead of the text True/False.

A checkbox is a fine representation for the end user, True/False may be ok for a developer ;-)

Editing the boolean value by a checkbox is already fine.

11 comments
ADMIN
Dimo
Posted on: 11 Jan 2023 14:34

Hello everyone,

I am following up with more information about what we decided to do about this feature request.

  • We revamped the article for Grid Column Template to include an example for two kinds of read-only checkboxes (icon and CheckBox component).
  • We created a Knowledge Base article about immediate Grid checkbox editing that occurs in display mode and does not use the built-in edit mode (the page is not live yet, but the link should be correct for future use).

Both changes will be live after the coming release in mid January 2023. Currently you can see the raw markdown and example code in GitHub:

We evaluated all the pros and cons for a default checkbox display of boolean values and finally decided not to support it out-of-the-box. I assume this is not the kind of news you expect, so here is our reasoning:

  • There are multiple different non-text ways to display boolean data - an icon, an image, a Switch, or even a DropDownList, if the boolean values are nullable.
  • Disabled checkboxes (in display mode) are not focusable and don't provide a text alternative by default. Both these behaviors make them less accessible, compared to text. The application will still need to take care of related accessibility and possibly, localization.
  • Checkboxes are editable input components, rather than pure visualization UI. When used for display only, checkboxes may mislead users that they can edit them on the fly.
  • Default checkbox display will be confusing in in-cell editing - the user will have to click once to enter edit mode and then once again to change the value. This does not represent good user experience. A possible solution is to make checkboxes editable in display mode (as in the above KB article). However, this will remove the separation between display and edit mode, which we want to have. Also, this forces developers to have two active editing mechanisms at the same time.
  • Due to all above considerations, we believe that the existing template mechanism can provide more flexible and universal means to display boolean data, according to each specific business requirements.

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

improwise
Posted on: 17 Jan 2022 12:49
I am actually surprised there is even a discussion about this when there is a way of doing it that might not be perfect but still has been the default option for many many years. Sure, it might not be perfect, but with not better solution proposed, I just can't see how this can be "unplanned".
Marko
Posted on: 17 Jan 2022 11:59

Hi,

same here. All our business applications display checkboxes for boolean columns and i'm yet to meet a client which would like to have it differently, unless it indicates some specific status.

best regards

 

improwise
Posted on: 17 Jan 2022 10:59

Hi,

Even though a disabled checkbox might cause some confusion, it is still a much better default solution than displaying true/false. It is also a solution that does not require localization etc. unlike true/false. So I suggest using that as the default solution until a better solution is found. 

 

 

ADMIN
Marin Bratanov
Posted on: 05 Dec 2021 08:49

Hi Lee,

The Batch EditMode in the WebForms grid offers similar UX and it requires some special coding to get checkboxes to alter the value on the first click as well.

Typically, a grid quite explicitly differentiates "read" mode from "edit" mode, and there is always an action required to put a record in edit mode so that you can after that change values (say, interact with the checkbox).

Thus, if you want data to be editable in read mode - you need to implement that through the templates the grid offers.

This feature is still something that is a little dubious in my head - there are issues with the UX and the confusion using checkboxes as read-only indicators will cause, and this will definitely have to go through validation by our UX department when it gets to be reviewed in detail.

Regards,
Marin Bratanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Lee
Posted on: 02 Dec 2021 13:49

@Marin I get where you are coming from, however as a developer who creates tonnes of Grids for multiple applications, many of which require a checkbox column, I can offer my experience based on over 30+ different UK clients who all use TelerikGrids...

They all expect checkboxes to be checkable from the get-go (i.e using your template method). 

The TRUE/FALSE or disabled checkboxes only serve to cause confusion.  I would personally love it if we could have it similar to the ASP.NET AJAX method whereby, hovering over the checkbox turns it into edit mode, and then the user can tick it (or we just allow the edit directly)

The problem is, it's a lot of effort to code up a template than add a single "GridCheckBoxColumn", which multiplied by 100x adds to a lot of overhead on my end.


Gilles
Posted on: 12 Mar 2020 13:15

Actually, all my "GridCheckBoxColumn" displayed a checkbox.

Perhaps a disabled checkbox would be better but sometimes it's less "visible".

As Werner, I would say that the checkbox mode (disabled or not) could be the default and if text is defined, it overrides the default behaviour

Werner
Posted on: 24 Feb 2020 17:41
... I agree that the ability to set True / False text would already make it representable to users (this is my current workaround, too) without any "checkbox which cannot be clicked" confusion
ADMIN
Marin Bratanov
Posted on: 23 Feb 2020 11:43

Thank you for your feedback, Werner.

Let's see how the community likes the idea.

Some historical data - in other suites we had tried using disabled checkboxes for showing the state of the data, and people often found that confusing - they either expected to be able to check them off immediately (possible through templates, by the way), or they did not see the difference when the cell entered edit mode.

At the moment, an editor template can also give you a dropdown with the true/false texts (which you could then also localize in its data source as desired), and the Template can let you display localized values too, instead of True/False.

What I am saying is that this is achievable at the moment, and for an out-of-the-box feature, we'd need validation of the concepts to ensure they don't end up confusing people. Personally, I think that a way to specify the true/false texts is a feature that should make it even if we keep the current behavior as default.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Werner
Posted on: 21 Feb 2020 16:32

I suggest the following for out of the box use without having to use a template

  • If one of the following two attributes is defined, text display is preferred

<GridColumn Field="@boolValue" TrueText="Published" FalseText="-" ....

The equivalient editor can be a combobox providing the 2 text values (and an empty entry for nullable boolean values)

  • If no Text is defined, a checkbox is the default display/editor

A disabled checkbox would be the equivalent display of the checkbox in edit mode which is already perfect.

<input type="checkbox" disabled checked /> for true value

<input type="checkbox" disabled /> for false value

The equivalent editor in edit mode is a check box which is already perfect.

  • I would throw away the "True" / "False" display as I think nobody will use it finally.

 

Not Logged in

ADMIN
Marin Bratanov
Posted on: 21 Feb 2020 14:37

Hello Werner,

The recommended way to do that is to use a Template: https://docs.telerik.com/blazor-ui/components/grid/templates#column-template

Having a checkbox in "read" mode would be confusing for the users because a checkbox is an editor - so they would click it and expect the data to update. With a template you could choose how to handle that. For example, disable the checkbox, or add code to update the data on change.

That said, I agree that a checkbox or something like Yes/No is a better representation and I'd suggest you also post here how you imagine this to be exposed for configuration (especially considering the editor concern above).

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor