网格自定义筛选器不在网格中

Question

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

在我的情况下，用户可以有0：M个角色。我没有在KendoUI网格中显示角色，但是我想在多重展开框中选择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

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

Answer 2

你应该使用一个名为data在dataSource.read配置的功能。