javascript - 剑道 UI 网格中的下拉菜单

Question

我需要一个 Kendo-UI 网格的下拉列表，并遇到了这个示例: http://codepen.io/jordanilchev/pen/cnkih?editors=001

但在这个例子中，下拉菜单的键和显示文本也包含在网格的数据源中，这看起来非常多余。我在 Telerik 的网站上查看了类似的示例，结果是一样的。

以下是“类型”下拉列表的数据源:

var types = [
    {
        "Type": "FB",
        "Name": "Facebook"
    },
    {
        "Type": "TW",
        "Name": "Twitter"
    },
    {
        "Type": "YT",
        "Name": "YouTube"
    },
    {
        "Type": "PI",
        "Name": "Pinterest"
    }
];

到目前为止一切顺利。但这里是实际网格的数据 - 请注意它如何包含每条记录的类型和名称:

var products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "Type": {
      "Type": "FB",
      "Name": "Facebook"
   }
}, {
   "ProductID": 2,
   "ProductName": "Chang",
   "Type": {
      "Type": "FB",
      "Name": "Facebook"
   }
}...

我所期望的是只有类型必须位于网格的数据源中 - 像这样:

var products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "Type": "FB",
}, {
   "ProductID": 2,
   "ProductName": "Chang",
   "Type": "FB",
}...

有没有一种方法可以在 Kendo UI 网格中使用下拉菜单，而不必为网格数据源中的每条记录都包含键和显示文本？换句话说，网格会知道引用下拉列表的数据源来获取单元格的显示文本。

2014 年 9 月 23 日更新:当下拉列表的数据源是硬编码/本地数组时，CodingWithSpike 提出的解决方案工作得很好，但是当我从服务器加载下拉列表的数据时，我很难让它工作。问题似乎是在读取下拉列表的数据源之前网格已初始化。

为了“模拟” $http 调用来填充数据源，我使用了 setTimeout:

$(document).ready(function () {
  var categories = [];

  setTimeout(function() {
    categories = [{
      "value": 1,
      "text": "Beverages"
    },{
      "value": 2,
      "text": "Condiments"
    },{
      "value": 3,
      "text": "Confections"
    }];
    $('#grid').data('kendoGrid').dataSource.read(); // Just as a test, but not even this helps
    $('#grid').data('kendoGrid').refresh(); // Just as a test, but not even this helps
  }, 1000);

当数据按上述方式(或通过 $http)加载时，下拉字段现在包含值(id)而不是文本。这是一个展示这一点的 plunker: http://plnkr.co/edit/DWaaHGVAS6YuDcqTXPL8?p=preview

请注意，真正的应用程序是 AngularJs 应用程序，我宁愿不使用一些 jQuery hack 来等待下拉数据可用，然后创建网格元素。

如何使用来自服务器的数据来实现此功能？

Answer 1

查看“外键”列的 Kendo 演示。我认为这正是您想要的。

http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

他们使用类别列表:

           var categories = [{
                "value": 1,
                "text": "Beverages"
            },{
                "value": 2,
                "text": "Condiments"
            },{
                "value": 3,
                "text": "Confections"
            },{
                "value": 4,
                "text": "Dairy Products"
            },{
                "value": 5,
                "text": "Grains/Cereals"
            },{
                "value": 6,
                "text": "Meat/Poultry"
            },{
                "value": 7,
                "text": "Produce"
            },{
                "value": 8,
                "text": "Seafood"
            }];

该演示有点欺骗性，因为他们的网格数据包含整个“类别”:

var products = [{
    ProductID : 1,
    ProductName : "Chai",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "10 boxes x 20 bags",
    UnitPrice : 18.0000,
    UnitsInStock : 39,
    UnitsOnOrder : 0,
    ReorderLevel : 10,
    Discontinued : false,
    Category : {
        CategoryID : 1,
        CategoryName : "Beverages",
        Description : "Soft drinks, coffees, teas, beers, and ales"
    }
}

但是，如果您查看列定义:

{ field: "CategoryID", width: "200px", values: categories, title: "Category" },

指定的字段是CategoryID而不是Category，因此网格数据项实际上根本不需要指定“Category”属性，并且可以是:

var products = [{
    ProductID : 1,
    ProductName : "Chai",
    SupplierID : 1,
    CategoryID : 1,  // <-- this is the important part!
    QuantityPerUnit : "10 boxes x 20 bags",
    UnitPrice : 18.0000,
    UnitsInStock : 39,
    UnitsOnOrder : 0,
    ReorderLevel : 10,
    Discontinued : false
}

我怀疑“类别”在那里只是因为这个 JSON 文件由几个示例共享，所以不同的示例可能需要它。

<小时/>

更新

关于在“类别”(或其他)FK 表之前加载网格的问题:

在网格数据源上使用延迟或回调来等待 FK 数据源加载完成，然后再填充网格数据。或者，您可以初始化网格，但将其设置为 autoBind: false，这样它实际上不会立即从其数据源读取。

类似这样的东西(抱歉有任何错误，这是我凭空写下来的):

(function () {
    // for the foreign keys
    var categoriesDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://somewhere.com/categories"
            }
        }
    });

    // for the actual grid data
    var gridDataSource = new kendo.data.DataSource({
        ...
    });

    // init the grid widget
    var gridWidget = $("#grid").kendoGrid({
        dataSource: gridDataSource,
        autoBind: false, // <-- don't read the DataSource. We will read it ourselves.
        columns: [ ... ]
    });

    // now we can read the FK table data.
    // when that completes, read the grid data.
    categoriesDataSource.fetch(function () {
        gridDataSource.fetch();
    });
});