Изменение DataTextField Kendo MultSelect динамически

Question

У меня есть поле со списком Kendo с двумя значениями: Main, Secondary. У меня также есть mutliselect Kendo, связанный с источником данных. По умолчанию в поле со списком отображаются «Main» и multi select отображает поле «Parent1», «Parent2» i.e. «Name» источника данных.

Я хотел бы динамически изменять dataTextField для multiselect в Name2, если пользователь выбирает «Вторичный» из поля со списком, аналогично, multiselect должен быть связан с «Name» в качестве его DataTextField, когда пользователь выбирает «Main» from падение.

здесь является Fiddle

HTML

<select id="CategoryOption" style="width: 100px;"> 
<option>Main</option> 
<option>Secondary</option> 
</select> <br><br><br><br><br><br> 
<select id="MainCategory" style="width: 90%;"></select> 

Java Script

createCategoryOption("#CategoryOption"); 
createMainCategory("#MainCategory", "Name", "ID"); 
function createCategoryOption(divID1) 
{ 
$(divID1).kendoComboBox({ 
     change: function (e) { 
      SetSelectServicesText(); 
     } 
    }); 
} 
function createMainCategory(usersDiv, textField, valueField) { 
$("#MainCategory").kendoMultiSelect({ 
    dataSource: [ 
     { Name: "Parent1", Id: 1, Name2: "Child1" }, 
     { Name: "Parent2", Id: 2, Name2: "Child2" } 
    ], 
    dataTextField: textField, 
    dataValueField: valueField 
}); 
} 
function SetSelectServicesText() 
{ 
     if($("#CategoryOption").data("kendoComboBox").value() == "Main") 
     { 
      $("#MainCategory").destroy(); 
     createMainCategory("#MainCategory", "Name", "ID"); 
     } 
     else 
     { 
      $("#MainCategory").destroy(); 
     createMainCategory("#MainCategory", "Name2", "ID"); 
     } 
} 

Внешние источники

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css"> 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css"> 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css"> 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css"> 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css"> 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css"> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script> 

Answer 1

Кендо виджеты обычно создает оболочку структуру вокруг целевого элемента, который не уничтожены методом destroy() (который я думаю, что это плохо).

Так что уничтожение (или удаление из DOM) виджета не так просто. Проверьте это:

function createMainCategory(usersDiv, textField, valueField, remove) 
{ 
    var mc = $("#MainCategory"); 

    if (remove) 
    { 
     // Destroys the widget 
     mc.data("kendoMultiSelect").destroy(); 

     // Get the widget wrapper element structure 
     var p = mc.closest(".k-widget"); 

     // Detache the #MainCategory from the wrapper structure 
     mc = mc.empty().detach(); 

     // Remove the wrapper structure 
     p.remove(); 

     // Append the #MainCategory to the body again 
     $('body').append(mc); 
    } 

    $("#MainCategory").kendoMultiSelect({ 
     dataSource: [ 
      { Name: "Parent1", Id: 1, Name2: "Child1" }, 
      { Name: "Parent2", Id: 2, Name2: "Child2" } 
     ], 
     dataTextField: textField, 
     dataValueField: valueField 
    }); 
} 

Как вы можете видеть, в удалить заблокировать ...

• Уничтожает виджет, используя встроенный метод destroy();
• Затем он выбирает основной обернутый элемент, который содержит всю структуру внутри;
• Перед удалением, он selectes и detaches в #MainCategoryвне обертку (в detach() Удаляет но возвращает ссылку для дальнейшего манипулирования элементом);
• Итак, с #MainCategory сейфом, это removes обертка всей конструкции от DOM;
• И, наконец, добавлено #MainCategory на тело, которое будет использоваться для размещения нового виджета.

Fiddle.