2017-06-20 90 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