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

Answer 1

I think you missing some point from the tutorial :

1. you need to put all of your component to a container element and apply the k-rtl class to the container
2. 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("")
    	}
   
    	$("#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();
   
 })