Setze Standardfilter für Kendo UI Grid

Question

Ich habe ein Kendo UI Grid, das mit JavaScript gerendert wird. Ich möchte, dass die String-Spalten eine einzige Option haben ("Contains") und ohne den zweiten Filter. So weit so gut, schrieb ich

 $("#MyGrid").kendoGrid({ 
      // other bits of configuration here 
      filterable: { 
       extra:false, 
       operators: { 
        string:{ contains: "Contains"} 
       } 
      }, 
      // more bits of configuration here 
     }); 

Als Teil der Definition des Rasters. Und das Ergebnis sieht gut aus (ich habe nur eine Option, also ist das Dropdown überflüssig).

Doch unabhängig davon, führt der Filter immer noch die Gleichen Betrieb anstatt die Operation enthält (das ist der einzige, es verfügbar ist).

Ich habe eine Weile damit verbracht, das herauszufinden und ich laufe weiter im Kreis, weil der Code, den ich gefunden habe, entweder nicht funktioniert, oder keinen Sinn ergibt, oder beides.

Kann mir jemand sagen, wie man den Filter auf "Enthält" und nicht "Ist gleich" setzt?

Answer 1

Versuchen Sie, auf den neuesten internen Build zu aktualisieren. Version später als 2012.3.1304 sollte das Update enthalten.

Answer 2

Wenn Sie nur eine einzige Option haben oder mit dem Layout nicht zufrieden sind, können Sie die Filtersteuerung mit der Überladung "ui: func (element) {}", die in späteren Versionen von Kendo vorhanden ist, anpassen v2013.1.319)

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

Hier ist die Funktion, die dann das Aussehen paßt:

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\">"); 
     } 
    } 

Hier ist ein Beispiel mit zwei Datumsfeldern mit GTE/LTE-Format:

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

Offensichtlich können Sie Vorlage aber wie Sie möchten und verschiedene benutzerdefinierte Filter für Datum, Boolean, etc. erstellen - beachten Sie, dass für die Datum-Version oben, wenn Sie die Operatoren korrekt festlegen möchten, sagen "Gte" und "Lte" für Filter [0] .operator und Filter [1] .operator Sie können das nur gesetzt auf dem dataSource.filter wie so Attribut:

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

ich hatte das gleiche Problem, und ich habe es, dass es die braucht. Löschen() Option!

ich mein Grid in Razor mit dem MVC-Wrapper am Bau:

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

Zusammenfassung:

1. .Clear() ist erforderlich!
2. Sortierung ist notwendig! Setzen Sie .Contains() zuerst nach .Clear() dann ist der Standard Enthält!

Zusätzliche Information: Ich bin mit Kendo UI 2013,1.514

Answer 4

filterbar: {Operatoren: {Nummer: {gte: "größer oder gleich"}}}

Answer 5

Der beste Weg, um den Standard-Operator für all der Instanzen zu ändern:

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

und das komplette Skript:

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" 
    } 
/***************************************************************************/ 
});