对于列不电网格的自定义过滤器(Grid Custom Filter for Columns Not

我有一个是通过页面上的其他区域过滤的网格。 我已经想通了如何通过JavaScript / AJAX通过过滤器参数过滤器网格列。 不过，我想通过自定义过滤器参数（没有列）做额外的过滤服务器端。

在我的情况下，用户可以有0：M角色。 我没有显示在KendoUI电网的角色，但是我想选择0：在multiselct输入框中m角色，通过选择到网格的过滤器调用，这样我可以在我的存储过程中使用的值服务器端。 有人知道怎么做吗？ 这是我的当前设置。

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>Account Filter</legend>

    <table>
        <tr>
            <td style="vertical-align: top;">
                <div class="editor-label">
                    <label>User Name:</label>
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.UserName)
                    @Html.ValidationMessageFor(model => model.UserName)
                </div>

                <div class="editor-label">
                    <label>Email:</label>
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.PrimaryEmailAddress)
                    @Html.ValidationMessageFor(model => model.PrimaryEmailAddress)
                </div>

                <p>
                    <input type="button" id="btnFilter" value="Filter" />
                </p>
            </td>
            <td>&nbsp;</td>
            <td style="vertical-align: top;">
                <div class="editor-label">
                    <label>Role(s):</label>
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.RolesList, Model.RolesList, null, htmlAttributes: new { id="ddlTimeZones", multiple="multiple" })
                    @Html.ValidationMessageFor(model => model.RolesList)
                </div>
            </td>
        </tr>

    </table>
</fieldset>
}

<div style="margin-top: 10px;">
@(Html.Kendo().Grid<AccountGridModel>()    
    .Name("grdAccounts")
    .Columns(columns =>
    {
        columns.Bound(m => m.UserId);
        columns.Bound(m => m.UserName);
        columns.Bound(m => m.FirstName);
        columns.Bound(m => m.LastName);
        columns.Bound(m => m.PrimaryEmailAddress);
    })
    .Groupable(grouping => grouping
        .Enabled(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(m => m.UserId))
        .Events(events => events.Error("error_handler"))
        .Read(read => read.Action("Index", "Accounts"))
        .Sort(sort => sort.Add(m => m.UserName).Ascending())
        .PageSize(20))
    .Filterable(filtering => filtering
        .Enabled(false))
    .Pageable(paging => paging
        .Enabled(true)
        .Info(true)
        .PageSizes(false)
        .Refresh(true))
    .Scrollable(scrolling => scrolling
        .Enabled(false)
        .Height(400)
        .Virtual(false))
    .Sortable(sorting => sorting
        .Enabled(true)
        .AllowUnsort(false)
        .SortMode(GridSortMode.SingleColumn)))
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    $("#btnFilter").click(function () {
        //var dateFrom = $("#dpDateFrom").data("kendoDatePicker").value();
        var userName = $("#UserName").val();
        var primaryEmail = $("#PrimaryEmailAddress").val();

        var grid = $("#grdAccounts").data("kendoGrid");

        grid.dataSource.filter({
            logic: "and",
            filters: [
                { field: 'UserName', operator: 'contains', value: userName },
                { field: 'PrimaryEmailAddress', operator: 'contains', value: primaryEmail },
                { field: 'RoleIdList', operator: 'contains', value: '1,2,3,4' } //this errors... no column
            ]
        });
    });
</script>
}

Answer 1:

您应该使用的函数调用数据的dataSource.read配置。

Answer 2:

由于Pechka开始我在正确的方向。 你可以传递额外的值通过Read.Data控制器的javascript如下图所示的功能。

<div style="margin-top: 10px;">
@(Html.Kendo().Grid<AccountGridModel>()    
    .Name("grdAccounts")
    .Columns(columns =>
    {
        columns.Bound(m => m.UserId);
        columns.Bound(m => m.UserName).Filterable(false);
        columns.Bound(m => m.FirstName);
        columns.Bound(m => m.LastName);
        columns.Bound(m => m.PrimaryEmailAddress).Filterable(false);
    })
    .Groupable(grouping => grouping
        .Enabled(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(m => m.UserId))
        .Events(events => events.Error("error_handler"))
        .Read(read => read.Action("Index", "Accounts").Data("additionalData"))
        .Sort(sort => sort.Add(m => m.UserName).Ascending())
        .PageSize(20))
    .Filterable(filtering => filtering
        .Enabled(true))
    .Pageable(paging => paging
        .Enabled(true)
        .Info(true)
        .PageSizes(false)
        .Refresh(true))
    .Scrollable(scrolling => scrolling
        .Enabled(false)
        .Height(400)
        .Virtual(false))
    .Sortable(sorting => sorting
        .Enabled(true)
        .AllowUnsort(false)
        .SortMode(GridSortMode.SingleColumn)))
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    function additionalData() {
        var userName = $("#UserName").val();
        var primaryEmailAddress = $("#PrimaryEmailAddress").val();
        var roleIdList = "";

        var selMulti = $.map($("#RolesList option:selected"), function (el, i) {
            return $(el).val();
        });
        roleIdList = selMulti.join(",");

        return {
            userName: userName,
            primaryEmailAddress: primaryEmailAddress,
            roleIdList: roleIdList
        };
    }

    $("#btnFilter").click(function () {
        var grid = $("#grdAccounts").data("kendoGrid");
        grid.dataSource.read();
    });
</script>
}

然后，在你的控制器中添加变量到你的POST功能，如下所示：

        //
    // POST: /Admin/Accounts/

    [HttpPost]
    public ActionResult Index([DataSourceRequest] DataSourceRequest request, string userName, string primaryEmailAddress, string roleIdList)
    {
    }

文章来源: Grid Custom Filter for Columns Not In Grid