2016-09-15 3 views
0

내 MVC 응용 프로그램에서 KendoUI를 사용하고 있습니다. 일부 입력 상자와 다중 선택 위젯을 사용하여 그리드를 필터링하고 있습니다. 다중 선택 위젯은 선택된 요소를 배열로 전달합니다. 제 질문은 어떻게 multiselect를 사용하여 그리드를 필터링 할 수 있습니까?다중 선택 위젯을 사용하여 KendoUI Grid를 필터링하는 방법은 무엇입니까?

현재 모든 입력은 "AND"의 전역 조건을 공유하므로 데이터를 반환 할 때 함께 작동 할 수 있지만 다중 선택은 작동하려면 "OR"의 하위 조건이 있어야합니다.

내가 시도한 것은 전달 된 배열 객체를 반복하고 개별적으로 반환하는 것입니다. 그들에게 적용될 "또는"의 다중 선택 조건이 필요합니다. 배열 개체가 콘솔에 개별적으로 반환되지만 그리드의 전체 필터링에 포함되어 있지 않아 중복되는 것을 볼 수 있습니다.

이 문제를 해결할 수있는 사람이 있습니까? 아래에 내 코드를 포함 시켰습니다.이 코드는 다중 선택 위젯이 자바 스크립트 코드에있는 위치와 내가 취한 접근 방식을 보여줍니다.

위의 검색 입력란을 제어하는 ​​자바 스크립트입니다.

var search_btn = document.getElementById("search-button");  

function search() { 

    var filters = [], 
     grid_aberdeen = $('#Grid').data('kendoGrid'), 
     search_charterer = $("#charterer_company").data("kendoDropDownList").value(), 
     search_start = $("#fixture_start").data("kendoDatePicker").value(), 
     search_end = $("#fixture_end").data("kendoDatePicker").value(), 
     search_type = $("#vessel_type").data("kendoDropDownList").value(), 
     search_duties = $("#workscopecode").data("kendoMultiSelect").value(); 



    if (search_charterer) { 
     filters.push(
      { 
       field: "charterer_company", 
       operator: "eq", 
       value: search_charterer 
      } 
     ) 
    } 

    if (search_start) { 
     filters.push(
      { 
       field: "fixture_start", 
       operator: "gte", 
       value: search_start 
      }) 
    } 

    if (search_end) { 
     filters.push(
      { 
       field: "fixture_end", 
       operator: "lte", 
       value: search_end 
      }) 
    }  

    if (search_duties) { 
     var sub_filter = { logic: "or", filters: [] }    

     $.each(search_duties, function (i, v) { 
      sub_filter.filters.push[ 
       { 
        field: "workscopecode", 
        operator: "eq", 
        value: v 
       } 
      ]         
      console.log(v) 
     })    
    }; 

    grid_aberdeen.dataSource.filter({ 
     logic: "and", 
     filters: filters 
    }); 
} 
search_btn.addEventListener("click", search); 

당신은 내가 당신이 경우 나는 다중 선택에 적용 할 것을는 "하위 상태를"만들려고했지만 그것은 아무것도 아니에요 볼 수 있듯이. 콘솔은 배열 항목이 잘 분리되어 있지만 실제 필터는 작동하지 않는다고 보여줍니다.

var sub_filter = { logic: "or", filters: [] } 

답변

2

UPDATE

문제가 sub_filterdataSource.filter() 방법으로 전달되는 filters 어레이에 첨가 적이된다는 것이다.


filters 개체 구조를 다시 확인하십시오. 원하는 동작이 지원됩니다

http://dojo.telerik.com/ABeBO

var filters = { 
    logic: "and", 
    filters: [ 
    { field: "ShipName", operator: "contains", value: "o" }, 
    { field: "ShipCity", operator: "contains", value: "o" }, 
    { 
     logic: "or", 
     filters: [ 
     { field: "OrderID", operator: "eq", value: 10251 }, 
     { field: "OrderID", operator: "eq", value: 10259 } 
     ] 
    } 
    ] 
}; 

$("#grid").data("kendoGrid").dataSource.filter(filters); 
1

좋아, 그래서이 필터 자체의 내 형식의 작은 에러가 발생했을 작동시킬 수 있습니다. 이 문제를 해결하기 위해 배열을 반복하여 검색 필터에 개별 용어로 전달할 수 있도록 다음과 같은 변경 작업을 수행했습니다.

if (search_duties) { 
     var sub_filter = { 
      logic: "or", 
      filters: [] 
     } 

     $.each(search_duties, function (i, v) { 
      sub_filter.filters.push(
       { 
        field: "workscopecode", 
        operator: "eq", 
        value: v 
       }) 

     }) 
     filters.push(sub_filter); 
    } 

참고이 변경 브라켓의 제거 :

[] 이미 VAR 필터 정의되었으므로
$.each(search_duties, function (i, v) { 
      sub_filter.filters.push(
       { 
        field: "workscopecode", 
        operator: "eq", 
        value: v 
       }) 

     }) 

: [] I '는 didn를 대신에

$.each(search_duties, function (i, v) { 
     sub_filter.filters.push[ 
      { 
       field: "workscopecode", 
       operator: "eq", 
       value: v 
      } 
     ]         
     console.log(v) 
    }) 

을 그렇지 않으면 실제 필터 자체에서이를 다시 제거해야합니다. 그렇지 않으면 출력에 아무 것도하지 않는 [[... 필터 ...]]처럼 보일 것입니다.

관련 문제