如何绑定kendo模板中的选择项值

时间:2014-09-27 17:56:40

标签: mvvm kendo-ui

我有一个带有下拉列表的kendo模板,并尝试将所选值设置为行的值并使用MVVM。 我无法在下拉列表中选择该行。它成功地将ID放在文本框中,但是没有选择项目......

小提琴: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();
});

1 个答案:

答案 0 :(得分: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/