jquery - 在 Kendo UI 网格中对自定义下拉列表进行排序

Question

我正在使用 KendoUI Jquery 网格。我有一个与数据源绑定(bind)的自定义组合框编辑器。

我的问题是我可以完美地对该网格的其他列进行排序，但是此列的排序给出了意想不到的随机结果。谁能帮我如何排序此列？附上代码。

{ field: "Status", editor: statusDropDownEditor, template: '#=GetStatusColor(Status.Text)#', width: "90px" }

var statusData = new kendo.data.DataSource({
        data: [
            {  Text: "New", Value: "a9d59cd8-f569-45c4-bfdd-05f41db9e2f3" },
            {  Text: "Ready", Value: "e4aa129f-44b6-44e3-b5da-2ecc5c5c20c0" },
            {  Text: "Query", Value: "50b1af07-71a0-462f-86ec-a164d43a9b65" },
            {  Text: "Cancelled", Value: "79ee44ea-bc39-4a71-ad6d-c47886d0f69b" }
        ]
    });

function statusDropDownEditor(container, options) {
        $('<input data-text-field="Text" data-value-field="Value" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField: "Text",
                dataValueField: "Value",
                dataSource: statusData
            });
    }

Answer 1

使用此链接中的示例代码解决了这个问题。

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/foreign-key-column-sorting-by-text

示例代码片段

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

    //create dictionary of text-values for the FKC
    var categoriesDict = {};
    for (var i=0; i<categories.length;i++) {
        categoriesDict[categories[i].value] = categories[i].text;
    }

    $(document).ready(function () {
      var dataSource = new kendo.data.DataSource({
        pageSize: 20,
        data: products,
        change: function(e) {
          if (!e.action) {
            this.data();
          }
        },
        schema: {
          model: {
            id: "ProductID",
            fields: {
              ProductID: { editable: false, nullable: true },
              ProductName: { validation: { required: true} },
              CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
              UnitPrice: { type: "number", validation: { required: true, min: 1} }
            },
            //define calculated field:
            CategoryName: function() {
              return categoriesDict[this.get("CategoryID")];
            }
          }
        }
      });

      $("#grid").kendoGrid({
        dataSource: dataSource,
        groupable: true,
        pageable: true,
        sortable: true,
        height: 540,
        toolbar: ["create"],
        columns: [
          { field: "ProductName", title: "Product Name" },
          //bind column to the calculated field and specify custom editor:
          { field: "CategoryName()", width: "200px", title: "Category", editor: categoryDropDownEditor },
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "200px" },
          { command: "destroy", title: " ", width: "150px"}],
        editable: true
      });
    });


    function categoryDropDownEditor(container, options) {
      //specify the value field in the "data-bind" attribute
      $('<input required data-text-field="text" data-value-field="value" data-bind="value:CategoryID"/>')
      .appendTo(container)
      .kendoDropDownList({
        autoBind: false,
        dataSource: categories
      });
    }
  </script>