使用网格外部的控件使用远程数据绑定过滤MVC中的Kendo UI网格

Question

我正在开展一个项目，客户希望能够拥有一个＆＃34; Control＆＃34;在用户可以开始输入的页面上，数据网格将按每次击键进行过滤。

过滤器应该使用starts with operator，并删除输入内的所有字符（＆＃34; control＆＃34;）会将Grid重置为其原始未过滤状态。

我的控制器，我不想修改它或添加其他参数：

public JsonResult GetFoo([DataSourceRequest]DataSourceRequest request, bool active = true)
{
    List<Foo> model = FooContext.Foo.GetFoo(active);
    model = model.OrderBy(m => m.Name).ToList();
    return Json(model.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}

这是我目前的Gird：

@(Html.Kendo().Grid<foo>()
    .Name("fooTable")
    .PrefixUrlParameters(Settings.Grid.PrefixUrlParameters)
    .Columns(columns =>
    {
        columns
            .Bound("fooName")
            .ClientTemplate("<a href='#= Id #'>#= fooName #</a>");
        columns
            .Bound("StateName")
            .Title("State").Width(120);
        columns.Bound("PreviousYearsHomes")
            .Title("Previous Years Homes")
            .Width(120); 
        columns.Bound("CurrentYearsHomes")
            .Title("Current Years Homes")
            .Width(120);
    .Sortable()
    .Resizable(q => q.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("GetBuilders", "Builders", new { Area = "Administrator", active = true }))
    )
)

过滤器应过滤＆＃39; fooName＆＃39;列。

Answer 1

我真的不想回答我自己的问题，但对于任何为自己尝试这个问题的人来说，这就是我为了得到我想要的结果所做的。

添加了ID为fooNameInput

的输入

<script type="text/javascript">


$(function () {
    $('#fooNameInput').on("keyup change", function () {
        var Value = $(this).val();
        if (Value.length) {
            FilterGridByName(Value, 'Name');
        }
        else {
            $('#fooTable').data("kendoGrid").dataSource.filter([]);
        }
    });



    function FilterGridByName(Value, Field) {
        if (Field != "") {
            if (Value != "") {
                $('#fooTable').data("kendoGrid").dataSource.filter({ field: Field, operator: "startswith", value: Value })
            }
            else {
                $('#fooTable').data("kendoGrid").dataSource.filter([]);
            }
        }
    }
});
</script>

这是有效的，但是如果有更好的方式请在评论中告诉我，我会更新此答案/删除它。

这是另一个我认为很重要的选项 -

另一个选项提供者：https://stackoverflow.com/users/2293059/stevechapman

我建议指定数据源上可用的.Data(string handler)方法，例如

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("GetBuilders", "Builders", new { Area = "Administrator", active = true })
        .Data("getDataParams")
    )
)

这允许您指定一个javascript函数，该函数返回一个JSON对象，定义附加参数以附加到ajax请求。

您可以使用以下内容：

var getDataParams = function (e) {
    var result = {
        name: $('#fooNameInput').val()
    }
    return result;
};

触发刷新网格（来自键事件或类似事件）：

$("#fooTable").data("kendoGrid").dataSource.read();

一些文件可以提供帮助：

Kendo Forums working example

MVC Fluent docs

Answer 2

我建议指定数据源上可用的.Data(string handler)方法，例如

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("GetBuilders", "Builders", new { Area = "Administrator", active = true })
        .Data("getDataParams")
    )
)

这允许您指定一个javascript函数，该函数返回一个JSON对象，定义附加参数以附加到ajax请求。

您可以使用以下内容：

var getDataParams = function (e) {
    var result = {
        name: $('#fooNameInput').val()
    }
    return result;
};

触发刷新网格（来自键事件或类似事件）：

$("#fooTable").data("kendoGrid").dataSource.read();

一些文件可以提供帮助：

Kendo Forums working example

MVC Fluent docs