0

我确实有一个 Kendoui 网格，其中我用 AutoComplete 作为编辑器填充一列：

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

其中自动完成数据通过 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]

在细胞中。

我已经尝试了一切来显示原始值，包括上面的模板（它给出了一个描述未定义的错误），但没有成功。

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

4

2 回答 2

2

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

经过漫长而强大的斗争，我发现了这个属性：valuePrimitive（见这里）

似乎这个属性是在 Kendo Q2 2013 上添加的。它在 Kendo Q1 2013 上不存在。

添加此属性并切换到 Kendo Q2 2013 后，我的应用程序开始正常工作。

为了完整起见，并且由于剑道代码的真实示例很少见，这里是我完整的剑道自动完成编辑器功能：

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
            }
        });
}
于 2014-02-18T23:58:40.743 回答
0

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

所以你应该检查你的模板，你有一个实际的价值。就像是：

template: "#= (data.description ? data.description.name : '') #",

对于一按回车就关闭自动完成的问题，您需要closeCell从自动完成change事件中调用。就像是：

{
    title   : "Description",
    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",
            change       : function (e) {
                grid.closeCell();
            }
        });
    },
    template: "#= (data.description ? data.description.name : '') #",
    width   : "300px"
}

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

于 2013-05-22T11:42:02.307 回答