2014-09-27 70 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/