5

私は Kendo Grid を初めて使用し、columnMenu オプションを使用しようとしています。列メニュー機能にアクセスする必要があります (グリッドの外側のボタンから列を表示/非表示にする機能のみです。このリンクを使用すると、それを行うことができ、正常に動作しています。 スクリプトを使用して剣道グリッドの columnMenu を表示する方法

しかし、これはまだ必要のない列ヘッダーの columnMenu オプションを保持しています。
さらに詳しく調べたところ、 defaultGrid.thead.find("[data-field=Address]>.k-header-column-menu").remove();を使用して、ロード時に列ヘッダーを削除できました。
ここで、Address はグリッド内の列の 1 つです。columnMenu オプションを使用して少なくとも 1 つの列が必要です。そうしないと、上記の URL のソリューションが機能しません。

上記のリンクのソリューションを使用すると、列のフィルター オプションも削除されます。私が達成する必要があるのは、すべての列ヘッダーから列メニューを削除し (グリッドの外側から列の表示/非表示オプションにアクセスし)、グリッドの特定の列でフィルター オプションを使用できるようにすることです。

これは可能ですか、どうすればそれを行うことができますか? 助けてください

4

2 に答える 2

18

すべての要件が正しいかどうかはわかりませんが、次のようなものが機能するはずです。

JS:

var grid = $("#grid").kendoGrid({
    dataSource: [{
        foo: "foo",
        bar: "bar"
    }],
    filterable: true,
    columnMenu: true
}).getKendoGrid();

function showMenu() {
    var offset = $(this).offset();
    var fieldName = $(this).data("field");
    var th = $(grid.thead).find("th[data-field='" + fieldName + "']");

    $(th).find(".k-header-column-menu:first").click();
    $(".k-column-menu").parent().css({
        top: offset.top + $(this).outerHeight(),
        left: offset.left
    });
}

$(document).on("click", ".grid-menu", showMenu);

CSS:

.k-header-column-menu {
    visibility: hidden
}

HTML:

<div id='grid'></div>
<div>
    <button class='grid-menu' data-field="foo">Show foo menu</button>
    <button class='grid-menu' data-field="bar">Show bar menu</button>
</div>

(デモ)

フィルター メニューをグリッド ヘッダーに保持したまま、チェックボックス付きのメニューを表示する別の方法:

グリッド：

var grid = $("#grid").kendoGrid({
    dataSource: [{
        foo: "foo",
        bar: "bar"
    }],
    filterable: true,
    columnMenu: false
}).getKendoGrid();

grid.columns からメニュー エントリを作成します。

var ds = [];
for (var i = 0, max = grid.columns.length; i < max; i++) {
    ds.push({
        encoded: false,
        text: "<label><input type='checkbox' checked='checked' " +
              " class='check' data-field='" + grid.columns[i].field + 
              "'/>" + grid.columns[i].field + "</label>"
    });
}

メニュー：

$("#menu").kendoMenu({
    dataSource: [{
        text: "Menu",
        items: ds
    }],
    openOnClick: true,
    closeOnClick: false,
    open: function () {
        var selector;
        // deselect hidden columns
        $.each(grid.columns, function () {
            if (this.hidden) {
                selector = "input[data-field='" + this.field + "']";
                $(selector).prop("checked", false);
            }
        });
    },
    select: function (e) {
        // ignore click on top-level menu button
        if ($(e.item).parent().filter("div").length) return;

        var input = $(e.item).find("input.check");
        var field = $(input).data("field");
        if ($(input).is(":checked")) {
            grid.showColumn(field);
        } else {
            grid.hideColumn(field);
        }
    }
});

(デモ)

于 2014-04-24T19:27:42.743 に答える
0

これはかなり古いスレッドですが、同様のものを検索した後、ユーザーが「kendoColumnMenu」を参照している投稿を Terlerik フォーラムで見つけました。私が言える限り、これは文書化されていません。

また、グリッドの状態を保存するために作成されたメニューにオプションを追加する方法や、選択したその他の構成オプションを追加する方法も示します。

作業コードを含む DOJO へのリンクも含まれている投稿へのリンクは次のとおりです:ここをクリック

うまくいけば、これは他の誰かがこれを探しているのを助けるでしょう.

于 2017-01-05T17:45:54.330 に答える