How to bind select item value in kendo template

Question

I have a kendo template with a drop down list in it and trying to set the selected value to the row's value and using MVVM. I can't get it to select the row in the dropdownlist. It successfully places the id in the textbox, but doesn't select the item...

The fiddle: http://jsfiddle.net/ooaq5n94/8/

Here is what I have so far...

The table....

 <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>

The template....

<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>

The 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();
});

your select element is also missing data-value-field="ID" — CodingWithSpike

Nick Nick · Accepted Answer · 2014-09-28T15:15:30

Here is the solution. Inside of the select item HTML you need data-role="dropdownlist". That's it

So the code inside of the template should read...

<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>

The working fiddle...

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

How to bind select item value in kendo template

1 Answers