Question

我有一个Kendoui网格，我在其中用自动完成作为编辑器填充一列：

{ title: "Desription", 
    field: 'description',
    editor: function(container, options) {
        var input = $("<input id='selecteditem' />");
        input.attr("name", options.field);
        input.appendTo(container);
        input.kendoAutoComplete({ 
            dataSource: dataSource, 
            dataTextField: "name"
        }); 
    },
    template: "#=name in description#",
    width: "300px"
}

其中aoutocomplete数据来自数据库，通过php：

var dataSource = new kendo.data.DataSource({
    transport: { read: 
       { 
         url: "/cabinet/test/autocomplete/data.php", 
         dataType: "json" 
       }
});

和php如下：

$query = ('SELECT shipitem_id AS id, name, description, cat_id, lang_string FROM jml_mss_shipment_items');              

$link = mysql_pconnect($dbOptions['host'], $dbOptions['user'], $dbOptions['password']) or die ("Unable To Connect To Database Server");
mysql_select_db($dbOptions['database']) or die ("Unable To Connect To Database");

$arr = array();
$rs = mysql_query($query);
while($obj = mysql_fetch_object($rs)) { $arr[] = $obj; }

header("Content-type: application/json; charset=utf-8");
echo json_encode($arr);
exit();

当我选择项目时，这可以正常工作，但当我移动到下一行时，它会离开

[object Object]

在牢房里。

我已经尝试了所有内容来显示原始值，包括上面的模板（这会导致描述未定义的错误），但没有成功。

我能做些什么来克服这个问题？它一定很简单！

Answer 1

我在Keno自动完成时遇到了类似的问题（=在空字段中选择一个值时，Kendo将显示[object Object]。当在填充的单元格中选择一个值时，Kendo有时会显示正确的值。）

经过漫长而艰苦的斗争，我发现了这个属性：valuePrimitive（见here）

似乎此属性已添加到2013年第二季度的剑道上。 2013年第一季度剑道上不存在。

一旦我添加了此属性并切换到2013年的Kendo Q2，我的应用程序就开始运行了。

为了完整起见，因为剑道代码的现实例子很少见，这是我完整的Kendo自动完成编辑器功能：

function productNameAutoCompleteEditor(container, options) {
    $('<input data-text-field="ContactBusinessName" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            autoBind: false,
            serverFiltering: true,
            filter: "contains",
            ignoreCase: true,
            valuePrimitive: true,   //<<<<<<<<<<<<<<<<<<<<<<<<
            dataTextField: "ContactBusinessName",
            dataSource: {
                type: 'odata',
                serverFiltering: true,
                serverPaging: true,
                pageSize: 40,
                transport: {
                    read:
                        {
                            url: "/api/v1/AutoCompleteContacts",
                            dataType: "json"
                        },
                    parameterMap: function (options, type) {
                        var paramMap = kendo.data.transports.odata.parameterMap(options);
                        delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                        delete paramMap.$format; // <-- remove format parameter.
                        delete paramMap.$callback; // <-- remove format parameter.
                        return paramMap;
                    }
                },
                schema: {
                    data: function (data) {                            
                        return data; // <-- The result is just the data, it doesn't need to be unpacked.
                    },
                    total: function (data) {
                        return data.length; // <-- The total items count is the data length, there is no .Count to unpack.
                    }
                }
            },
            select: function (e) {
                var item = e.item;
                var text = item.text();
                // Use the selected item or its text
            }
        });
}

Answer 2

问题在于，当您创建新行时，将根据DataSource中的模型定义创建行。由于您使用的是嵌套对象（字段description实际上是包含object的{{1}}），因此不会创建。

因此，您应该在模板中检查您是否具有实际价值。类似的东西：

name

有关在您按Enter后立即关闭自动填充功能的问题，您需要从自动填充template: "#= (data.description ? data.description.name : '') #",事件中调用closeCell。类似的东西：

change

在此处查看完整的运行示例http://jsfiddle.net/OnaBai/mpNuA/3/

Kendo UI AutoComplete作为网格中的编辑器 - 如何显示所选值？

2 个答案: