preventdefault on checkbox

5 posts, 0 answers
  1. Morten
    Morten avatar
    5 posts
    Member since:
    Jun 2013

    Posted 30 Apr Link to this post

         Hi,

     

    I want to set preventDefault to true on my checkbox, something like this:

    <TelerikCheckBox Id="checkboxReader"  @onclick:preventDefault="true" Class="checkbox-rbac" @bind-Value="isReader"></TelerikCheckBox>

     

    But I get error:

    Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.TelerikCheckBox`1[[System.Boolean, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'onclick'.

    It works fine for normal input:

    <input id="checkbox-rbac-azure-01" class="checkbox-rbac-azure" type="checkbox" @onclick:preventDefault="true" />
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5314 posts

    Posted 30 Apr Link to this post

    Hi Morten,

    This approach is only possible with plain DOM elements, but it is not possible for components. You need to use an HTML element around the checkbox in a fashion similar to this: https://docs.telerik.com/blazor-ui/knowledge-base/inputs-handle-keyboard-events

    <div @onclick="@DivClick">
        <span @onclick:preventDefault="true"><TelerikCheckBox @bind-Value="@cbValue" /></span>
        <input id="checkbox-rbac-azure-01" class="checkbox-rbac-azure" type="checkbox" @onclick:preventDefault="true" />
    </div>
    
    @code{
        bool cbValue { get; set; }
        void DivClick()
        {
            Console.WriteLine("DIV click");
        }
    }

     

    Regards,
    Marin Bratanov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Morten
    Morten avatar
    5 posts
    Member since:
    Jun 2013

    Posted 30 Apr in reply to Marin Bratanov Link to this post

    Ok thanks Marin.

    I think I'm in a little catch22 here. I simply want the checkbox to not check (on the UI), but still want to capture the click and the value. I can get it to work with input like this:

    <td><input id="checkbox-rbac-azure-01" class="k-checkbox checkbox-rbac-azure" type="checkbox" @onclick="@(e => RoleChecked(e,AzureRoles.Reader))" @onclick:preventDefault="true" /></td>

     

    But this does not give me the object value only the mousevent.

    I tried this:

    <td>
                    <span @onclick:preventDefault="true">
                        <TelerikCheckBox Class="checkbox-rbac-azure" OnChange="@(e => RoleChecked2((bool)e, AzureRoles.Contributor))" @bind-Value="isContributor"></TelerikCheckBox>
                    </span>
                </td>

     

    but this prevents the onchange from firing.

  4. Morten
    Morten avatar
    5 posts
    Member since:
    Jun 2013

    Posted 30 Apr in reply to Morten Link to this post

    Anyways I can work it out with checking the value it is binded too, but that gives me some more workarounds though. Had been easier if I could capture the object from the OnChange event.
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5314 posts

    Posted 30 Apr Link to this post

    Hello Morten,

    If you need the user action (attempt to check/uncheck), use the ValueChanged event, determine whether you want to change the value and change it in the model if you need to. If not - don't change it and the UI won't change. 

     

    Regards,
    Marin Bratanov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top