Checkbox onclick event

[Taras]

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

[Alexander]

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

[Taras]

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]

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.

[Taras]

I reviewed this since I need to use the checkbox to control another function.

Running the app, after upgrading package to Telerik.UI.for.AspNet.Core (2022.1.119) gives this error, so the example doesn't work.

(index):53 
        
       Uncaught TypeError: jQuery(...).kendoCheckBox is not a function
    at HTMLDocument.<anonymous> (localhost/:53:201)
    at i (jquery.min.js:2:27466)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:28230)
    at Function.ready (jquery.min.js:2:30023)
    at HTMLDocument.K (jquery.min.js:2:30385)

[Alexander]

Hi Taras,

Normally such errors will be present if the version of the client-side files differentiates from the one of the NuGet package.

In general, upgrading through the NuGet Package Manager will not update the locally included files or CDN resources. Therefore, you will need to upgrade the files manually in order for the files to be up-to-date with the corresponding version of the NuGet package. For example:

 

<link href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.material-main-dark.min.css" rel="stylesheet" type="text/css" />
	<script src="https://kendo.cdn.telerik.com/2022.1.119/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2022.1.119/js/jszip.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.aspnetmvc.min.js"></script>

In this regard, I would recommend reviewing the following resource that you might find helpful:

• Upgrade Documentation - https://docs.telerik.com/aspnet-core/upgrade#upgrade

With that said, for your convenience, I have also updated the previously sent sample to the latest Telerik UI for ASP.NET Core version.

I hope you find this helpful.

[Taras]

I tried your updated sample.  On first build it said the Trial version of the package could not be found (like the 1st time)

I uninstalled the Trial version and installed the licensed version and ran the application.  It worked fine. 

This is the same process that I followed the first time.  Although I stated upgraded in the previous post, I did uninstall the trial version and install the current version.

Not sure why it worked this time and not the last.

[Alexander]

Indeed, this issue will occur if you don't have the Trial version installed locally. Updating the reference to the NuGet package should resolve the issue with a dependency not found, as I understand is the case. Also from the last response I understand the issue is also resolved, is that correct?

[Taras]

Correct, this version worked.

 

Thanks