Question

我有一个网格，它被页面上的另一个区域过滤掉。我已经想出如何通过javascript / ajax传递过滤器参数来过滤网格列。但是，我想传递自定义过滤器参数（没有列）来执行服务器端的其他过滤。

在我的情况下，用户可以拥有0：M角色。我没有在KendoUI Grid中显示角色，但是我想在多线框中选择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)
    {
    }

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

2 个答案: