This dojo http://dojo.telerik.com/AfeNi/8 has been thankfully provided by David Shorthose for toggling between RTL and LTR directions in Kendo UI widgets.
It works without problems on Firefox. On Chrome and Safari, after the first button click, the form and the text inside it does not change the direction. Although this, browser's console does not show any errors.
Is there are any workarounds to work without problems in Chrome and Safari?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script></head>
<body>
<form id="speakerForm">
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<input id="autocomplete" type="text" />
</form>
</body>
</html>
<script>
$('#toggleRTL').on('click', function(event) {
console.log('activating');
var form = $('body');
console.log(form);
if (form.hasClass('k-rtl')) {
console.log('removing rtl support');
form.removeClass('k-rtl')
} else {
console.log('adding r-tl support');
form.addClass('k-rtl');
}
})
$("#autocomplete").kendoAutoComplete({
dataSource: {
data: [
{name: "Google"},
{name: "Bing"}
]
},
dataTextField: "name",
})
</script>
