This is a migrated thread and some comments may be shown as answers.

Using Switch in Toolbar

3 Answers 240 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 13 Dec 2019, 02:34 PM

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?

 

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 17 Dec 2019, 08:13 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Patrick
Top achievements
Rank 1
answered on 17 Dec 2019, 12:08 PM
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.
0
Ivan Danchev
Telerik team
answered on 19 Dec 2019, 12:31 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Toolbar
Asked by
Patrick
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Patrick
Top achievements
Rank 1
Share this question
or