Привязать источник данных сетки пользовательского интерфейса Kendo к combobox

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

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

});

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


angularjs combobox kendo-grid kendo-ui kendo-combobox
person Alex Clark    schedule 26.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Директива:

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

Его можно найти в Документах Kendo.

person Shaan    schedule 26.02.2015