Using Switch in Toolbar

[Patrick]

Instead of using the Toggle button I would rather use a switch for a better visual representation.

If i add a template item as such:

items.Add().Template("<input type='checkbox' id='check'>");

 

and then I try to modify the attribute of the item using jquery as such, it fails (no error, it simply doesn't work):

$("#check").attr("checked", "checked");

 

but if i move the html markup out of the template and put it somewhere else on the page, it works perfectly fine.  This also happens when i try to use:

$("#check").kendoSwitch();

 

If i move the checkbox out of the toolbar it works fine.

Is there a way to use the switch, inside the toolbar?

 

[Ivan Danchev]

Hello Patrick,

To set the Switch checked state you can use its toggle API method. Here's an example:

@(Html.Kendo().ToolBar()
	.Name("ToolBar")
	.Items(items =>
	{
		items.Add().Template("<input type='checkbox' id='switch' checked='checked' />");
	})
)

<input type="button" id="btn1" value="toggle switch" onclick="toggleSwitch()" />

<script>	
	$(document).ready(function () {
		//initialize the Switch
		$("#switch").kendoSwitch();
	})

	function toggleSwitch() {
		//get a reference to the Switch
		var toolbarSwitch = $("#switch").data("kendoSwitch");

		//call its "toggle" API method:
		toolbarSwitch.toggle();
	}
</script>

If instead of toggling the state you want to set it either to checked or unchecked, you can use the check method and pass true or false respectively, e.g.:

toolbarSwitch.check(true);

Regards,
Ivan Danchev
Progress Telerik

[Patrick]

That isn't the problem.  When I try to transform the checkbox into the kendoswitch, it doesn't transform.  the selector returns with an object, but it never changes from a checkbox into a switch.

[Ivan Danchev]

Patrick,

Attached to this reply you can find a sample runnable project that contains the snippet from my previous reply. Here's a screenshot showing the Switch properly initialized in the Toolbar.

Give the example a try and let me know whether I am missing something with regard to reproducing the issue.

Regards,
Ivan Danchev
Progress Telerik