Kendo 使用 .query 清除样式的搜索框
Kendo Search Box Using .query Clears Styling
我有一个带有自定义样式和搜索框的 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。我将继续使用这条路线,直到我知道这行得通/行不通或直到有人回答。
我的问题的根源在于首先将 .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},
]
})
});
我有一个带有自定义样式和搜索框的 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。我将继续使用这条路线,直到我知道这行得通/行不通或直到有人回答。
我的问题的根源在于首先将 .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},
]
})
});