2015-04-02 2 views
1

У меня есть сетка Кендо, что я хочу использовать настраиваемый фильтр только при его первом загрузке. Я вытаскиваю из удаленного источника данных, поэтому я думал, что привяжусь к событию dataBinding, манипулирую источником данных, чтобы добавить фильтр, и отправить его обратно на своем пути.Инъекционный фильтр в источник данных перед удаленным вызовом источника данных

Я мог ошибаться в этом, но я понимаю, что dataBinding - это событие, которое запускает чтение pre-datasource, поэтому я хочу добавить туда свой фильтр.

[Update # 1:]
Я использую ASP.NET MVC обертку кендо производить это, но я хочу сделать фильтрацию с помощью Javascript, потому что, как я получаю мой myCustomGridFilters массив. У меня есть класс расширения сетки JS, который я создал, который содержит дополнительные функции сетки. Это уже создалось для всех моих гридов, поэтому я не хотел бы вручную встраивать каждую сетку в оболочку MVC и добавлять фильтры.

Для справки, вот мой DataSource строитель в моем коде ASP.NET MVC:

// remainder of Kendo Grid wrapper 
.DataSource(dataSource => dataSource 
    .Ajax() 
    .PageSize(ViewUtilities.GetDefaultGridSettings().DefaultPageSize) 
    .Read(read => read.Action("ListThreatsOverview", "Threats")) 
    .ServerOperation(true) 
    .Sort(sort => sort.Add("ActiveInDevices").Descending()) 
    .Model(model => 
    { 
     model.Id(u => u.Id); 
     model.Field(u => u.FileHashId).Editable(false); 
     model.Field(u => u.CommonName).Editable(false); 
     model.Field(u => u.ActiveInDevices).Editable(false); 
     model.Field(u => u.BlockedInDevices).Editable(false); 
     model.Field(u => u.SuspiciousInDevices).Editable(false); 
    }) 
) 

Я создал JSFiddle подражать мой сценарий. Я знаю, что это не точная копия моего кода, но это точная копия моей ситуации:

Вот мой метод applyCustomFilter() JS Я подаю на dataBinding события:

function applyCustomFilter (dataSource) { 
    // find custom filters 
    var customFilters = myCustomGridFilters.length ? myCustomGridFilters : []; 

    // if no custom filters, return 
    if (customFilters.length === 0) return; 

    // apply custom filter 
    // get currently applied filters from the Grid. 
    var currFilterObj = dataSource.filter(); 

    // get current set of filters, which is supposed to be array. 
    // if the oject we obtained above is null/undefined, set this to an empty array 
    var currentFilters = currFilterObj ? currFilterObj.filters : []; 

    // loop over custom filters 
    for (var i = 0; i < customFilters.length; i++) { 
     var filterField = customFilters[i].field; 
     var filterValue = customFilters[i].value; 
     var filterOperator = customFilters[i].operator; 

     // iterate over current filters array. if a filter for "filterField" is already 
     // defined, remove it from the array 
     // once an entry is removed, we stop looking at the rest of the array. 
     if (currentFilters && currentFilters.length > 0) { 
      for (var i = 0; i < currentFilters.length; i++) { 
       if (currentFilters[i].field == filterField) { 
        currentFilters.splice(i, 1); 
        break; 
       } 
      } 
     } 

     currentFilters.push({ field: filterField, operator: filterOperator, value: filterValue }); 
    } 

    // apply filters 
    dataSource.filter({ 
     logic: "and", 
     filters: currentFilters 
    }); 

    // remove custom filters 
    myCustomGridFilters.length = 0; 
} 

Мои рабочий пример JSFiddle: http://jsfiddle.net/fmpeyton/crhLvq44/

У меня это работает, но я замечаю, что моя сетка загружает данные дважды; один раз изначально и второй для фильтрации данных. Это, очевидно, не идеально.

В конечном счете, моя цель - отфильтровать мою сетку при ее первой загрузке, не создавая отдельный источник данных, считываемый из моего удаленного источника, только для фильтрации. Как я могу это достичь? Есть ли еще одно событие, на которое я должен подписаться?

ответ

2

Просто добавьте фильтр к источнику данных. JSFiddle заблокирован здесь, к сожалению, так что вы не видите свой код.

Кендо UI

var dataSource = new kendo.data.DataSource({ 
    data: [ 
     { name: "Tea", category: "Beverages" }, 
     { name: "Coffee", category: "Beverages" }, 
     { name: "Ham", category: "Food" } 
    ], 
    filter: { 
     // leave data items which are "Food" or "Tea" 
     logic: "or", 
     filters: [ 
      { field: "category", operator: "eq", value: "Food" }, 
      { field: "name", operator: "eq", value: "Tea" } 
     ] 
    } 
}); 

Кендо MVC

@(Html.Kendo().Grid<MyModel>() 
    .Name("Grid") 
    .Columns(columns => 
    { 
     columns.Bound(c => c.Type); 
     columns.Bound(c => c.Count); 
     columns.Bound(c => c.Date); 
    }) 
    .Filterable() 
    .Pageable(pageable => pageable 
     .PageSizes(true) 
     .ButtonCount(10)) 
    .DataSource(ds => ds 
     .Ajax() 
     .Read(r => r.Action("GetGridData", "Home", new { code = 'code' })) 
     .PageSize(25) 
     .Filter(f => f.Add(a => a.Type).Contains("something")) 
    ) 
) 
+0

Я использую рэпера MVC. Поэтому я не имею прямого доступа к источникам данных. Прошу прощения, что мой пример немного вводит в заблуждение. –

+0

Вы не определяете свой источник данных в коде MVC? Можете ли вы разместить исходный код сетки, пожалуйста? – Nicholas

+0

Я определяю источник данных в своем MVC-коде. Но я хочу сделать это исключительно в Javascript, потому что у меня есть класс JS, который расширяет функциональность сетки, и эта дополнительная функциональность лучше всего подойдет. Я обновлю свой вопрос с помощью этого кода. –

Смежные вопросы