使用 Razor 在 Telerik MVC3 网格中选择筛选器选项

Question

我正在使用 Telerik MVC3 扩展，特别是 Grid，可以在 此处

我正在使用自定义分页，并对过滤选项感兴趣。

允许使用以下内容过滤每列是很容易的：

.Columns(x =>
{
    x.Bound(col => col.Id).Filterable(false);

但是，当我启用它时，似乎我无法选择向用户呈现哪些选项。无论字段如何，我都会在过滤器下拉列表中得到以下内容：

理想情况下，我只想要“包含”-这可能吗？

Answer 1

我的解决方案是这样的：

Telerik GRID代码：

columns.Bound(o => o.MRUCode).HeaderHtmlAttributes(new { @class = "FilterOnlyOn_Contains" });

JavaScript代码：

$(".FilterOnlyOn_Contains .t-filter").click(function () {
    setTimeout(function () {
        // Remove all existing options and add 'Contains'
        var filterOptions1 = $(".t-filter-operator").first();
        filterOptions1.empty();
        filterOptions1.append($("<option />").val("substringof").text("Contains"));

        // Remove second part (options + text + input)
        var filterOptions2 = $(".t-filter-operator").last();
        filterOptions2.hide();
        $(".t-filter-help-text").text("");
        $("input[type=text]").last().hide();
    });
});

结果看起来像：

Answer 2

Stef 提供的答案是在我们的应用程序中实现的答案，但我注意到它不适用于多列可过滤的情况。我对 JS 做了一个小改动，以允许使用 Stef 的解决方案进行多列过滤。本质上，它的代码是相同的（所以所有的票都投给 Stef）。它只是进一步按“t-animation-container”进行分组（因为这是过滤器渲染到的元素），并像 Stef 的代码对页面所做的那样单独对每个元素进行操作。

$(".FilterOnlyOn_Contains .t-filter").click(function () {
    setTimeout(function () {

        var $animationContainers = $(".t-animation-container");
        $animationContainers.each(function () {
            // Remove all existing options and add 'Contains'
            var filterOptions1 = $(this).find(".t-filter-operator").first();
            filterOptions1.empty();
            filterOptions1.append($("<option />").val("substringof").text("Contains"));

            // Remove second part (options + text + input)
            var filterOptions2 = $(this).find(".t-filter-operator").last();
            filterOptions2.hide();
            $(".t-filter-help-text").text("");
            $("input[type=text]").last().hide();
        });
    });
});

就在提出这个解决方案后，我发现了另一个问题。它不再以连接到“FilterOnlyOn_Contains”过滤器的“t-animation-container”为目标。它会影响所有过滤器，因此会编辑我们不希望它编辑的元素。我不知道这种关系是如何建立的，我猜有 Telerik js 文件创建的 js dom 引用。

Answer 3

我不知道如何删除其他选项，但您可以通过将以下代码放入 grid_load 客户端事件中将“包含”选项设置为默认项目：

  $("#gridId").find(".t-filter").click(function () {
        setTimeout(function () {
            $(".t-filter-operator").each(function () {
                $(this).val("substringof");
            });
        });

我认为您可以通过跟踪上述代码轻松删除其他项目在 FireBug 或 Chrome 开发者工具中。

Answer 4

如果可能的话，我怀疑您需要查看 telerik.grid.filtering.js javascript 文件并根据您的意愿进行编辑。