1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var column = gridView.columnByName('CustomerID');
if (column) {
    var filters = [{
        name: "VINET",
        criteria: "value = 'VINET'"
    }, {
        name: "VICTE",
        criteria: "value = 'VICTE'"
    }, {
        name: "HANAR",
        criteria: "value = 'HANAR'"
    }, {
        name: "'VICTE' or 'HANAR'",
        criteria: "(value = 'VICTE') or (value = 'HANAR')"
    }, {
        name: "HANAR: value > 'HANAR'",
        criteria: "value > 'HANAR'"
    }, {
        name: "SUPRD",
        criteria: "value = 'SUPRD'"
    }, {
        name: "SUPRD: value <> 'SUPRD'",
        criteria: "value <> 'SUPRD'"
    }, {
        name: "not equal CustomerID2",
        criteria: "value <> values['CustomerID2']" // CustomerID와 CustomerID2가 상이한 경우
    }, {
        name: "W: value like 'L%'",
        criteria: "value like 'L%'"
    }, {
        name: "W: value not like 'L%'",
        criteria: "value not like 'L%'"
    }, {
        name: "S: value like '%S'",
        criteria: "value like '%S'"
    }, {
        name: "S: value not like '%S'",
        criteria: "value not like '%S'"
    }, { 
        name: "TC: value match 'TC'",
        criteria: "value match 'TC'" // 문자열에 TC가 포함된 경우
    }, {
        name: "match '^RATTC$|^SUPRD$'",
        criteria: "value match '^RATTC$|^SUPRD$'" //RATTC, SUPRD 중 하나인 경우
    }, { 
        name: "TC: value not match 'TC'",
        criteria: "value not match 'TC'" // 문자열에 TC가 포함되지 않는 경우
    }];

    // 컬럼 필터를 재설정한다.
    gridView.setColumnFilters('CustomerID', filters);

    // 아래와 같이 호출해도 된다.
    //column.filters = filters;
    //gridView.setColumn(column);
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var column = gridView.columnByName('OrderDate');
if (column) {
    var filters = [{
        name: "1996년",
        criteria: "year(value) = 1996"
    }, {
        name: "1997년",
        criteria: "year(value) = 1997"
    }, {
        name: "10월",
        criteria: "month(value) = 10"
    }, { 
        name: "8일",
        criteria: "day(value) = 8 "
    }, {
        name: "1시",
        criteria: "hour(value) = 1 "
    }, {
        name: "1996년10월",
        criteria: "datestr(value) like '199610%'"
    }];

    column.filters = filters;
    gridView.setColumn(column);
};

1
gridView.clearColumnFilters("CustomerID");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var filters = [{
    name: "VINET",
    criteria: "value = 'VINET'",
    active: false
}, {
    name: "VICTE",
    criteria: "value = 'VICTE'",
    active: true
}, {
    name: "HANAR",
    criteria: "value = 'HANAR'"
}];
var overwrite = true; // false면 기존에 같은 이름의 필터가 있을 때 예외 발생.

gridView.addColumnFilters('CustomerID', filters, overwrite);

1
gridView.removeColumnFilters('CustomerID', ["VINET", "VICTE"]);

1
gridView.activateColumnFilters('CustomerID', ["VINET", "VICTE"], true);

1
gridView.activateColumnFilters('CustomerID', ["VINET", "VICTE"], false);

1
gridView.activateAllColumnFilters('CustomerID', true);

1
gridView.activateAllColumnFilters('CustomerID', false);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
var actions = [{
  name: "autoFilter",
  text: "Auto Filter",
  description: "100개의 순차 데이터중 선택하여 filter하는 action."
}];

gridView.setColumnFilterActions('CustomerID', actions);
gridView.setColumnFilterActions('OrderID', actions);

$("#btnFilter").attr("disabled", "disabled");
$("#txtFilter").text("'CustomerId' 컬럼에 필터가 설정됐습니다.");  

//////////////////////////////////////////////////////////////////////////////    
gridView.onFilterActionClicked = function (grid, column, action, x, y) {
  console.log("onFilterActionClicked");
  if (action == "autoFilter") {
    var offset = $("#realgrid").offset();

    showAutoFiltering(column, x + offset.left, y + offset.top);
  }
};

var autoFiltercolumn;
var autoFilterItems = [];

function showAutoFiltering(column, x, y) {
  autoFiltercolumn = column;
  var fieldName = gridView.columnByName(column).fieldName;
  var values = dataProvider.getDistinctValues(fieldName, 100);

  var span = $("#spanFilters");
  span.empty();
  values.forEach(function (v) {
    var label = $("<label />").appendTo(span);
    var existsFilter = autoFilterItems.indexOf(v) >= 0;
    $("<input />", { type: "checkbox", name: "chkAutoFilterItem", value: v, checked: existsFilter}).appendTo(label);
    label.append(v);
    span.append("<br/>");
  });

  $("#divAutoFilter").css("left", x);
  $("#divAutoFilter").css("top", y);

  $("#divAutoFilter").show();
}

function applyAutoFilter() {
  var filterExpr = "";
  var filterItems = $('input[name="chkAutoFilterItem"]:checked');
  autoFilterItems = [];
  for (var i = 0; i < filterItems.length; i++) {
    autoFilterItems.push(filterItems[i].value);
    if (filterExpr != "")
      filterExpr += " or ";
    filterExpr += "(value = '" + filterItems[i].value + "')";
  };
  console.log(filterExpr);
  var filters = {
    name: "auto_result",
    criteria: filterExpr,
    active: true,
    hidden:true
  };

  gridView.addColumnFilters(autoFiltercolumn, filters, true);
  $("#divAutoFilter").hide();
};

function closeAutoFilter() {
  $("#divAutoFilter").hide();
}
/////////////////////////////////////////////////////////////////////////////
<div id="divAutoFilter" style="display:none; position:absolute; height:260px; background-color:#eeeeee; border:1px solid black;">
    <span id="spanFilters" style="overflow-y:scroll; display:block; width:100%; height:230px">
    </span>
    <input type="button" id="applyAutoFilter" value="Apply" onclick="applyAutoFilter();" class="button gray medium3" />
    <input type="button" id="cancelAutoFilter" value="Cancel" onclick="closeAutoFilter();" class="button gray medium3" />
</div>

1
gridView.hideColumnFilters("CustomerID", ["VINET"], true);

1
gridView.hideAllColumnFilters("CustomerID",true);

1
2
3
4
5
6
7
8
9
gridView.setFilteringOptions({
  clearWhenSearchCheck: true,
  selector:{
    showSearchInput: true,
    showButtons: true, 
    acceptText:"선택",
    cancelText:"취소"
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var filterFunc = function(dataProvider, dataRow, fieldName , filter, value) {
    if(filter.tag == 1 && value == "VINET"){
      return true;
    }else if(filter.tag == 2 && value == "VICTE"){
      return true;
     }else if(filter.tag == 3 && value == "HANAR"){
      return true;
     }else{
      return false;
    }
  }
  var filters = [
    { 
   name:"filter1",
   text:"VINET",
   tag:1,
   criteria:filterFunc
    },{ 
   name:"filter2",
   text:"VICTE",
   tag:2,
   criteria:filterFunc
    },{ 
   name:"filter3",
   text:"HANAR",
   tag:3,
   criteria:filterFunc
    }
  ]
  gridView.setColumnFilters("CustomerID", filters);