Поддержка RTL Kendo UI по требованию со скриптом

Я создал форму автозаполнения. Я следовал этой простой документации, чтобы создать кнопку вместе со скриптом обработчика кликов. Нажатие на эту кнопку переключит поддержку RTL для формы.

У меня проблема. Когда я нажимаю кнопку, она не включает поддержку RTL для формы.

демонстрация

<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 ответа

Решение

Я думаю, что вы упустили какой-то пункт из урока:

  1. вам нужно поместить весь ваш компонент в элемент контейнера и применить к нему класс k-rtl
  2. у вас есть проблема на вашем js, где у вас нет элемента с id speakerForm

ОБНОВЛЕНИЕ 3. В качестве вашего комментария я наблюдаю поведение виджета автозаполнения k-rtl и kendo, и в результате предложение останется слева, если мы сначала создадим виджет, а затем добавим классы k-rtl. Итак, что нам нужно, это контейнер, имеющий сначала класс k-rtl, а затем инициализировать виджет. 4. Я обновил свой код так, чтобы каждый раз, когда вы нажимали кнопку, div #autocomplete удалялся вместе с его родителем (результат автозаполнения kendo, который является span), затем добавлял новый элемент и повторно инициализировал виджет автозаполнения kendo.

Я думаю, что это работает, если вы следуете так

 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>

Источник

Я обновил ваше додзё.

http://dojo.telerik.com/AfeNi/4

Но, как сказал @machun, вы упускаете некоторые элементы механики этого процесса.

Я добавил отсутствующий элемент формы speakerForm, а затем добавил несколько дополнительных операторов console.log(), показывающих выполняемые действия.

если вам нужна дополнительная информация, дайте мне знать.

Источник
Другие вопросы по тегам