Kendo Grid - Редактирование строки с помощью редактора раскрывающегося списка (Редактирование пользовательского редактора)

Question

Я использую пример Telerik, предоставленный на this page для встроенного редактирования в сетке пользовательского интерфейса Kendo, и я хотел бы связать выпадающий список inline в столбце «Категории» для объекта JSON вместо использования данных xml, которые они имеют в своей демонстрационной версии. Когда я использую данные JSON, раскрывающийся список не работает. Как связать объект JSON со встроенным кадром -вниз список? A fully working fiddle can be found here.

Вот функция JavaScript, которая связывает источник данных.

function categoryDropDownEditor(container, options) { 
    var categories = { 
     'Category': [ 
      { 'CategoryName': 'Beverages', 'CategoryID': 1 }, 
      { 'CategoryName': 'Condiments', 'CategoryID': 2 }, 
      { 'CategoryName': 'Confections', 'CategoryID': 3 }, 
      { 'CategoryName': 'Dairy Products', 'CategoryID': 4 }, 
      { 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 }, 
      { 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 }, 
      { 'CategoryName': 'Produce', 'CategoryID': 7 }, 
      { 'CategoryName': 'Seafood', 'CategoryID': 8 } 
     ] 
    }; 

    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>') 
     .appendTo(container) 
     .kendoDropDownList({ 
      autoBind: false, 
      dataSource: categories 
     }); 
} 

Answer 1

Попробуйте изменить следующее.

var Category = 
[ 
      { 'CategoryName': 'Beverages', 'CategoryID': 1 }, 
      { 'CategoryName': 'Condiments', 'CategoryID': 2 }, 
      { 'CategoryName': 'Confections', 'CategoryID': 3 }, 
      { 'CategoryName': 'Dairy Products', 'CategoryID': 4 }, 
      { 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 }, 
      { 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 }, 
      { 'CategoryName': 'Produce', 'CategoryID': 7 }, 
      { 'CategoryName': 'Seafood', 'CategoryID': 8 } 
]; 

и в качестве источника данных используют

$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>') 
     .appendTo(container) 
     .kendoDropDownList({ 
      autoBind: false, 
      dataSource: Category 
     }); 

Answer 2

function categoryDropDownEditor(container, options) { 
    var categories = { 
     'Category': [ 
      { 'CategoryName': 'Beverages', 'CategoryID': 1 }, 
      { 'CategoryName': 'Condiments', 'CategoryID': 2 }, 
      { 'CategoryName': 'Confections', 'CategoryID': 3 }, 
      { 'CategoryName': 'Dairy Products', 'CategoryID': 4 }, 
      { 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 }, 
      { 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 }, 
      { 'CategoryName': 'Produce', 'CategoryID': 7 }, 
      { 'CategoryName': 'Seafood', 'CategoryID': 8 } 
     ] 
    }; 

    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>') 
     .appendTo(container) 
     .kendoDropDownList({ 
      autoBind: false, 
      dataSource: categories.Category 
     }); 
} 

Посмотрите выше, вы должны использовать свойство связываться с источником данных. Поскольку для источника данных kendo требуется объект Array.