CODEWITHSUNDEEP
asp.net-mvc-3razorfilteringtelerik-gridtelerik-mvc
glosrob
glosrob

Reputation: 6715

Choosing Filter Options in a Telerik MVC3 Grid using Razor

I am playing about with the Telerik MVC3 extensions and in particular the Grid, which can be seen here

I am using custom paging and interested in the options around filtering.

It is easy enough to allow filtering per column with the following:

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

However it seems as though I have no choice over which options are presented to the user when I do enable it. No matter the field, I get the following in the filter dropdown:

Filter Options

Ideally I'd only want 'Contains' - is this possible?

Upvotes: 3

Views: 2631

Answers (4)

Arkiliknam
Arkiliknam

Reputation: 1825

The answer provided by Stef is the one that was implemented in our application, but I noticed it didn't work for cases where multiple columns were filterable. I have made a small change to the JS to allow multiple column filtering with Stef's solution. Essentially, its the same code (so all upvotes to Stef). It simply takes a further step in grouping by "t-animation-container"s (as that is the element the filters are rendered to), and acting on each individually as Stef's code did to the page.

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

Just after coming up with this solution, I found another issue with it. It no longer targets "t-animation-container"s which are joined to the "FilterOnlyOn_Contains" filter. It affects all filters and hence edits elements we don't want it to. I don't know how this relationship is made, I guess there are js dom references that the telerik js file makes.

Upvotes: 2

Stef Heyenrath
Stef Heyenrath

Reputation: 9830

My solution is like this:

Telerik GRID code:

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


JavaScript code:

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


Result looks like:
enter image description here

Upvotes: 4

Mahmoud Moravej
Mahmoud Moravej

Reputation: 9034

I don't know how you can remove other options but you can set the "contains" option as a default item by putting the following code in your grid_load client-side event :

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

I think you can remove other items easily by tracing the above code in FireBug or Chrome Developer Tools.

Upvotes: 1

JoJa
JoJa

Reputation: 610

if it is possible I suspect you need to take a look in the telerik.grid.filtering.js javascript file and edit it to your wishes.

Upvotes: 0

Related Questions