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

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

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

注意：这显示为可以执行的操作的示例。

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

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

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

1 个答案: