-2

私は成功せずにこれを実装しようとしました。これが私のシナリオです：

テキストを有効にして kendo Combobox を実装する必要があるため、テキストを入力すると一致するレコードが見つかりますが、ドロップダウン矢印をクリックすると、その中に一致するすべてのレコードを含むグリッドが表示されます (部分的な検索)、列のヘッダーでのフィルタリングを許可する必要があります。

内部にグリッドがある DropDownList のサンプルを見ましたが、テキスト ボックスにテキストを入力することはできません。

これを実装する方法のサンプルはありますか?

返信ありがとうございます

ロン

4

1 に答える 1

1

私はついにそれを機能させました。誰かがこれを実装する方法を知りたい場合は、ここにデモがあります

<html>
<head>
    <script src="script/jquery.min.js" type="text/javascript"></script>
    <script src="script/kendo.all.min.js" type="text/javascript"></script>

    <script>
        var rootElement;
        var grid;
        var comboBox;

        $(document).ready(function () {
            comboBox = $('#comboList').kendoComboBox({
                dataTextField:"name",
                dataValueField:"id",
                filter:"contains",
                open: function (e) {
                    if (!$(grid.element).hasClass("k-custom-visible")) {
                        $(grid.element).slideToggle("fast", function () {
                            comboBox.close();
                            var selectedValue = $('#comboList').closest("span").children("span").children("input").val(); // comboBox.value();

                            if (selectedValue.length > 0) {
                                var filter = new Array();
                                if (!isNaN(selectedValue)){
                                    filter.push({ field: "id", operator: "contains", value: selectedValue });
                                } else {
                                    filter.push({ field: "name", operator: "contains", value: selectedValue });
                                }
                                grid.dataSource.filter(filter);
                            } else {
                                grid.dataSource.filter([]);
                            }

                            $(grid.element).addClass("k-custom-visible");
                        });
                    }
                },
                change: function (e) {
                    if ($(grid.element).hasClass("k-custom-visible")) {
                        var selectedValue = $('#comboList').closest("span").children("span").children("input").val(); // comboBox.value();

                        if (selectedValue.length > 0) {
                            var filter = new Array();
                            if (!isNaN(selectedValue)) {
                                filter.push({ field: "id", operator: "contains", value: selectedValue });
                            } else {
                                filter.push({ field: "name", operator: "contains", value: selectedValue });
                            }
                            grid.dataSource.filter(filter);
                        } else {
                            grid.dataSource.filter([]);
                        }

                        $(grid.element).addClass("k-custom-visible");
                    }
                },
                dataSource: [
                    { name: "Cotton", id: "1" },
                    { name: "Polyester", id: "2" },
                    { name: "Cotton/Polyester", id: "3" },
                    { name: "Rib Knit", id: "4" }
                ]
            }).data("kendoComboBox");

            rootElement = $(comboBox.rootElement);

            grid = $("#grid").kendoGrid({
                dataSource: {
                    data:[
                        { name: "Cotton", id: "1" },
                        { name: "Polyester", id: "2" },
                        { name: "Cotton/Polyester", id: "3" },
                        { name: "Rib Knit", id: "4" }
                    ]
                },
                columns: [
                    {
                        title: "User Id",
                        field: "id"
                    },
                    {
                        title: "User Name",
                        field: "name"
                    }
                ],
                selectable: true,
                pageable: true,
                filterable: {
                    mode: "row"
                },
                change: function (e) {
                    var selected = $.map(this.select(), function(item){
                        return $(item)[0].cells[0].innerHTML;
                    });

                    comboBox.value(selected[0]);

                    $(grid.element).slideToggle('fast', function () {
                        $(grid.element).removeClass("k-custom-visible");
                    });
                }
            }).data("kendoGrid");

            $(grid.element).css({ "border": "1px solid grey", "display": "none", "position": "absolute" });

            $(grid.element).css({ "top": rootElement.position().top + rootElement.height(), "left": rootElement.position().left });
        });

        $(document).click(function (e) {`enter code here`
            // Ignore clicks on the grid.
            if (!$(e.target).hasClass("k-button") && !$(e.target).hasClass("k-textbox")) {
                if ($(e.target).closest("div.k-grid").length == 0 && $(e.target).closest(".k-grid-edit").length == 0 && $(e.target).closest(".k-grid-edit-row").length == 0) {
                    // If visible, then close the grid.
                    if ($(grid.element).hasClass("k-custom-visible")) {
                        $(grid.element).slideToggle('fast', function () {
                            $(grid.element).removeClass("k-custom-visible");
                        });
                    }
                }
            }
        });

    </script>
</head>
<body>
    <div>
        <input id="comboList" placeholder="Enter Name" />
        <div id="grid" style="width:800px; z-index:10;"></div>
    </div>
</body>
</html>
于 2015-01-14T19:35:25.510 に答える