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

本文关键字：网格 数据绑定 Kendo UI 控件 MVC 过滤 | 更新日期: 2023-09-27 17:53:01

我正在做一个项目，客户希望能够在页面上有一个"控制"，用户可以开始打字，数据网格将与每次击键过滤。

过滤器应该使用以开头的操作符，并且删除输入("control")中的所有字符将使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);
}

这是我当前的栅格:

@(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 }))
    )
)

Filter应该过滤'fooName'列

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

我建议指定数据源上可用的.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();

一些文档的帮助:

剑道论坛工作示例

MVC Fluent docs

我真的不想回答我自己的问题，但是对于任何为自己尝试这个的人来说，这就是我所做的，以获得我正在寻找的结果。

添加了一个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();

一些文档的帮助:

剑道论坛工作示例

MVC Fluent docs

相关文章：