網格自定義篩選器不在網格中

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配置的功能。