Bind Kendo UI grid dataSource to combobox

Question

I have a Kendo UI grid that contains Name Objects, when I select a row I want to populate a form below. Currently the text inputs and date-picker work fine. But I combo box only has one way binding. I can change the value in the grid, but when I select a new row the value of the combobox doesnt change.

HTML

<div id="nd-names-tab" ng-controller="nd-names-controller">
 <div id="nd-names-grid-section">
    <div id="nd-names-grid"
        kendo-grid="namesGrid"
        k-data-source="namesData"
        k-columns="nameGridColumns"
        k-selectable="true"
        k-reorderable="true"
        k-on-change="selectedName = data"
        k-toolbar="[
        { 'name': 'addName', template: '<button data-ng-click=\'addName()\' class=\'k-button\'>Add</button>' },
        { 'name': 'deleteName', template: '<button data-ng-click=\'deleteName()\' class=\'k-button\'>Delete</button>' }
        ]" >
    </div>                              
 </div>
 <div id="nd-names-input-section">
    <label>Name: <input type="text" class="k-textbox" ng-model="selectedName.lname"/></label>  
    <input type="text" class="k-textbox" ng-model="selectedName.fname" /> <br/>
    <label>DOB: <input id="datepicker" ng-model="selectedName.dob"/></label>  
    <label>Gender: <input id="gender" ng-model="selectedName.gender"/></label> <br />
    <label>Address: <input type="text" class="k-textbox" style="width: 200px" ng-model="selectedName.addr"/></label>
 </div>
</div>

JS File

    $("#datepicker").kendoDatePicker({
    format: "dd/MM/yyyy"
});

$("#gender").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "Male", value: "Male" },
        { text: "Female", value: "Female" },
    ],
    filter: "contains",
    suggest: true
});

Angular Controller

app.controller('nd-names-controller', function($scope){

$scope.namesData = new kendo.data.ObservableArray([
    { fname: 'Joe', lname: 'Clark', addr: '1565 Main Rd.', dob: '14/08/1990', gender: 'Male'},
    { fname: 'Bob', lname: 'Smith', addr: '123 Main St.', dob: '23/03/1992', gender: 'Male'},
    { fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'},
    { fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'},
    { fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'}
]);

$scope.nameGridColumns = [
    {field: "fname", title: "First Name", width: "*" },
    {field: "lname", title: "Last Name", width: "*" },
    {field: "addr", title: "Address", width: "*" },
    {field: "dob", title: "DOB", width: "*"  },
    {field: "gender", title: "Gender", width: "*"  }
];

$scope.addName = function(e){
    this.namesGrid.dataSource.add( { fname: '', lname: '', addr: '', dob: '', gender: ''} );
}

});

I am not sure how I am suppose to use angular to two way bind a combo box.

Answer 1

You are declaring the kendo combobox using Jquery. Instead create an options in you controller and pass it to kendo directive.

Directive:

 <select id="slots" kendo-drop-down-list k-options="slotsOptions" style="width: 200px"></select>

In you angular controller

 var dataSlotDuration = [
                   { text: "10", value: "10" },
                   { text: "15", value: "15" },
                   { text: "20", value: "20" },
                   { text: "30", value: "30" },
                   { text: "60", value: "60" }
    ];

function onSelectSlotDuration(e) {
    var dataItem = this.dataItem(e.item.index());
    // this is the seled value from drop-drop-list
    $scope.selectedSlotDuration = dataItem.value;

}

 $scope.slotsOptions = {
    dataSource: {
        data: dataSlotDuration
    },
    dataTextField: "text",
    dataValueField: "value",
    optionLabel: "Choose Slot Duration...",
    select: onSelectSlotDuration
}

Its in the Kendo Docs