Html Kendo ASPNET MVC网格过滤器行，将搜索图标或占位符放置在搜索内

我想在KendoUIASP.Net过滤器行中添加搜索图标或占位符字符串，MVC代码如所附屏幕截图所示

请查找以下代码ASP.Net MVC：

                    @(Html.Kendo().Grid<EaseOfApprovalModels.Models.HandShake>()
                    .Name("grid1")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.CompanyID).Visible(false);
                        .Filterable(x => x.Enabled(false)).Width(25).Title("");
                        columns.Bound(p => p.CompanyName).Width(200).Filterable(ftb => ftb.Multi(true)).Title("Company Name");
                        columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' onclick='SelectCompanyRow(this);' />").Width(50).Title("Status");

                    })
                    .Sortable()
                    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                    .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                )

@（Html.Kendo（）.Grid（））
.名称（“grid1”）
.列（列=>
{
columns.Bound（p=>p.CompanyID）.Visible（false）；
.Filterable（x=>x.Enabled（false））.Width（25）.Title（“”）；
columns.Bound（p=>p.CompanyName）.Width（200）.Filterable（ftb=>ftb.Multi（true））.Title（“公司名称”）；
columns.Template（@）.ClientTemplate（“”）.Width（50）.Title（“Status”）；
})
.Sortable（）
.Filterable（ftb=>ftb.Mode（GridFilterMode.Row））
.Pageable（Pageable=>Pageable
.刷新（真）
.页面大小（真）
.按钮计数（5））
.DataSource（DataSource=>DataSource
.Ajax（）
.页面大小（5）
)

---

我找不到任何添加搜索图标或放置html5占位符的选项，用户需要了解筛选行网格列上可用的搜索框。

一种方法是在document ready上添加占位符文本

大概是这样的：

$(document).read(function(){
   $('input[data-text-field="{Your Column Title here}"')
      .prop('placeholder', "<insert some text>");
});

function someFilterHere(element)
    {
        var dataSource = $('#grid1').data('kendoGrid').dataSource;

       element.element.removeAttr("data-bind");
        element.element.prop('placeholder', 'some search text here');
        element.element.kendoAutoComplete({
             dataSource: dataSource ,
            autoBind: true,
            serverFiltering: false,
            filter:"contains",
            dataTextField:"Title"
        }).data('kendoAutoComplete');
    }

然后使用如下函数：

$(document).read(function(){
   $('input[data-text-field="{Your Column Title here}"')
      .prop('placeholder', "<insert some text>");
});

function someFilterHere(element)
    {
        var dataSource = $('#grid1').data('kendoGrid').dataSource;

       element.element.removeAttr("data-bind");
        element.element.prop('placeholder', 'some search text here');
        element.element.kendoAutoComplete({
             dataSource: dataSource ,
            autoBind: true,
            serverFiltering: false,
            filter:"contains",
            dataTextField:"Title"
        }).data('kendoAutoComplete');
    }

然后，这将把新的自动完成控件绑定到网格的数据源，并显示可用的选项

就我个人而言，我会为此控件创建一个新的数据源，因为使用这种方法，即抓取网格的数据源可能会产生一些不幸的后果，例如意外的网格刷新

注意：这是一个可以执行的示例

对于速度和更少的配置，第一个选项可能是最合适的

---

我提供了一个dojo，演示了这两种方法。

谢谢David。我知道，我们可以使用JS/jQuery来实现，我所看到的是razor语法中的某种配置，如果我们在应用程序中使用了quit几个剑道网格，它可以很容易地打开/关闭。而且似乎也没有办法添加输入文本中的n图标用于搜索。可能是，我们刚刚在单元格中保留了模板选项。除了创建“自定义”或重载版本的小部件外，mvc包装中没有我所知道的配置选项。