2014-09-27 58 views
0

我有一個kendo模板,其中包含一個下拉列表,並嘗試將所選值設置爲該行的值並使用MVVM。 我不能讓它選擇下拉列表中的行。它成功地將ID在文本框中,但不會選擇該項目...如何綁定kendo模板中的選擇項值

小提琴:http://jsfiddle.net/ooaq5n94/8/

這裏是我迄今爲止...

表... 。

<table class="table table-responsive table-striped"> 
      <thead> 
       <tr> 
        <th>Brand</th>      
       </tr> 
      </thead> 
      <tbody data-template="rosterManagementTemplate" data-bind="source: roster.view"></tbody> 
     </table> 

模板....

<script type="text/x-kendo-tmpl" id="rosterManagementTemplate"> 
<tr> 
    <td> 
     <input type="text" data-bind="value: TeamID" /> 
     <select class="form-control" data-value-field="ID" data-text-field="Name" data-bind="source: teams, value: TeamID"></select> 
    </td>   
</tr> 

的JS ....

<script> 
var rosterViewModel = kendo.observable({  

    roster: new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "@Url.Action("Read", "Roster")", 
       type: "POST", 
       data: { 'id': @Model } 
      }    
     },   
     type: "aspnetmvc-ajax", 
     schema: { 
      model: { 
       id: "ID" 
      } 
     } 
    }),     
    teams: new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "@Url.Action("GetTeams", "Lookup")", 
       type: "POST", 
       data: { 'id': @Model } 
      } 
     }, 
     type: "aspnetmvc-ajax", 
     schema: { 
      model: { 
       id: "ID" 
      } 
     } 
    }) 
}); 



$(document).ready(function() { 
    kendo.bind($("#rosterManagement"), rosterViewModel);   
    rosterViewModel.teams.read();   
    rosterViewModel.roster.read(); 
}); 

+0

你'select'元素也不見了'數據 - 值字段=「ID」' – CodingWithSpike 2014-09-28 15:33:24

回答

0

這裏是溶液。在選擇項目HTML內部,您需要data-role =「dropdownlist」。這就是它

所以模板內的代碼應該讀...

<script type="text/x-kendo-tmpl" id="rosterManagementTemplate"> 
<tr> 
    <td> 
     <input type="text" data-bind="value: TeamID" /> 
     <select class="form-control" data-role="dropdownlist" data-value-field="ID" data-text-field="Name" data-bind="source: teams, value: TeamID"></select> 
    </td>   
</tr> 
</script> 

工作小提琴...

http://jsfiddle.net/ooaq5n94/9/