Kendo ASPNET MVC Grid Filter 行，在搜索中放置搜索图标或占位符

Question

我希望在 Kendo UI ASP .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)
                )

我没有找到任何选项来添加搜索图标或放置 html5 占位符来提供，用户可以了解网格列上用于过滤器行的可用搜索框。

Answer 1

这样做的一种方法是在准备好的文档上添加占位符文本。

类似这样的：

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

只需将 data-text-field 元素替换为您为此列/绑定列名称提供的标题。如果您不确定它是什么，请使用开发工具为您公开该信息。然后只需将占位符文本更改为您想要的。

另一种选择是自己提供过滤器行模板并手动“制作”控件，例如：

 columns.Bound(c => c.Title).Width(300).Filterable(filter =>
            filter.Cell(cell => cell.Template("someFilterHere"))

然后使用这样的函数：

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');
    }

这会将新的自动完成控件绑定到网格的数据源并返回可用的选项。

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

注意：这是作为可以做什么的示例显示的。

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

我提供了一个道场http://dojo.telerik.com/OrAVO，其中包含两种方法的使用演示。