Kendo Grid過濾變化事件

Question

實際上，我的要求是當用戶在過濾器中輸入輸入時，Kendo網格應該根據輸入顯示匹配記錄。請幫我解決這個問題。

@(Html.Kendo().Grid(Model).Name("ViewDataGrid") 

           .Columns(columns => 
           { 
            columns.Bound(c => c.Id).Title(" ID").Width(150); 
            columns.Bound(c => c.Name).Title(" Name").Width(150); 

           }) 
           .HtmlAttributes(new { style = "height: auto; width: 2200px" }) 
           .Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row)) 

           .Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn)) 
           .Selectable(selecting => selecting.Enabled(true))        
           .Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 })) 
           .DataSource(dataSource => dataSource 
           .Ajax() 
           .PageSize(20) 
           .ServerOperation(false) 
           .Events(e => e.Change("call")) 


    )) 


    function call(e) { 

      debugger; 

        var filterlength = e.sender.filter.arguments[0].filters.length; 
        var ds = $("#ViewDataGrid").data("kendoGrid"); 
        $filter = new Array(); 

        for (var i = 0; i < filterlength; i++) { 
         if (e.sender.filter.arguments[0].filters[i].field == "Id") 
          $filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "eq", value: parseInt(e.sender.filter.arguments[0].filters[0].value) }); 
         else 
          $filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "contains", value: e.sender.filter.arguments[0].filters[0].value }); 
        } 

        $("#ViewDataGrid").data("kendoGrid").dataSource._filter = $filter; 
        $("#ViewDataGrid").data("kendoGrid").dataSource.sync();   



      } 

Model.CS

public int Id { get; set; } 

    public string Name { get; set; } 

控制器

public ActionResult Index() 
    { 
     List<GridData> dataList = new List<GridData>(); 
    GridData data1 = new GridData(); 
     data1.Id = 9191919; 
     data1.Name = "XYZ";   
     dataList.Add(data1); 
     return View(dataList);   
    } 

這是字符串工作的罰款。 但它不適用於整數列。

請幫幫我。

Answer 1

您可能需要做的是手動管理Kendo Grid Datasource過濾器。

我已經做我的結束，這是非常容易的，這裏是我的輔助功能，看他們是否幫助你以某種方式：

function addFilter(id, f, op) { 
    var filter = $("#" + id).data("kendoGrid").dataSource._filter; 

    if (!op) { 
     op = "and"; 
    } 

    if (filter == null) { 
     filter = { logic: op, filters: new Array() }; 
    } 

    filter.filters.push(f); 

    $("#" + id).data("kendoGrid").dataSource._filter = filter; 
    return false; 
} 

function updateGrid(id) { 
    console.log("filtering..."); 
    console.log($("#" + id).data("kendoGrid").dataSource._filter); 
    $("#" + id).data("kendoGrid").dataSource.filter($("#" + id).data("kendoGrid").dataSource._filter); 
} 


function removeFilter(tableId, fieldName) { 
    var kendoGrid = $("#" + tableId).data("kendoGrid"); 
    if (kendoGrid == null) { 
     return false; 
    } 
    var filterConfig = kendoGrid.dataSource._filter; 
    if (filterConfig == null) { 
     return false; 
    } 

    var iterate = function (obj) { 
     //var toBeRemoved = new Array(); 
     var newFilters = new Array(); 

     $.each(obj.filters, function (key, filter) { 
      if (filter.hasOwnProperty('filters')) { 
       //Composite filter, recursive call 
       iterate(filter); 
       if (filter.filters.length) { 
        newFilters.push(filter); 
       } 
      } 
      else { 
       if (filter.field != fieldName) { 
        newFilters.push(filter); 
       } 
      } 
     }); 
     obj.filters = newFilters; 
    }; 

    iterate(filterConfig); 

    if (!filterConfig.filters.length) { 
     filterConfig = null; 
    } 

    $("#" + tableId).data("kendoGrid").dataSource._filter = filterConfig; 
    return false; 
} 

Answer 2

相反的：

.Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row)) 

使用嘗試：

.Filterable(i => i 
.Extra(true) 
.Operators(operators => operators 
    .ForString(str => str.Clear() 
    .StartsWith("Starts with") 
    .Contains("Contains") 
    .DoesNotContain("Doesn't Contain") 
    .IsEqualTo("Is equal to") 
    .IsNotEqualTo("Is not equal to") 
    )) 
) 

默認GridFilterMode是Menu。所以你不必把那條線放在那裏，除非你被要求。現在您正在使用Menu和作爲GridFilterMode。通常你只使用一個，除非你由於某種原因被要求這樣做。

以下是您的最終代碼的樣子。您不必使用更改事件，網格將負責過濾。

@(Html.Kendo().Grid(Model).Name("ViewDataGrid") 
          .Columns(columns => 
          { 
           columns.Bound(c => c.Id).Title(" ID").Width(150); 
           columns.Bound(c => c.Name).Title(" Name").Width(150); 

          }) 
          .HtmlAttributes(new { style = "height: auto; width: 2200px" }) 
          .Filterable(i => i 
           .Extra(true) 
           .Operators(operators => operators 
            .ForString(str => str.Clear() 
             .StartsWith("Starts with") 
             .Contains("Contains") 
             .DoesNotContain("Doesn't Contain") 
             .IsEqualTo("Is equal to") 
             .IsNotEqualTo("Is not equal to") 
             )) 
          ) 

          .Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn)) 
          .Selectable(selecting => selecting.Enabled(true))        
          .Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 })) 
          .DataSource(dataSource => dataSource 
          .Ajax() 
          .PageSize(20) 
          .ServerOperation(false) 
          .Events(e => 
          { 
           //e.Change("call"); 
          }) 
)) 

Documentation表格/濾鏡菜單定製