kendo ui 网格以编程方式隐藏和显示可过滤行

Question

我有一个剑道网格，filterable = true，mode=row。 我想要一种方法来单击按钮，触发一个事件，该事件将切换隐藏和显示过滤器行。 现在，我通过编辑 innerHTML 让它工作，但这不是我最终想要做的，有几个原因。

1) 在删除过滤器行值之前，我需要保存它们的版本。

2) 删除并重新添加后，它们将无法工作 ... 许多其他原因，只是不好的做法，必须有更好的方法。

触发事件的按钮：toggleFilterClick：

<script type="text/x-kendo-template" id="gridFilter">
     <button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>                                                                                                  
</script> 

Javascript 代码：

//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;

//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {                                                                               
    if ($(".k-filter-row")[0].innerHTML == '')
    {
      $(".k-filter-row")[0].innerHTML = filterRowValues;
    }
    else
    {
      $(".k-filter-row")[0].innerHTML = '';
    }                                                                                                                               
});

任何想法建议将不胜感激/

Answer 1

我只想在标题中隐藏实际的过滤器行

我不确定我是否明白这一点，但如果您只想隐藏它，只需删除除$(".k-filter-row").show(); 和$(".k-filter-row").hide(); 之外的所有内容。我创建了一个示例，当我隐藏过滤器时，过滤条件将被删除，但是当它再次显示时，网格将使用以前用于过滤的值重新过滤

$("#toggle").kendoButton({
click:function(){
    if($(".k-filter-row").css("display") == "none"){
        $(".k-filter-row").show();

        //show again filter and execute previous filter condition
        $("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
        $("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});

    }else{

          //store the previous filter value
          //autocomplete
          vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
          vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());

          //hide filter row
          $(".k-filter-row").show();

          //to reset filter of the grid when filterable hidden
          $("#grid").data("kendoGrid").dataSource.filter({});
    }
}
});

查看详情

DEMO

Answer 2

您是否尝试过仅隐藏该行而不是删除它？

//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {                             
    if ($(".k-filter-row").is(":visible")){
         $(".k-filter-row").hide();
    }
    else{
         $(".k-filter-row").show();
    }                                                                                                                               
});