CheckBox in GridColumn (template) - how to prevent it from being edited?

[Rob]

I have a grid that is needs to use EditMode=GridEditMode.Incell.  I have a Telerik CheckBox defined under Template for  a GridColumn.  In order to prevent the need to click twice on the checkbox in the grid (click once to enter edit and click again to actually change the state of the checkbox to checked/unchecked), I have to set the GridColumn to Editable=false and then use OnChange to set the model value:

 <TelerikGrid @ref="@BookingEquipmentGridRef"
              Data="@BookingEquipmentList"
              EditMode="@GridEditMode.Incell"
              OnEdit="@OnEquipmentEdit"
              OnRowClick="@OnEquipmentRowClick"
              OnRowRender="@OnRowRenderHandler"
              OnUpdate="@OnEquipmentUpdate"
              OnStateInit="@((GridStateEventArgs<BookingEquipmentModel> args) => OnEquipmentGridStateInit(args))"
              Height="226px"
              Size="@ThemeConstants.Grid.Size.Small"
              SelectionMode="GridSelectionMode.Single"
              SelectedItems="@SelectedEquipmentList"
              FilterMode="GridFilterMode.FilterMenu"
              Resizable="true"
              Sortable="true"
              Reorderable="true"
              Pageable="true"
              EnableLoaderContainer="false"
              PageSize="25">
   <GridColumns>
                <GridColumn Field=@nameof(BookingEquipmentModel.IsChassis) Title="Chassis" Editable="false" Filterable="false" Width="5rem">
                    <Template>
                        @{
                            var bem = (BookingEquipmentModel)context;
                        }
                        <TelerikCheckBox Value="@bem.IsChassis" ValueExpression="@(() => bem.IsChassis)" ValueChanged="@((bool newValue) => OnChassisChanged(newValue, bem))" />
                    </Template>
                </GridColumn>

   </GridColumns>
</TelerikGrid>

Because I have to set Editable=false the OnEdit event is not fired so I no longer can use args.IsCancelled = true to prevent cell update. In my OnChassisChanged I can not assigned the value to the model but the visual state will no longer match.

    private Task OnChassisChanged(bool newValue, object item)
    {
        if (item == null) return Task.CompletedTask;

        BookingEquipmentModel selectedEquipmentModel = (BookingEquipmentModel)item;

        if (EditableState(SelectedBooking, selectedEquipmentModel) == BookingEquipmentState.EditableStatus.No) return Task.CompletedTask;

        selectedEquipmentModel.IsChassis = newValue;
        selectedEquipmentModel.IsEdit = true;
        DataState.State = DataState.States.UnSaved;

        return Task.CompletedTask;
    }

My users were complaining about having to click twice on a checkbox to set it's new state (checked or unchecked) ... and I agree with their issue, but I can't seem to find a solution (and keep using the TelerikCheckBox) ... any suggestions?

I seem to recall reading  another thread from some other user having similar problem, but seem unable to locate it again.

 

 

[Dimo]

Hi Rob,

From UX perspective, the correct approach is to disable non-editable checkboxes, rather than revert their value on change.

On the other hand, the following REPL example is a modified version of this KB example: Edit Grid checkboxes with a single click

https://blazorrepl.telerik.com/GTaWGvYI30b6S0mE09

Regards,
Dimo
Progress Telerik

[Rob]

Hi Dimo,

Puzzled by your response, the code I posted does what is described in your link ... only difference is the ValueChanged method doesn't assign the value to the bound model if my conditions prevent it and simply does a return rather than update the bound model.

I should clarify that the code I posted is working as expected without the having to click twice.  I do need to investigate further as some of my users are reporting they need to click twice when they move focus from a dropdownlist (in EditorTemplate) to a column with checkbox (in a template) ... I can't seem to replicate the issue so wondering if this is a performance problem as I noticed in your example you simulate a network delay?

[Dimo]

@Rob - my example works in the same way when I remove the artificial delays (I tested both in Server and WebAssembly scenarios). The issue should be somewhere else. However, we will need a runnable example for inspection.