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

我所期望的是只有Type必须在网格的数据源中 - 就像这样：

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演示＆＃34;外键＆＃34;列。我认为这正是你想要的。

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"
            }];

该演示有点欺骗，因为他们的网格数据包含整个＆＃34;类别＆＃34;：

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，因此网格数据项实际上并不需要指定＆＃34;类别＆＃34;财产，可能只是：

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
}

我怀疑＆＃34;类别＆＃34;只是因为这个JSON文件被一些例子共享，所以不同的一个可能需要它。

<强>更新

关于＆＃34;类别＆＃34;之前的网格加载问题。（或其他）FK表：

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

这样的事情（对不起任何错误，在我的脑海中输入这个）：

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

Answer 2

我向Telerik询问了这个问题，这是他们给出的解决方案。

当下拉数据可用时，在网格上使用setOptions，就像这样（为简单起见，我在这里使用setTimeout而不是Ajax调用）：

setTimeout(function() {
  categories = [{
      "value": 1,
      "text": "Beverages"
  },{
      "value": 2,
      "text": "Condiments"
  },{
      "value": 3,
      "text": "Confections"
  }];
  var grid = $('#grid').data('kendoGrid');
  var cols = grid.columns;
  cols[1].values = categories;
  grid.setOptions({columns: cols}); 
  $('#grid').data('kendoGrid').refresh();
}, 200);

此外，不需要autoBind：false。

这是一个更新的plunker： http://plnkr.co/edit/ZjuK9wk3Zq80yA0LIIWg?p=preview

下载剑道UI网格

2 个答案: