Multiselect prérempli filtres pour Telerik MVC colonnes de grille avec des valeurs dénombrables

Question

Les développeurs Chers là-bas,

J'ai une application et en cours d'exécution avec le Telerik MVC Grille, qui est grande.

Cependant, les utilisateurs ne sont pas comme le fait qu'ils doivent saisir des valeurs de filtre pour les colonnes qui ont des valeurs que dénombrables.

quelqu'un n'ont l'expérience de la mise en œuvre des filtres MultiSelect avec des valeurs préremplis dénombrables?

Ce serait très apprécié, pas le moins par les utilisateurs finaux.

Answer 1

J'ai finalement réussi à ajouter des filtres dénombrables en remplaçant quelques-unes des méthodes de javascript telerik.

Le code fourni ne fonctionne pas comme il est (il contient également la persistance des valeurs de filtre, utilise 'ui), mais devrait être utilisable si vous avez assez d'expérience de javascript:

var MyCompanyFilteringBaseImplementation = (function (
  origCreateTypeSpecificInput, 
  origClearClick, 
  origFilterClick, 
  origCreateFilterMenu) {


  return {
      baseCreateTypeSpecificInput: origCreateTypeSpecificInput,
      baseFilterClick: origFilterClick,
      baseClearClick: origClearClick,
      baseCreateFilterMenu: origCreateFilterMenu

  };
} ($.telerik.filtering.implementation.createTypeSpecificInput,
   $.telerik.filtering.implementation.clearClick,
   $.telerik.filtering.implementation.filterClick,
   $.telerik.filtering.implementation.createFilterMenu
));


// Override existing functions for Filtering
var MyCompanyFilteringImplementation = (function (baseRender, baseClear, baseClick) {

  var _createTypeSpecificInput;
  var _filterClick;
  var _clearClick;
  var _createFilterMenu;
  var _filterExpr;



  _createTypeSpecificInput = function (html, column, fieldId, value) {

      var filter = eval('MyProject.filterVariables.' + column.member);
      if (filter) {

          html.cat('<div><ol id="' + filter.ColumnName + 'Filter" 
                    class="multiselectfilter" member="' + column.member + '">');

          $.each(filter.Values, function (index, value) {
              if (index >= 0) {
                  html.cat('<li value="')
                    .cat(value.DisplayedValue)
                    .cat('">')
                    .cat(value.DisplayedValue)
                    .cat('</li>');
              }
          });

          html.cat('</ol></div>');



      } else {
          this.baseCreateTypeSpecificInput(html, column, fieldId, value);
      }
  }

  _filterClick = function (e) {
      var self = this;

      e.preventDefault();
      var $element = $(e.target);
      var column = $element.closest('.t-animation-container').data('column');
      column.filters = [];
      var hasErrors = false;

      var filter = eval('MyProject.filterVariables.' + column.member);
      if (filter) {

          $('#' + filter.ColumnName + 'Filter .ui-selected')
            .each($.proxy(function (index, input) {
              var $input = $(input);
              var value = $(input).attr('value');
              for (var i = 0; i < filter.Values.length; i++) {
                  if (filter.Values[i].DisplayedValue == value) {
                      for (var j = 0; j < filter.Values[i].Values.length; j++) {
                          column.filters.push({ 
                               operator: filter.Values[i].Values[j].Operator, 
                               value: filter.Values[i].Values[j].Value });
                      }
                  }
              }
              //column.filters.push({ operator: filter.Operator, value: value });
          }, this));

          if (!hasErrors) {
              if (column.filters.length > 0) {
                  if (self.filterClickHandlers().length > 0) {
                      var that = this;
                      $.each(self.filterClickHandlers(), function (i, handler) {
                          handler(that.filterExpr());
                      });
                  } else {
                      this.filter(this.filterExpr());
                  }
              }

              this.hideFilter();
          }

      } else {
          this.baseFilterClick(e);
      }
  }

_clearClick = function (e) {

    var self = this;

    e.preventDefault();
    var $element = $(e.target);
    var column = $element.closest('.t-animation-container').data('column');
    column.filters = null;

    var filter = eval('MyProject.filterVariables.' + column.member);
    if (filter) {
        $('#' + filter.ColumnName + 'Filter .ui-selected').removeClass('ui-selected');

        var handlers = self.filterClickHandlers();
        if (handlers.length > 0) {
            var that = this;
            $.each(handlers, function (i, handler) { handler(that.filterExpr()); });
            this.hideFilter();
        } else {
            this.filter(this.filterExpr());
        }

    } else {
        this.baseClearClick(e);
    }
}

_createFilterMenu = function (column) {
    var filter = eval('MyProject.filterVariables.' + column.member);
    if (filter) {

        var $t = $.telerik;

        var filterMenuHtml = new $t.stringBuilder();

        filterMenuHtml.cat('<div class="t-animation-container"><div class="t-filter-options t-group" style="display:none">')
                .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>');

        var fieldIdPrefix = $(this.element).attr('id') + column.member;


        this.createTypeSpecificInput(filterMenuHtml, column, fieldIdPrefix, true);


        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());

        var returnValue = $filterMenu
                    .appendTo(this.element);

        // use jquery ui selectable for multiselect filter. Make every click act as a CTRL click on this control
        $('.multiselectfilter').bind("mousedown", function (e) {
            e.metaKey = true;
        }).selectable();

        var filteredColumns = $.grep(this.columns, function (column) {
            return column.filters;
        });

        // reselect stored filter selection
        if (filteredColumns) {
            $.each(filteredColumns, function (index, column) {
                if (column.filters) {
                    $.each(column.filters, function (index, filter) {
                        var value = filter.value;
                        if (filter.operator === 'isnull')
                            value = 'NULL';
                        if (filter.operator === 'isnotnull')
                            value = 'NOT NULL';
                        $('ol[member="' + column.member + '"] li[value="' + value + '"]').addClass("ui-selected");
                    });
                }
            });
        }

        return returnValue;


    } else {
        var result = this.baseCreateFilterMenu(column);

        if (column.type == 'Date') {

            var operators = $('#MyDateFieldfirst').closest('.t-filter-options').find('.t-filter-operator');

            if (column.filters) {
                if (column.filters[0]) {
                    $('#MyDateFieldfirst').val(column.filters[0].value);

                    // deselect all operators
                    $(operators[0]).find('option').removeAttr('selected');

                    // select stored operator
                    $(operators[0]).find('option[value="' + column.filters[0].operator + '"]')
                        .attr('selected', 'selected');
                }


                if (column.filters[1]) {
                    $('#MyDateFieldsecond').val(column.filters[1].value);

                    // deselect all operators
                    $(operators[1]).find('option').removeAttr('selected');

                    // select stored operator
                    $(operators[1]).find('option[value="' + column.filters[1].operator + '"]')
                        .attr('selected', 'selected');
                }
            };
        }

        return result;
    }
}

_filterExpr = function () {
    var result = [];
    var $t = $.telerik;

    var filtersPerColumn = [];

    for (var columnIndex = 0; columnIndex < this.columns.length; columnIndex++) {
        var column = this.columns[columnIndex];
        var columnFilterStringComponents = [];
        var filterName = 'MyProject.filterVariables.' + column.member;
        var MyProjectFilter = eval(filterName);
        if (column.filters)
            if (MyProjectFilter && MyProjectFilter.Multiselect == true) {               // multiselect column

                for (var filterIndex = 0; filterIndex < column.filters.length; filterIndex++) {
                    var filter = column.filters[filterIndex];

                    var operator = filter.operator;
                    if (operator === 'isnull')
                        operator = "eq";
                    if (operator === 'isnotnull')
                        operator = "ne";

                    columnFilterStringComponents.push(new $t.stringBuilder()
                        .cat(column.member)
                        .cat('~')
                        .cat(operator)
                        .cat('~')
                        .cat(this.encodeFilterValue(column, filter.value)).string());
                }

                var columnFilterstr = columnFilterStringComponents[0];
                for (var i = 1; i < columnFilterStringComponents.length; i++) {
                    columnFilterstr = '(' + columnFilterstr + '~or~' + columnFilterStringComponents[i] + ')';
                }

                result.push(columnFilterstr);
            }
            else {          // not a multiselect column
                for (var filterIndex = 0; filterIndex < column.filters.length; filterIndex++) {
                    var filter = column.filters[filterIndex];

                    var operator = filter.operator;
                    if (operator === 'isnull')
                        operator = "eq";
                    if (operator === 'isnotnull')
                        operator = "ne";

                    columnFilterStringComponents.push(new $t.stringBuilder()
                        .cat(column.member)
                        .cat('~')
                        .cat(operator)
                        .cat('~')
                        .cat(this.encodeFilterValue(column, filter.value)).string());
                }
                result.push(columnFilterStringComponents.join('~and~'));
            }
    }

    return result.join('~and~');
}






return {
    createTypeSpecificInput: _createTypeSpecificInput,
    filterClick: _filterClick,
    clearClick: _clearClick,
    createFilterMenu: _createFilterMenu,
    filterExpr: _filterExpr
};

} ($.telerik.filtering.implementation.createTypeSpecificInput,
   $.telerik.filtering.implementation.clearClick,
   $.telerik.filtering.implementation.filterClick,
   $.telerik.filtering.implementation.createFilterMenu
));


var filteringExtensions = (function (
    origCreateTypeSpecificInput, 
    origClearClick, 
    origFilterClick, 
    origCreateFilterMenu) {
    var _filter = function (filterBy) {
        this.currentPage = 1;
        this.filterBy = filterBy;

        // restore filters that were stored in cookie
        var storedColumns = jQuery.parseJSON($.cookie('ColumnFilters'));


        for (var index in storedColumns) {
            var storedColumn = storedColumns[index];
            var member = storedColumn.member;
            var matchingColumn = $.grep(this.columns, function (column) {
                return column.member == member;
             });


            if (matchingColumn && matchingColumn[0] && !matchingColumn[0].filters) {
                matchingColumn[0].filters = storedColumn.filters;

            }
        };


        if (this.isAjax()) {
            this.$columns().each($.proxy(function (index, element) {
                $('.t-grid-filter', element).toggleClass('t-active-filter', !!this.columns[index].filters);
            }, this));

            this.ajaxRequest();
        } else {
            this.serverRequest();
        }
    }

    return {
        filter: _filter
    }
} (
));





jQuery.extend($.telerik.grid.prototype, MyCompanyFilteringBaseImplementation);

$.telerik.filtering.implementation.createTypeSpecificInput = MyCompanyFilteringImplementation.createTypeSpecificInput;
$.telerik.filtering.implementation.filterClick = MyCompanyFilteringImplementation.filterClick;
$.telerik.filtering.implementation.clearClick = MyCompanyFilteringImplementation.clearClick;
$.telerik.filtering.implementation.createFilterMenu = MyCompanyFilteringImplementation.createFilterMenu;
$.telerik.filtering.implementation.filterExpr = MyCompanyFilteringImplementation.filterExpr;
$.telerik.filtering.implementation.filter = filteringExtensions.filter;