jquery - 剣道グリッド フィルター メニューからオペレーターのドロップダウンを削除

Question

剣道グリッド フィルター メニューからオペレーター ドロップダウンを削除するにはどうすればよいですか? ユーザーが選択できる値を含むドロップダウン リストが下にあるので、その上に「等しい」というボックスを表示しても意味がありません。

Answer 1

この質問は、剣道フォーラムですでに回答されています: 剣道フォーラム - グリッド列フィルターでドロップダウンリストを使用する

他の場所よりも常にそこを検索するのは良いことです。基本的に、ヘッダー フィルターを取得し、ドロップダウンを非表示にします。検索ヘッダーのjqueryセレクターが少し「ククー」だったので、フォーラムのフィドルを自由に変更しました。また、コンボを手動で作成する代わりに、通常の剣道設定を使用できます

filterable: {
    ui: function(){ ... }
}

主なことは、ヘルプを非表示にして変更することです。

// Find the Role filter menu.
var filterMenu = _grid.thead.find("th[data-field='roleTitle']").data("kendoFilterMenu");

filterMenu.form.find("div.k-filter-help-text").text("Select an item from the list:");
filterMenu.form.find("span.k-dropdown:first").css("display", "none");

ここで見つけてください: JSFiddle - 剣道グリッドのドロップダウン フィルター

Answer 2

私は、UI を構築するときに呼び出す関数を宣言することで、私のものを作成しました。クラスを探し回るよりもはるかに簡単なはずです。

{
   field: "Status",
   title: "Status",
   filterable: {
      extra: false,
      ui: statusFilter
   }
}


function statusFilter(element) {

    // finds the closest form so we can start manipulating things.
    var form = element.closest("form");  

    // changes the help text. (you might want to localise this)
    form.find(".k-filter-help-text:first").text("Select an item from the list:");

    // removes the dropdown list containing the operators (contains etc)
    form.find("select").remove();

    // Adds a new dropdownlist with all the options you want to select from
    element.kendoDropDownList({ ...... });

}

Answer 3

イベントをグリッドに追加

.Events(e => e.FilterMenuInit("FilterMenuFunc"))

次にJavaスクリプト関数

 function FilterMenuFunc(e) {
        var grid = $("#GridName").data("kendoGrid");
        var filterMenu = $(grid.thead.find("th:not(.k-hierarchy-cell,.k-group-cell)")[5]).data("kendoFilterMenu");//5 is index of column
        try {
            filterMenu.form.find("div.k-filter-help-text").text("Please Select A Value From List.");
            filterMenu.form.find("span.k-dropdown:first").css("display", "none");
        } catch (e) {}

    }