Question

我创建了一个kendo ui下拉列表，它使用json变量作为数据，如下所示：

_listData = "[{"optionKey":"1","optionGroup":"Payments","optionValue":"Taxable allowance","optionDescription":null},{"optionKey":"2","optionGroup":"Payments","optionValue":"Taxable earnings","optionDescription":null},{"optionKey":"5","optionGroup":"Deductions","optionValue":"Pre-tax deduction","optionDescription":null},{"optionKey":"6","optionGroup":"Deductions","optionValue":"Tax deduction","optionDescription":null}]";

dataSource = new kendo.data.DataSource({
    data: JSON.parse(this._listData), 
    serverGrouping: true,
    group: { 
        field: "optionGroup", value: "optionGroup" 
    }
});

我有分组工作 - 但默认情况下按字母顺序排序，因此我根据Kendo UI文档将serverGrouping设置为true。

我的下拉列表定义如下：

var config = new Object();
config.dataTextField = "optionValue";
config.dataValueField = "optionKey";
config.height = 258;

var optionLabelCfg = new Object();
optionLabelCfg.optionValue = this._placeholder;
optionLabelCfg.optionKey = "0";
config.optionLabel = optionLabelCfg;        }

config.filter = 'startswith';

var _dropdownlist = jq('#' + uuid + "-dropdown").kendoDropDownList(config);
_dropdownlist.setDataSource(dataSource);

现在，当我在Dropdownlist上设置dataSource时，出现以下javascript错误：

未捕获的TypeError：无法读取属性＆＃39;长度＆＃39;未定义的（...）

Answer 1

将dataSource定义放在dropdownlist定义中：

<input id="test-dropdown"/>
<script>
var uuid = "test";
var _placeholder = "testPlaceHolder";
var _listData = '[{"optionKey":"1","optionGroup":"Payments","optionValue":"Taxable allowance","optionDescription":null},{"optionKey":"2","optionGroup":"Payments","optionValue":"Taxable earnings","optionDescription":null},{"optionKey":"5","optionGroup":"Deductions","optionValue":"Pre-tax deduction","optionDescription":null},{"optionKey":"6","optionGroup":"Deductions","optionValue":"Tax deduction","optionDescription":null}]';

var data = JSON.parse(_listData);
var groups = {};
var i = 0;
$.each(data, function() {
   if(groups[this.optionGroup] === undefined) groups[this.optionGroup] = i++;
   this.optionGroup = '<span data-i="'+groups[this.optionGroup]+'"></span>' + this.optionGroup; 
});

$('#' + uuid + "-dropdown").kendoDropDownList({
    dataTextField: 'optionValue',
    dataValueField: 'optionKey',
    groupTemplate: "#=data#",
    fixedGroupTemplate: "#=data#",
    optionLabel: {
        optionValue: _placeholder,
        optionKey: "0"
    },
    dataSource: new kendo.data.DataSource({
        data: data,
        group: {
            field: "optionGroup"
        }
    })
});
</script>

已更新：剑道分组会自动对群组进行排序，而不支持其他排序。但这里有一个hacky解决方法。

或者，您可以添加其他组字段和组，然后将其放入groupTemplate和fixedGroupTemplate函数中，以返回您的实际组字段值

Kendo UI下拉列表DataSource + serverGrouping错误

1 个答案: