KendoUI Grid의 모든 열 검색

Question

kendoUI 그리드 용 검색 상자를 만들려고합니다. 한 필드를 기반으로 한 검색을 시작할 수 있었지만 검색 상자의 값으로 그리드의 모든 열을 검색하고 싶습니다. jsfiddle.net를하지만 나는 그것이 작동시킬 수없는 것 ....

Answer 1

내가 생각하십시오 (또는 로직 버튼) :

See js fiddle example

function() { 
      grid.data("kendoGrid").dataSource.filter({ 
       field: "ProductName", 
       operator: "contains", 
       value: $('#category').val() 
      }); 

     } 

나는 여기 나 논리 연산자를 사용하여 시도 두 조건 중 하나와 일치 시키려면 eq에서 fee 또는 eq에서 fi으로 변경해야합니다.

fiddle을 약간 수정했습니다. 검색 창에 입력하면 ProductName 열 또는 QuantityPerUnit과 일치하는 레코드를 필터링합니다.

//change event 
$("#category").keyup(function() { 
    var val = $('#category').val(); 
    $("#grid").data("kendoGrid").dataSource.filter({ 
     logic : "or", 
     filters: [ 
      { 
       field : "ProductName", 
       operator: "contains", 
       value : val 
      }, 
      { 
       field : "QuantityPerUnit", 
       operator: "contains", 
       value : val 
      } 
     ] 
    }); 
}); 

중요 : 나는 그것이 작동하기 위해 1.8.2에 jQuery를 버전을 업데이트해야했다 단지 경우에 나는 최신 버전으로,뿐만 아니라, KendoUI을 업데이트했습니다.

Answer 2

열 이름에 대해 걱정할 필요가없는 경우이 코드를 대신 사용할 수 있습니다. 그것은 어떤 표에서도 작동하며 하드 코딩 된 열 이름을 지정하지 않고 필터링 가능으로 표시된 모든 열을 검색합니다. 또한 누군가가 검색 쿼리를 복사하여 붙여 넣을 경우 이벤트가 호출되도록 추가 이벤트를 추가했습니다. (또한 jQuery 1.83 이상이 필요합니다.) 나는 jQuery Datatables 플러그인에서 Kendo UI Grid로 전환 한 후이 코드를 만들었습니다. 나는 Kendo를 좋아하지만 DataTables에서 제공하는 글로벌 검색 텍스트 박스를 놓쳤습니다. 내 모든 검도 그리드에이 코드를 포함합니다.

Answer 3

OnaBai의 대답은 데이터 테이블처럼 작동하지 않습니다. 데이터 테이블은 공백을 필드간에 처리합니다. 당신이 "요리사 36"을 입력하면 바이올린에 결과가 표시되지 않습니다. 데이터 테이블 검색은 한 열에 요리사가 있고 다른 열에는 36을 가지기 때문에 productid가 5 인 행을 표시합니다. 올바른 코드는 http://jsfiddle.net/Naka3/38/과 같습니다.

$("#category").keyup(function() { 
    var selecteditem = $('#category').val(); 
    var kgrid = $("#grid").data("kendoGrid"); 
    selecteditem = selecteditem.toUpperCase(); 
    var selectedArray = selecteditem.split(" "); 
    if (selecteditem) { 
     //kgrid.dataSource.filter({ field: "UserName", operator: "eq", value: selecteditem }); 
     var orfilter = { logic: "or", filters: [] }; 
     var andfilter = { logic: "and", filters: [] }; 
     $.each(selectedArray, function (i, v) { 
      if (v.trim() == "") { 
      } 
      else { 
       $.each(selectedArray, function (i, v1) { 
        if (v1.trim() == "") { 
        } 
        else { 
         orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 }, 
               { field: "QuantityPerUnit", operator: "contains", value:v1}); 
         andfilter.filters.push(orfilter); 
         orfilter = { logic: "or", filters: [] }; 
        } 

       }); 
      } 
     }); 
     kgrid.dataSource.filter(andfilter); 
    } 
    else { 
     kgrid.dataSource.filter({}); 
    } 

});