Kendo ui 剑道UI网格，mvc工具栏中的搜索框

mvc工具栏中的剑道网格搜索框，使用razor语法

---

我正面临我需要的工具栏中的搜索框，这个搜索框搜索到网格数据。

只需复制并粘贴此代码绑定mvc模型和自定义按钮（CRUD）以及剑道网格模板工具栏中的搜索框

<div>
    @(Html.Kendo().Grid(Model)
    .Name("DiagnosisTestGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Description).Title("Description");
        columns.Bound(c => c.Cost).Title("Cost");
        columns.Bound(c => c.CostingRequired).Title("Cost Req.");
        columns.Bound(c => c.DxTestId).ClientTemplate(@"
    <a href='/DiagnosisTest/Details/#=DxTestId#' class = 'dialog-window'>Detail</a> |
    <a href='/DiagnosisTest/Edit/#=DxTestId#' class = 'dialog-window'  >Edit</a> |
    <a href='/DiagnosisTest/Delete/#=DxTestId#' class = 'dialog-window'>Delete</a>
            ").Title("");
    })

       .ToolBar(toolbar =>
        {
            toolbar.Template(@<text>
                <div class="toolbar">

                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                                <input type="text" class="form-control" id='FieldFilter' placeholder="Search for...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </text>);
        })

     .Resizable(resizing => resizing.Columns(true))
     .Sortable(sorting => sorting.Enabled(true))
     .Reorderable(reorder => reorder.Columns(true))
     .Pageable()
     .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .ServerOperation(false)
        ))
</div>

@（Html.Kendo（）.Grid（模型）
.Name（“DiagnosisTestGrid”）
.列（列=>
{
columns.Bound（c=>c.Description）.Title（“Description”）；
columns.Bound（c=>c.Cost）.Title（“Cost”）；
columns.Bound（c=>c.CostingRequired）.Title（“要求成本”）；
columns.Bound（c=>c.DxTestId）.ClientTemplate（@）
|
|
“”。标题（“”）；
})
.ToolBar（ToolBar=>
{
工具栏.模板(@
);
})
.resizeable（resize=>resize.Columns（true））
.Sortable（排序=>sorting.Enabled（true））
.Reorderable（reorder=>reorder.Columns（true））
.Pageable（）
.DataSource（DataSource=>DataSource
.Ajax（）
.页面大小（5）
.ServerOperation（错误）
))

搜索框的脚本。并筛选网格项

<script>
$(document).ready(function () {
    $("#FieldFilter").keyup(function () {

        var value = $("#FieldFilter").val();
        grid = $("#DiagnosisTestGrid").data("kendoGrid");

        if (value) {
            grid.dataSource.filter({ field: "Description", operator: "contains", value: value });
        } else {
            grid.dataSource.filter({});
        }
    });
});

$（文档）.ready（函数（）{
$（“#字段过滤器”）.keyup（函数（）{
var值=$（“#字段过滤器”）.val（）；
网格=$（“#诊断系统网格”）。数据（“kendoGrid”）；
如果（值）{
filter（{field:“Description”，operator:“contains”，value:value}）；
}否则{
grid.dataSource.filter（{}）；
}
});
});

---

我知道这是一个老问题，但被接受的答案似乎非常有限。这就是我将搜索框添加到工具栏的方式

.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>))

.ToolBar（ToolBar=>ToolBar.Template（@））

然后是剧本

<script type="text/javascript">
    function addSearch() {
        return { searchbox: $('#searchbox').val() };
    }
    $('#searchbox').keyup(function () {
        $('#gridWorkflows').data('kendoGrid').dataSource.read();
    });
</script>

函数addSearch（）{
返回{searchbox:$（'#searchbox'）.val（）；
}
$（“#搜索框”）.keyup（函数（）{
$（'#gridWorkflows'）.data（'kendoGrid'）.dataSource.read（）；
});

这似乎比您当前使用的要简单一些。

---

希望有帮助。

对于未来的灵魂：将其添加到网格本身，例如在.Columns（…）之后。此解决方案如何工作？我试过了，但不起作用。它不搜索任何内容。请尝试以下操作：.k-grid-toolbar{float:right；padding-right:20px；}