Выбор параметров фильтра в сетке Telerik MVC3 с помощью Razor

Question

Я играю с расширениями Telerik MVC3 и, в частности, с сеткой, которую можно увидеть здесь

Я использую пользовательский пейджинг и мне интересны варианты фильтрации.

Достаточно просто разрешить фильтрацию по столбцам с помощью следующего:

.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

Ответ, предоставленный Стефом, - это тот, который был реализован в нашем приложении, но я заметил, что он не работал в случаях, когда несколько столбцов были фильтруемыми.Я внес небольшое изменение в JS, чтобы разрешить фильтрацию нескольких столбцов с помощью решения Стефа.По сути, это тот же код (так что все голосуют против Стефа).Это просто делает следующий шаг в группировании по «t-animation-container» (как это элемент, к которому применяются фильтры), и воздействует на каждого в отдельности, как код Стефа для страницы.

$(".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();
        });
    });
});

Только после того, как я нашел это решение, я обнаружил еще одну проблему.Это больше не предназначается для "t-animation-container", которые присоединены к фильтру "FilterOnlyOn_Contains".Он влияет на все фильтры и, следовательно, редактирует элементы, которые нам не нужны.Я не знаю, как эти отношения сделаны, я думаю, есть ссылки на js dom, которые делает файл telerik js.

Answer 3

Я не знаю, как вы можете удалить другие опции, но вы можете установить опцию «содержит» как элемент по умолчанию, добавив следующий код в ваше событие grid_load на стороне клиента:

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

Я думаю, что вы можете легко удалить другие элементы, отследив приведенный выше код в FireBug или Chrome Developer Tools.

Answer 4

если это возможно, я подозреваю, что вам нужно взглянуть в файл telerik.grid.filtering.js javascript и отредактировать его по вашему желанию.