kendo-ui - 不在网格中的列的网格自定义过滤器

Question

我有一个由页面上的另一个区域过滤的网格。我已经想出了如何通过 javascript/ajax 传递过滤器参数来过滤网格列。但是，我想传递自定义过滤器参数（没有列）来做额外的过滤服务器端。

就我而言，用户可以拥有 0:M 角色。我没有在 KendoUI Grid 中显示角色，但是我想在 multiselct 框中选择 0: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 配置中使用名为data的函数。

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)
    {
    }