2017-06-20 85 views
0

我有一个kendo网格,它填充了一些JSON数据,在网格的过滤器窗口中填充 ,您可以选择一个条件类型,然后填写条件值文本框,然后根据您的选择过滤网格。在kendo中用自己的值填充列的过滤器值

现在我有一列只填充了四个或五个不同的值。 我想要使过滤器部分的条件值字段成为下拉列表,而不是写入这些值来选择它们,我想从列表中选择它们。 (我的意思是在网格列的过滤器部分,而不是列本身。)

我读an article这就像我想要的,但它已经在代码中添加了这些值, 我应该通知你那些字段每次都不相同,所以我无法通过硬编码将这些值写入过滤器。

甚至像this one这样的东西与我想要的非常相似(Filter Condition Created For'City'Field),但它使用不同的来源获取条件下拉值,而不是网格列本身。

另外,我不能使用JSON数据,我必须使用剑道网格中的信息。

在此先感谢。

回答

0

我找到了解决我的最后一个问题......

网格绑定到数据源,由网格的数据源上设置一个循环后,我把网格中的一列的数据并将其推送到数组,然后将该列上的过滤器设置为数组。

<script type="text/javascript"> 

     var arrayName = []; 

     $(function() { 
      var productsDataSource = new kendo.data.DataSource({ 
       transport: { 
        read: { 
         url: "api/products", 
         dataType: "json", 
         contentType: 'application/json; charset=utf-8', 
         type: 'GET' 
        }, 
        parameterMap: function (options) { 
         return kendo.stringify(options); 
        } 
       }, 
       schema: { 
        data: "Data", 
        total: "Total", 
        model: { 
         fields: { 
          "Id": { type: "number" }, 
          "Name": { type: "string" }, 
          "IsAvailable": { type: "boolean" }, 
          "Price": { type: "number" } 
         } 
        } 
       }, 
       error: function (e) { 
        alert(e.errorThrown); 
       }, 
       sort: { field: "Id", dir: "desc" }, 
       serverPaging: true, 
       serverFiltering: true, 
       serverSorting: true 
      }); 

      productsDataSource.read(); 

      $("#report-grid").kendoGrid({ 

       dataSource: productsDataSource, 
       dataBound: 
       function (e) { 
        var data = $("#report-grid").data("kendoGrid").dataSource._data; 
        for (i = 0; i < data.length; i++) { 
         arrayName.push(data[i].Name); 
        } 
       }, 
       autoBind: false, 
       scrollable: false, 
       pageable: true, 
       sortable: true, 
       filterable: { extra: false }, 
       reorderable: true, 
       columnMenu: true, 
       columns: [ 
        { field: "Id", title: "No", width: "130px" }, 
        { field: "Name", title: "ProductName", filterable: { ui: SystemFilter } }, 
        { 
         field: "IsAvailable", title: "Available", 
         template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>' 
        }, 
        { field: "Price", title: "Price", format: "{0:c}" } 
       ] 
      }); 

      function SystemFilter(element) { 
       element.kendoDropDownList({ 
        dataSource: arrayName, 
        optionLabel: "--Select Name--" 
       }) 
      }; 

     }); 
0

我喜欢这样做的一种方法是创建我的值列表并将该列表添加到ViewData,然后将其传递给View。

public IEnumerable<ModelName> GetTypes() 
{ 
    //Get data from the table you store your values in. 
    return dbContext.TypesTable.OrderBy(f => f.Name); 
} 

public ActionResult YourView() 
{ 
    IEnumerable<ModelName> types = GetTypes(); 
    ViewData["MyTypes"] = types; 
    return View(); 
} 

然后在您的网格中添加一个ForeignKey列并将其设置为看你之前设置的ViewData的。

@(Html.Kendo().Grid<ViewModelName>() 
    .Name("GridName") 
    .Columns(columns => 
    { 
     columns.ForeignKey(c => c.RecipientType, (System.Collections.IEnumerable)ViewData["MyTypes"], "TypeId", "Name"); 
    }) 
) 

此列现在将显示您当前记录的值的名称。然后,当您编辑或添加记录时,此字段将显示为包含所有可能值的下拉菜单。

+0

感谢您的回答,但我想添加一列的不同值到列的过滤器部分作为下拉列表,而不是在网格本身。 – eFarzad

+0

我明白你现在要问什么。但是,这段代码仍然会做你想做的。过滤器将使用您在ViewData中提供的项目并显示为下拉菜单。 – Supersnake

+0

好吧,我该如何用网格的一列数据填充ViewData? – eFarzad