kendo ui on-demand RTL support with script

前端未结

关注

 2  1608

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

相关标签:

2条回答

孤街浪徒

2021-01-27 16:46

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>

0 讨论(0)

广开言路

2021-01-27 17:07

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...