Question

我有一个带有自定义样式和搜索框的Kendo网格。样式由.DataBound事件创建。

.Columns()
.Filterable()
.Pageable()
.Events(events => events.DataBound("onDataBound"))
.Toolbar(toolBar => toolBar.Template(@<text><input class='k-textbox' value="Search..."
         onfocus="if (this.value=='Search...') this.value='';"onblur="this.value = 
         this.value==''?'Search...':this.value;" id='searchbox'/></text>))  

function onDataBound(e)  
{
//ton of styling  
}

function addSearch() {
    return { searchbox: $('#searchbox').val() };
    }  
$('#searchbox').keyup(function () {
    var q = $("#searchbox").val();
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.query({
        filter: {
            logic: "or",
            filters: [
              { field: "User", operator: "contains", value: q },
              { field: "City", operator: "contains", value: q },
              { field: "Business", operator: "contains", value: q }
            ]
        }
    });

});

问题是这个新的搜索功能会立即排除onGridDataBound中找到的所有样式并使用它自己的样式。我试过在搜索功能中简单地调用onGridDataBound但没有任何反应。

必须有一个直截了当的解决方案。我究竟做错了什么？

更新
我想知道是否会以某种方式再次触发dataBound事件会重新建立我想要的样式，但是我很难做到这一点。我已经修补了一段时间，但似乎我无法掌握文档here。我将继续使用这条路线，直到我知道这样做/不起作用或直到有人回答。

Answer 1

我的问题的根源在于首先将.query方法用于搜索功能。 .query方法似乎实例化了一个新网格，这就是删除样式的原因在保持样式完整的同时编写搜索的正确方法是使用.filter方法。

$('#searchbox').keyup(function () {
    var q = $("#searchbox").val();
    var int = parseInt(q);  //required for fields that are of type int
    var grid = $("#gridWorkflows").data("kendoGrid");
    grid.dataSource.filter({
        logic: "or",
        filters: [
            {field: "Id", operator:"eq", value: int},  
            {field: "User", operator:"contains", value: q},
            {field: "City", operator:"contains", value: q},
            {field: "Business", operator:"contains", value: q},
        ]
    })
});

使用.query的Kendo搜索框清除样式

1 个答案: