如何通過JSON響應設置默認的Kendo控制設置

Question

我有10個控件。一個主要的下拉菜單應該決定其他9個控件的設置。這9個控件是3行3個下拉框。下面是一個示例：

如果dropdownMain選擇了「地址」，則將dropdownbox1設置爲「LastName」 將dropdownbox2設置爲「=」並將dropdownbox3設置爲文本框。

將dropdownbox4設置爲'FirstName'並將dropdownbox5設置爲'='並將dropdownbox6設置爲文本框。

將dropdownbox7設置爲'City'並將dropdownbox8設置爲'='並將dropdownbox9設置爲綁定到城市json。

你如何讓Kendo控制器響應第一個選擇然後級聯？或者你可以通過JSON發送設置'默認配置'嗎？我從ArcGIS Server SOE（服務器對象擴展）發送。

在此先感謝！

Answer 1

好的，這表明了一種方法來實現你的問題的解決方案，據我所知。我只使用了1行3個下拉菜單，而不是1個主下拉菜單，然後又增加了3行下拉菜單，但是，它很容易適應您的需求：

HTML（1行3）：

<select id="DropDownList1" name="DropDownList1"></select> 
<select id="DropDownList2" name="DropDownList2"></select> 
<span id="List"> 
    <select id="DropDownList3" name="DropDownList3"></select></span> 
<span id="Text" style="display: none" > 
    <input id="EnterText" class="k-textbox" /></span> 

JS，劍道UI，jQuery的，jQuery用戶界面：

var dataModel1 = [{ItemName: 'First Name', ItemId: 1},{ItemName: 'Middle Name', ItemId: 2},{ItemName: 'Last Name', ItemId: 3},{ItemName: 'Preferrred Name', ItemId: 4}]; 

var dataModel2 = [{ItemName: 'Equals', ItemId: 1},{ItemName: 'Contains', ItemId: 2},{ItemName: 'Starts With', ItemId: 3},{ItemName: 'Ends With', ItemId: 4}]; 

var dataModel3 = [{ItemName: 'John', ItemId: 1},{ItemName: 'Dave', ItemId: 2},{ItemName: 'Simon', ItemId: 3},{ItemName: 'Eric', ItemId: 4}]; 

$('#DropDownList1').kendoDropDownList({ 
    optionLabel: 'Select item...', 
    dataTextField: 'ItemName', 
    dataValueField: 'ItemId', 
    change: function(e) { 
     var that = this, ddlQuery = $('#DropDownList2').data('kendoDropDownList'); 

     if(ddlQuery !== undefined) { 
      switch(that.value()) { 
       case '1': 
        ddlQuery.value('2'); 
        break; 
       default: break; 
      } 
     } 
    }, 
    dataSource: { 
     data: dataModel1, 
     schema: { 
      data: function(response) { return response || {}; } 
     } 
    } 
}); 

$('#DropDownList2').kendoDropDownList({ 
    optionLabel: 'Select item...', 
    dataTextField: 'ItemName', 
    dataValueField: 'ItemId', 
    change: function(e) { 
     var that = this, ddlQuery = $('#DropDownList3').data('kendoDropDownList'); 
     if(ddlQuery !== undefined) { 
     switch(that.value()) { 
      case '1': 
       $('#List').fadeOut('fast', function() { 
        $('#Text').fadeIn(); 
       }); 
       break; 
      default: 
       $('#Text').fadeOut('fast', function() { 
        $('#List').fadeIn(); 
       }); 
       break; 
      } 
     } 
    }, 
    dataSource: { 
     data: dataModel2, 
     schema: { 
      data: function(response) { return response || {}; } 
     } 
    } 
}); 

$('#DropDownList3').kendoDropDownList({ 
    optionLabel: 'Select item...', 
    dataTextField: 'ItemName', 
    dataValueField: 'ItemId', 
    change: function(e) { 

    }, 
    dataSource: { 
     data: dataModel3, 
     schema: { 
      data: function(response) { return response || {}; } 
     } 
    } 
}); 

的的jsfiddle這可以在這裏看到：

http://jsfiddle.net/8PW98/17/

我希望這有助於...