Ustaw domyślny filtr dla Kendo UI Grid

Question

Mam siatkę Kendo UI, która jest renderowana za pomocą javaScript. Chcę, aby kolumny ciągów miały jedną opcję ("Zawiera") i bez drugiego filtru. Jak dotąd tak dobrze, napisałem:

Jako część definicji siatki. A wynik wygląda dobrze - jest (mam tylko jedną opcję, więc rozwijanie jest zbędne).

Jednak niezależnie od tego, filtr nadal wykonuje operację equals zamiast zawiera działanie (który jest dostępny tylko z nim jeden).

Spędziłem trochę czasu, próbując to rozgryźć i ciągle krążyłem w kółko, ponieważ kod, który znalazłem, nie działa, albo nie ma sensu, albo oba.

Czy ktoś może mi powiedzieć, jak ustawić domyślny filtr na "Zawiera", a nie "Czy jest równy"?

Answer 1

Spróbuj zaktualizować do najnowszej kompilacji wewnętrznej. Wersja późniejsza niż 2012.3.1304 powinna zawierać poprawkę.

Answer 2

Gdy masz tylko jedną opcję lub nie jesteś zadowolony z układu, możesz całkowicie dostosować sterowanie filtrem, używając przeciążenia "ui: func (element) {}", które występuje w późniejszych wersjach Kendo (np. v2013.1.319)

columns : [ 
    { field: "MyCity", width: 80, title : "City", filterable: customTextFilter }, 
    { field: "CreatedAt", width: 72, title: "Created", filterable: $scope.customDateFilter } 
] 

Oto funkcja, która następnie dostosowuje wygląd:

var customTextFilter = 
    { 
     extra : false, 
     operators : { string : { contains : "Contains"}}, 
     ui : function(element) 
     { 
      var parent = element.parent(); 
      while(parent.children().length > 1) 
       $(parent.children()[0]).remove(); 

      parent.prepend("<input data-bind=\"value:filters[0].value\" class=\"k-textbox\" type=\"text\">"); 
     } 
    } 

Oto przykład mający dwa date pudełka z GTE formacie/LTE:

var customDateFilter = 
    { 
     extra : true, 
     operators : { }, 
     ui : function(element) 
     { 
      var parent = element.parent(); 
      while(parent.children().length > 1) 
       $(parent.children()[0]).remove(); 

      parent.prepend(
       "On or after:<br/><span class=\"k-widget k-datepicker k-header\">" + 
       "<span class=\"k-picker-wrap k-state-default\">" + 
       "<input data-bind=\"value:filters[0].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" + 
       " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-disabled=\"false\" " + 
       " aria-readonly=\"false\" aria-label=\"Choose a date\">" + 
       "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" + 
       "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" + 

       "<br/>On or before:<br/>" + 
       "<span class=\"k-widget k-datepicker k-header\"><span class=\"k-picker-wrap k-state-default\">" + 
       "<input data-bind=\"value: filters[1].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" + 
       " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" " + 
       " aria-disabled=\"false\" aria-readonly=\"false\" aria-label=\"Choose a date\">" + 
       "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" + 
       "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" 
      ); 
     } 
    }; 

Oczywiście możesz dowolnie szablonować i tworzyć różne niestandardowe filtry dla Date, Boolean, itd. - zauważ, że dla wersji Date powyżej, jeśli chcesz ustawić operatorów poprawnie, aby powiedzieć "gte" i "lte" dla filtr [0] Dopełniającym operatorem i filtrować [1] Dopełniającym operatorem można po prostu ustawić, że na dataSource.filter atrybut tak:

dataSource: { 
     transport : 
     { 
      read : function(context) 
      { 
       //note that here context.filter.filters has the array 
       //of applied filters -- you can write a custom RESTful call 
       //such as angular $http.get() or use Kendo native format to 
       //send filter options to server. 
      } 
     }, 
     //filter settings here initialize filter[0], filter[1], etc. 
     filter : [ 
      { field : "CreatedAt", operator : "gte" }, 
      { field : "CreatedAt", operator : "lte" }] 
    } 

Answer 3

miałem ten sam problem i mam to, że potrzebuje . Wyczyść() opcję!

buduję moją siatkę z MVC Wrapper w Razor:

@(Html.Kendo().Grid<LocationViewModel>() 
    .Name("locationGrid") 
    // other bits of configuration here 
    .ColumnMenu() 
    .Filterable(f => f.Operators(o => o.ForString(s => s 
     .Clear() 
     .Contains("Contains") 
     .DoesNotContain("Does not contain") 
     .EndsWith("Ends with") 
    ))) 
    // other bits of configuration here 
) 

Podsumowanie:

1. .Clear() jest potrzebna!
2. Konieczne jest sortowanie! Umieść .Contains() najpierw po .Clear(), a następnie domyślną wartością jest Contains!

Informacje dodatkowe: Używam Kendo UI 2013.1.514

Answer 4

odsączyć: {operatorzy {numer: {GTE: "większy niż lub równy"}}}

Answer 5

Najlepszym sposobem na zmianę operatora domyślną wszystko instancje:

kendo.ui.FilterMenu.prototype.options.operators =   
    $.extend(kendo.ui.FilterMenu.prototype.options.operators, { 
    string: { 
     contains: "Contains", 
     startswith: "Starts with", 
     eq: "Is equal to", 
     neq: "Is not equal to", 
     doesnotcontain: "Does not contain", 
     endswith: "Ends with" 
    } 
}); 

i kompletny scenariusz:

kendo.ui.FilterMenu.prototype.options.operators =   
    $.extend(kendo.ui.FilterMenu.prototype.options.operators, { 

/* FILTER MENU OPERATORS (for each supported data type) 
****************************************************************************/ 
    string: { 
     contains: "Contains", 
     startswith: "Starts with", 
     eq: "Is equal to", 
     neq: "Is not equal to", 
     doesnotcontain: "Does not contain", 
     endswith: "Ends with" 
    }, 
    number: { 
     eq: "Is equal to", 
     neq: "Is not equal to", 
     gte: "Is greater than or equal to", 
     gt: "Is greater than", 
     lte: "Is less than or equal to", 
     lt: "Is less than" 
    }, 
    date: { 
     eq: "Is equal to", 
     neq: "Is not equal to", 
     gte: "Is after or equal to", 
     gt: "Is after", 
     lte: "Is before or equal to", 
     lt: "Is before" 
    }, 
    enums: { 
     eq: "Is equal to", 
     neq: "Is not equal to" 
    } 
/***************************************************************************/ 
});