preventdefault on checkbox

8 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
    5360 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
    5360 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.
  6. Jim
    Jim avatar
    2 posts
    Member since:
    Jul 2020

    Posted 4 days and 21 hours ago in reply to Marin Bratanov Link to this post

    Do you plan on fixing this issue with onclick on a telerik component?  So that you don't have to wrap it?
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5360 posts

    Posted 4 days and 20 hours ago Link to this post

    Hello Jim,

    This is not an issue with the component. Such attributes (and, by the way, attribute splatting as well) can work for simple DOM elements, like a <span>, for example. That does not work well for components (like what we do), and even worse when they have a complex HTML structure behind the simple tag you write. You can read more details and the discussion in this thread: https://feedback.telerik.com/blazor/1416978-support-arbitrary-attributes

    So, for the Telerik CheckBox Component - you can use the events it provides, and you can "cancel" the ValueChanged event if you don't want to update the value.

     

    Regards,
    Marin Bratanov
    Progress Telerik

  8. Jim
    Jim avatar
    2 posts
    Member since:
    Jul 2020

    Posted 4 days and 20 hours ago in reply to Marin Bratanov Link to this post

    I understand.  Thanks.
Back to Top