Multiselect precompilato filtri per le colonne Telerik MVC griglia con valori enumerabili

Question

Cari sviluppatori là fuori,

Ho un'applicazione installato e funzionante con il Telerik MVC griglia, che è grande.

Tuttavia, gli utenti non mi piace il fatto che essi hanno di digitare valori di filtro per le colonne che hanno valori solo enumerabili.

Qualcuno ha esperienza con l'attuazione di filtri MultiSelect con i valori enumerabili preassegnate?

Questo sarebbe molto apprezzato, per nulla dagli utenti finali.

Answer 1

sono finalmente riuscito a aggiungere filtri enumerabili sovrascrivendo alcuni dei metodi Telerik javascript.

Il codice fornito non funziona come è (che contiene anche la persistenza di valori di filtro, usi jQuery UI), ma dovrebbe essere utilizzabile se si ha abbastanza esperienza 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;