Bind Kendo UI grid dataSource to combobox

Question

У меня есть сетка пользовательского интерфейса Kendo, которая содержит объекты Name, когда я выбираю строку, которую я хочу заполнить ниже. В настоящее время текстовые входы и сборщик событий работают нормально. Но у меня поле со списком имеет только один способ привязки. Я могу изменить значение в сетке, но когда я выберу новую строку, значение combobox не изменится.

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 файла

$("#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 
}); 

Угловая контроллер

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: ''}); 
} 

});

Я не уверен, как я могу использовать угловой для двухсторонней привязки комбинированного блока.

Answer 1

Вы объявляете combobox kendo с помощью JQuery. Вместо этого создайте параметры в контроллере и передайте его в директиву кендо.

Директива:

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

В вас угловой контроллер

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 
} 

Его в кэндо Docs