Checkbox not working in 2022.1.119

[Mattias]

Hi,

Just updated from 2021.3.1207 to 2022.1.119 (VS2022 and .NET6) and all my checkboxes used in templates on all pages are not working any more.

This code:

<script id="toolbar" type="text/x-kendo-template">
        
            <div id="blockSyncArea">
                 @(Html.Kendo().CheckBox().Name("blockSync").Enable(ViewBag.BlockSyncStatus.AllowUnblock).Checked(!ViewBag.BlockSyncStatus.BlockSync).Label("Sync Enabled").HtmlAttributes(new
             {
                 onchange = "onBlockSyncChanged();",
                 title = "Toogle to enable or disabled syncing with clients while editing."
             }))
            </div>
}
</script>

Renders like this in 2021.3.1207 (seems to be plain HTML5) and works correctly without any problems:

 <script id="toolbar" type="text/x-kendo-template">
            <div id="blockSyncArea">
                 <input checked="checked" class="k-checkbox" id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><label class="k-checkbox-label" for="blockSync">Sync Enabled</label><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" />
            </div>
</script>

But renders like this in 2022.1.119 and does not work and mess up my pages:

<script id="toolbar" type="text/x-kendo-template">
<div id="blockSyncArea">
                <input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("#blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});</script>
</div>
</script>
            

Clearly there has been a change using a kendoCheckBox function instead.

I get these errors in Chrome:

Uncaught SyntaxError: Unexpected token '<'

Uncaught Error: Invalid template:'
            <div id="blockSyncArea">
                 <input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("#blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n            <div id="blockSyncArea">\n                 <input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("';blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});;$kendoOutput+=;}return $kendoOutput;'
    at Object.compile (kendo.all.js:238:31)
    at Object.i [as template] (jquery.min.js:2:88736)
    at HTMLDocument.<anonymous> (Index:671:4117)
    at e (jquery.min.js:2:30005)
    at t (jquery.min.js:2:30307)

Please advise, what is the problem with my very simple code. I strongly suspect a bug in the rendering, since I use the checkboxes in kendo templates and in the error message there seems to be a invalid rendering of jQuery("';blockSync") at the end, that should be #blockSync?

Regards,

Mattias

[Tsvetomir]

Hi, Mattias, 

Indeed, the Checkbox widget evolved from plain HTML to a valid jQuery component. Therefore, in order to use them within templates, you should add the .ToClientTemplate() option to the Checkbox widget.

Let me know if the issue persists.

 

Regards,
Tsvetomir
Progress Telerik

[Mattias]

Not completely. I added .ToClientTemplate() at the end:

@(Html.Kendo().CheckBox().Name("blockSync").Enable(ViewBag.BlockSyncStatus.AllowUnblock).Checked(!ViewBag.BlockSyncStatus.BlockSync).Label("Sync Enabled").HtmlAttributes(new
		 	{
			 	onchange = "onBlockSyncChanged();",
			 	title = "Toogle to enable or disabled syncing with clients while editing."
		 	}).ToClientTemplate())

now it renders:

<input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" />
<input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" />
<script>kendo.syncReady(function(){jQuery("\#blockSync").kendoCheckBox({"checked":false,"label":"Sync Enabled","enabled":true});});<\/script>
			 

But in Chrome console I get this.

Uncaught TypeError: jQuery(...).kendoCheckBox is not a function
    at <anonymous>:1:49
    at Object.n [as syncReady] (kendo.aspnetmvc.js:900:42)
    at <anonymous>:1:7
    at b (jquery.min.js:2:839)
    at Pe (jquery.min.js:2:48536)
    at S.fn.init.prepend (jquery.min.js:2:50030)
    at R.fn.init.S.fn.<computed> [as prependTo] (jquery.min.js:2:51419)
    at init._toolbar (kendo.all.js:66476:101)
    at init._continueInit (kendo.all.js:64339:22)
    at new init (kendo.all.js:64329:26)

[Tsvetomir]

Hi Mattias, apart from the NuGet package, the client-side resources should be updated as well. Therefore, most probably the JavaScript is not updated and it is missing the kendoCheckBox() method. 

https://docs.telerik.com/aspnet-core/installation/getting-started-copy-client-resources

 

[Mattias]

Yes, of course. I missed that. Now its working again.

Thanks,

Mattias

[Mani]

I have also upgraded the project from 2020.1.119 to 2022.119 So then onwards the checkboxes are not working in kendo But I used ToClientTemplate(). at the end in kendo template it is working fine But in normal checkboxfor it is not working so how I want to made changes

 

[Mihaela]

Hi Mani,

I have prepared a REPL sample that contains a couple of CheckBoxFor(m => m) components - the first one is outside the template, and the second is integrated inside a TileLayout:

https://netcorerepl.telerik.com/wRafvFaK56xuWZtO47

Would you please review it and try replicating the issue you are experiencing?

[Mani]

Tq @Mihaela  it is working fine now