Сетка кендо с мульти-выделенным текстом

Question

Я хочу сделать одно поле как текстовое поле с множественным выделением в моей сетке Kendo, поэтому перейдите по ссылке ниже и скопируйте ее в функцию editorColumnTemplateFunction.Это работает, когда я набираю какой-то текст и ввел его, но если я щелкну за пределами поля или где-либо еще, то введенные данные не будут сохранены в поле выбора.Где я ошибся?Или может ли кто-нибудь помочь мне достичь функциональности по ссылке ниже на Kendo Grid?

https://docs.telerik.com/kendo-ui/knowledge-base/multiselect-as-tagbox

И моя сетка,

 $("#rulesGrid").kendoGrid({
        dataSource: dataSource_RuleGrid,
        height: 200,
        scrollable: true,
        batch: true,
        columns: [
            {
                field: "CustomProperty", title: "Property", width: "80px", editor: propertyDropDownEditor, template: "#=CustomProperty.DisplayName#"
            },
            {
                field: "Operator", title: "Operator", width: "80px", editor: operatorDropDownEditor, template: "#=Operator.DisplayName#"
            },
            {
                field: "Values", title: "Value", width: "100px",
                editor: editorColumnTemplateFunction
            },
            {
                field: "",
                title: "",
                width: "30px",
                template: function (dataItem) {
                    return '<span class="grid-icon"><i class="icon icon-delete" onclick="deleteCustomRule($(this))"></i></span>';
                }
            }
        ],
        editable: { confirmation: false },
        toolbar: kendo.template($("#addRuleTemplate").html()),
        noRecords: {
            template: "No rules found"
        }

    });

И функция editorColumnTemplateFunction,

function editorColumnTemplateFunction(container, options) {
    Valuess = { ValueName: "AD", ValueName: "AD" };
    $('<select id="RulesValue" style="width: 100%;" multiple="multiple"  ></select>').appendTo(container).kendoMultiSelect({
        dataTextField: "ValueName",
        dataValueField: "ValueName",
        //autoBind: false,
        dataSource: {
            data: []
        },
        dataBound: onDataBound
    }).data("kendoMultiSelect");


    function onDataBound(e) {
        $('.k-multiselect .k-input').unbind('keyup');
        $('.k-multiselect .k-input').on('keyup', onClickEnter);
    }
    function onClickEnter(e) {
        if (e.keyCode === 13) {
            var widget = $('#RulesValue').getKendoMultiSelect();
            var dataSource = widget.dataSource;
            var input = $('.k-multiselect .k-input');
            var value = input.val().trim();
            if (!value || value.length === 0) {
                return;
            }

            var newItem = {
                ValueName: value,
                ValueName: value
            };

            dataSource.add(newItem);
            var newValue = newItem.ValueName;
            widget.value(widget.value().concat([newValue]));
        }
    }
}