[Solved] Filtering on more than two values within a column

[Sunil]

Hi Everyone,

I am doing a manual filtering in the grid and want to filter a single column with more than two values. But i see that the grid only supports two values. Is it possible to have support for filtering a single column with more than two values ?

Kind regards,
Sunil Khatri

[Stefan]

I have done something similiar in the past. It involves overriding two methods of the default filtering method and supplying custom implementations for specific columns, which are invoked if they are found with a fallback to the default mechanism. You have to know what you're doing in those methods though. It's far from perfect, but it works pretty well for me.

The code below creates a DropDown that looks like that on a column with the name Budget.

filtering.common.js

(function ($) {

    var $t = $.telerik;

    var escapeQuoteRegExp = /'/ig;

    var fx = $t.fx.slide.defaults();

 

    function getFormat(column) {

        if (!column.format)

            return $t.cultureInfo.shortDate;

 

        return /\{0(:([^\}]+))?\}/.exec(column.format)[2];

    }

 

    function value(column, value) {

        if (column.type == 'Date')

            return $t.formatString(column.format || '{0:G}', new Date(parseInt(value.replace(/\/Date\((.*?)\)\//, '$1'))));

 

        return value;

    }



    var createFilterMenu = $.telerik.filtering.implementation.createFilterMenu; 

    $.telerik.filtering.implementation.createFilterMenu = function (column) {

        if ($filterSpecs[column.member]) {

            return $filterSpecs[column.member].createFilterMenu.call(this, column);

        }

        else {

            return createFilterMenu.call(this, column);

        }

    }

 

    var filterClick = $.telerik.filtering.implementation.filterClick; 

    $.telerik.filtering.implementation.filterClick = function (e) {

        e.preventDefault();

        var $element = $(e.target);

        var column = $element.closest('.t-animation-container').data('column');

 

        if ($filterSpecs[column.member]) {

            return $filterSpecs[column.member].filterClick.call(this, e);

        }

        else {

            return filterClick.call(this, e);

        }

    }

})(jQuery);

filtering.house-grid.js

$filterSpecs = {
    Budget: {
        createFilterMenu: function (column) {
            var filterMenuHtml = new $.telerik.stringBuilder();
            var fieldIdPrefix = $(this.element).attr('id') + column.member;

            filterMenuHtml.cat('<div class="t-animation-container"><div class="t-filter-options t-group" style="display:none; width: 200px;">')
                    .cat('<button class="t-button t-button-icontext t-clear-button"><span class="t-icon t-clear-filter"></span>')
                    .cat(this.localization.filterClear)
                    .cat('</button>');
            filterMenuHtml.cat('<div><input type="radio" operator="lt" style="width:auto;display:inline" id="').cat(fieldIdPrefix + 5000)
                    .cat('" name="').cat(fieldIdPrefix)
                    .cat('" value="').cat(5000).cat('" />')
                    .cat('<label style="display:inline" for="').cat(fieldIdPrefix + 5000).cat('">')
                    .cat('Weniger als 5.000 €')
                    .cat('</label></div>');
            filterMenuHtml.cat('<div><input type="radio" operator="lt" style="width:auto;display:inline" id="').cat(fieldIdPrefix + 10000)
                    .cat('" name="').cat(fieldIdPrefix)
                    .cat('" value="').cat(10000).cat('" />')
                    .cat('<label style="display:inline" for="').cat(fieldIdPrefix + 10000).cat('">')
                    .cat('Weniger als 10.000 €')
                    .cat('</label></div>');
            filterMenuHtml.cat('<div><input type="radio" operator="gt" style="width:auto;display:inline" id="').cat(fieldIdPrefix + 9999)
                    .cat('" name="').cat(fieldIdPrefix)
                    .cat('" value="').cat(9999).cat('" />')
                    .cat('<label style="display:inline" for="').cat(fieldIdPrefix + 9999).cat('">')
                    .cat('Mehr als 10.000 €')
                    .cat('</label></div>');

            filterMenuHtml.cat('<button class="t-button t-button-icontext t-filter-button"><span class="t-icon t-filter"></span>')
                                  .cat(this.localization.filter)
                                  .cat('</button></div></div>');

            var $filterMenu = $(filterMenuHtml.string());

            $.each(column.filters || [], function (i) {
                $filterMenu.find(':radio[id$=' + this.value + ']').attr('checked', true);
            });

            return $filterMenu.appendTo(this.element);
        },
        filterClick: function (e) {
            e.preventDefault();
            var $element = $(e.target);
            var column = $element.closest('.t-animation-container').data('column');
            column.filters = [];
            var hasErrors = false;

            $element.closest(".t-filter-options").find('input:checked').each($.proxy(function (index, input) {
                var $input = $(input);
                var value = $.trim($input.val());
                column.filters.push({ operator: $input.attr('operator'), value: value });
            }, this));

            if (!hasErrors) {
                if (column.filters.length > 0)
                    this.filter(this.filterExpr());

                this.hideFilter();
            }
        }
    }
}

View:

@(Html.Telerik().Grid())

@{

    Html.Telerik().ScriptRegistrar().DefaultGroup(group => group

        .Add("telerik.common.js")

        .Add("telerik.grid.filtering.js")

        .Add("filtering.common.js")

        .Add("filtering.house-grid.js")

        .Add("telerik.tabstrip.js")

    );

}

[Sunil]

Great .. thanks Stefan :-)