Checkbox onclick event

1 Answer 56 Views
Checkbox
Taras
Top achievements
Rank 1
Veteran
Taras asked on 14 Oct 2021, 05:08 PM

I haven't been able to find and docs or samples on this.

I have a checkbox on an ASP.NET Core View page. 

When checked it should set two button groups to unselected (may not be correct terminology) and hide two div classes that display text.

The div classes are displayed based on the two button selections.

Problem is I can't seem to find anything that shows how to capture an onclick event for the Kendo().Checkbox.

Is this possible?

 

TIA

1 Answer, 1 is accepted

Sort by
0
Accepted
Alexander
Telerik team
answered on 18 Oct 2021, 08:33 AM

Hi, Taras

Thank you for the provided information. In general, the Telerik UI CheckBox HtmlHelper for ASP.NET Core is based on the conventional HTML checkbox element. That said, to achieve the desired result you can access the CheckBox through the classes Telerik UI for ASP.NET Core generates for it.

Also, additional information on how checkboxes are generated is available in the jQuery CheckBoxes documentation for the classes.

@{
    ViewData["Title"] = "Home Page";
}

<div class="myContainer">
    <div>
        @(Html.Kendo()
         .Button()
         .Name("namesBtn")
         .Content("Add names")
         )
    </div>
    <div>
        @(Html.Kendo()
          .ButtonGroup()
          .Name("selectMonth")
          .Items(items=>
          {
              items.Add().Text("January");
              items.Add().Text("February");
              items.Add().Text("March");
          })
         )
    </div>
    <div>
        @(Html.Kendo()
          .ButtonGroup()
          .Name("selectSeason")
          .Items(items=>
          {
              items.Add().Text("Winter");
              items.Add().Text("Autumn");
              items.Add().Text("Spring");
          })
         )
    </div>
    <div>
        @(Html.Kendo().CheckBox()
        .Name("namesCheckBox")
        .Checked(false)
        .Label("Remove names")
    )
    </div>
</div>
@section scripts{
    <script>
        $(function () {
            $("#namesBtn").one("click", function () {
                $(".myContainer").append("<div><p id=firstName>First Name</p></div>");

                $(".myContainer").append("<div><p id=lastName>Last Name</p></div>");

                $("#namesBtn").remove();
            })

            $(".k-checkbox").on("click", function () {
                if (this.checked) {
                    $("#firstName").addClass("d-none");
                    $("#lastName").addClass("d-none");

                    $("#selectMonth").data('kendoButtonGroup').selectedIndex = null;
                    $('#selectMonth').data('kendoButtonGroup').current().removeClass("k-state-active");

                    $("#selectSeason").data('kendoButtonGroup').selectedIndex = null;
                    $('#selectSeason').data('kendoButtonGroup').current().removeClass("k-state-active");
                }
                else {
                    $("#firstName").removeClass("d-none");
                    $("#lastName").removeClass("d-none");
                }
            })
        })
    </script>
}

 

In this example, I have added elements similar to your scenario. Also, I have added an on-click event that

  • hides two div elements with text and
  • unselected two-button groups based on their state class. Additionally, note the selected indexes of both button groups should be set to null so that they are reset.

For additional information, you can review the Button Group documentation. Attached is a sample app for you to review.

If this example does not help you can update the sample app attached with the configuration you have and send it back to me. This way I can review both the behavior and scenario you are in and suggest a way to achieve the desired result.

Regards, Alexander 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/.

Taras
Top achievements
Rank 1
Veteran
commented on 22 Oct 2021, 06:43 PM

Hi Alexander,

Excuse my late response, I was out of town most of the week.

I got portions working.  What I should have clarified is I am using radio buttons for selections.  I need a programmatic way of deselecting them.  Aesthetically, radio buttons look better but I could use buttons if that was the only option.

The other thing that I would like to be able to do is to uncheck the checkbox programmatically after it being checked and hiding the <div> sections.

Alexander
Telerik team
commented on 27 Oct 2021, 10:19 AM

Hi Taras,

Thank you for the additional clarification.

I have updated the sample application with a scenario close to yours and it is as follows:

HTML:

<div>
    <input type="radio" name="radioBtn1" id="radioBtn1" class="k-radio">
    <label class="k-radio-label">Show first name</label>

    <input type="radio" name="radioBtn2" id="radioBtn2" class="k-radio">
    <label class="k-radio-label">Show last name</label>
</div>
<div>
    <div id="firstNameSection" class="d-none">
        <p>John</p>
    </div>
    <div id="lastNameSection" class="d-none">
        <p>Johnson</p>
    </div>
</div>
<div>
    @(Html.Kendo().CheckBox()
        .Name("namesCheckBox")
        .Checked(false)
        .Label("Remove names")
    )
</div>

JavaScript:

  <script>
        $("#radioBtn1").on("click", function () {
            if (this.checked) {
                $("#firstNameSection").removeClass("d-none");
                $(".k-checkbox").removeAttr("checked");
            }
        });
        $("#radioBtn2").on("click", function () {
            if (this.checked) {
                $("#lastNameSection").removeClass("d-none");
                $(".k-checkbox").removeAttr("checked");
            }
        });
        $(function () {
            $(".k-checkbox").on("click", function () {
                if (this.checked) {
                    $('#firstNameSection').addClass("d-none");
                    $('#lastNameSection').addClass("d-none");

                    $('#radioBtn1').removeAttr("checked");
                    $('#radioBtn2').removeAttr("checked");

                }
            })
        })
    </script>

In this updated example I am:

  • Showing div elements with text depending on a radio button's checked attribute. Which is handled in a on-click event for each of them (highlighted in green)
  • Upon checking the check box I am hiding the div elements and reset the radio button by removing the checked attribute (highlighted in orange).
  • When the radio buttons are selected again the checkbox is then deselected by removing the checked attribute (highlighted in blue).

Finally, I am attaching the updated sample project for you to review

If this example does not help you can update the sample app attached with a configuration close to yours. This way I can review the problem and suggest a way to achieve the desired result.

Tags
Checkbox
Asked by
Taras
Top achievements
Rank 1
Veteran
Answers by
Alexander
Telerik team
Share this question
or