kendo ui on-demand RTL support with script
Question
I created an Autocomplete form. I followed this simple documentation to create a button together with its click handler script. Clicking this button shall toggle RTL support for the form.
I have a problem. When I click the button, it does not toggle RTL support for the form.
<body>
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<script>
$('#toggleRTL').on('click', function(event) {
var form = $('#speakerForm');
if (form.hasClass('k-rtl')) {
form.removeClass('k-rtl')
} else {
form.addClass('k-rtl');
}
})
</script>
<input id="autocomplete" type="text" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: {
data: [
{name: "Google"},
{name: "Bing"}
]
},
dataTextField: "name",
})
</script>
</body>
2 answers
solution1
0 ACCPTED 2015-10-27 02:16:38
I think you missing some point from the tutorial :
- you need to put all of your component to a container element and apply the k-rtl class to the container
- you have a problem on your js where you dont have element with id speakerForm
UPDATE 3. as your comment i, i observe the behavior of the k-rtl and kendo autocomplete widget and the result is the suggestion will be still on the left side if we create the widget first then adding the k-rtl clas. So what do we need is the container having the k-rtl class first then initializing the widget. 4. i updated my code so that every time you click the button the #autocomplete div will be removed with its parent( result from kendo autocomplete which is a span) then append new element and re-initializing the kendo autocompelete widget
I think it's working if you follow it like this
function createAutoComplete(){ if($("#autocomplete").data("kendoAutoComplete") != null){ $("#autocomplete").parent().remove(); $("#container").append("<input id='autocomplete' type='text' />") } $("#autocomplete").kendoAutoComplete({ dataSource: { data: [{ name: "Google" }, { name: "Bing" }] }, dataTextField: "name", }); } createAutoComplete(); $('#toggleRTL').on('click', function(event) { var form = $('#container'); console.log(form); if (form.hasClass('k-rtl')) { console.log("test1"); form.removeClass('k-rtl') } else { console.log("test2"); form.addClass('k-rtl'); } createAutoComplete(); })
<!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> <div id="container"> <input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" /> <input id="autocomplete" type="text" /> </div> </body> </html>
solution2
0 2015-10-27 09:56:32
I have updated your dojo.
http://dojo.telerik.com/AfeNi/4
But as @machun has stated you are missing some elements of the mechanics of this process.
I have added the missing form element speakerForm and then added some additional console.log() statements showing the actions being performed.
if you need any more info let me know.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.