kendo multiselect键入文本与所选项目重叠

时间:2018-10-23 11:52:59

标签: jquery asp.net-mvc kendo-ui kendo-asp.net-mvc kendo-multiselect

我在Web应用程序中实现kendomultiselect。多选中有一个选项

如果我们在multiselect中键入一个新的项目文本,它将更新数据源和数据库。很好请在下面查看我的代码。

function fnLoadDocumentTags() {
var newTagItem = "";

function onTagDataBound() {
    if ((newTagItem || this._prev) && newTagItem !== this._prev) {
        var ds = this.dataSource,
            datas = ds.data(),
            lastItem = datas[datas.length - 1];

        newTagItem = this._prev;

        if (/\(Add New\)$/i.test(lastItem.TagName)) {
            ds.remove(lastItem);
        }

        var newEntryFound = _.findWhere(datas, { TagName: newTagItem }) != null;

        if (newTagItem.length > 0 && !newEntryFound) {

            ds.add({
                TagName: newTagItem + " (Add New)", TagID: newTagItem
            });
            this.open();
        }
    }

}

function onTagSelect(e) {
    debugger;
    var dataItem = this.dataSource.view()[e.item.index()],
    datas = this.dataSource.data(),
    lastData = datas[datas.length - 1];

    if (parseInt(dataItem.TagID) > 0) {
        //////this.dataSource.remove(lastData);
    }
    else {
        if (newTagItem.length > 0) {
            var tagID = fnInsertDocumentTags(newTagItem);
            dataItem.TagName = dataItem.TagName.replace(" (Add New)", "");
            dataItem.TagID = tagID;
        }
    }

    ////$.each(datas, function (index, value) {
    ////    debugger;
    ////    if (datas[index].TagID == 0) {
    ////        var dummyItem = datas[index];
    ////        this.dataSource.remove(dummyItem);
    ////        return;
    ////    }
    ////});
}

function onTagClose(e) {
    fnTagsChangeSelect();
}

var data = new kendo.data.DataSource({
    batch: true,
    transport: {
        read: {
            url: urljsonGetDocumentTags,
            dataType: "json"
        },
    },
    schema: {
        model: {
            id: "TagID",
            fields: {
                TagID: {
                    type: "number"
                },
                TagName: { type: "string" }
            }
        }
    }
});

$("#Tags").kendoMultiSelect({
    animation: false,
    dataTextField: "TagName",
    dataValueField: "TagID",
    dataSource: data,
    dataBound: onTagDataBound,
    select: onTagSelect,
    close: onTagClose
});
}

但是同时我遇到一个问题,当我在多选中键入文本时,该文本与多选中的选定项目重叠。请参见下图。

enter image description here

任何人有建议都很好...

0 个答案:

没有答案