kendo網格自定義過濾器與本地存儲

我使用的是Kendo UI版本：「2015.1.318」，當消費者切換離線時，設置爲與本地存儲一起使用。我的問題是，當我使用客戶端自定義過濾器，它總是要求服務器來獲取數據。我如何過濾網格的數據源（現在是本地存儲）。kendo網格自定義過濾器與本地存儲

這是我的網格：

@(Html.Kendo().Grid<InventoryModel>() 
    .Name("InventoryIndexGrid") 
    .HtmlAttributes(new { @class = "grid", key = "InventoryItemGrid", @style = "height:auto !important" }) 
    .Columns(columns => 
    { 
     columns.Bound(o => o.ItemDateStr).Title("Inventory Date").HtmlAttributes(new 
     { @style = "text-align: center" }).HeaderHtmlAttributes(new { @style = "text-align: center" }) 
    .ClientTemplate("<a onclick=\"onSelectDate('#=ItemDateStr#\','#=UserNameDisp#','#=TenantID#')\" class='' >#=ItemDateStr#</a>"); 
columns.Bound(p =>p.InventoryType).Title("Type").Sortable(false).Filterable(false).Width("8%").HtmlAttributes(new { @style = "text-align: center" }).HeaderHtmlAttributes(new { 
@style = "text-align: center" }); 
    columns.Bound(p => p.UserName).Title("Created By").Sortable(false).Filterable(false).Width("82%").HtmlAttributes(new { @style = "text-align: left" }).HeaderHtmlAttributes(new { @style = "text-align: center"  }); 
    columns.Bound(p => p.UserNameDisp).Hidden(true); 
    }) 
    .ToolBar(toolbar => toolbar.Custom() 
    .Text("") 
    .HtmlAttributes(new { @Title = "Create new Inventory", id = "btnAddNew", @class = "btn btn-default btn-crm btn-crm-action fa fa-plus-square-o", @style = "padding-top:10px;height:34px; width:40px" })) 
    .AutoBind(true) 
    .Reorderable(p => p.Columns(true)) 
    .Resizable(p => p.Columns(true)) 
    .Pageable(pageable => pageable.Refresh(true)) 
    .DataSource(dataSource => dataSource.Ajax().PageSize(1000).Model(model => model.Id(p => p.ItemID)) 
    .Create(update => update.Action("Save", "MealPeriod")) 
    .Read(read => 
    { 
     read.Action("GetIndex", "Inventory", new { type = "food" }); 
     read.Data("InventoryIndexGridAdditionalData"); 
    })).Events(c => c.DataBound("onDataBoundInventoryIndexGrid")) 
    )

這也是我如何使用自定義過濾器：

var gridInventory = $("#InventoryLocationGrid").data("kendoGrid"); 
var keyLocalStorage = 'offline_data_inventory_' + $('#TenantID').val() + '_'  + type + '_' + $('#ItemDate').val(); 
var tempDataInventory = setaJs.getLocalStorage(keyLocalStorage); 
if (tempDataInventory) { 
    var dataSourceInventory = tempDataInventory; 
    gridInventory.dataSource.data(dataSourceInventory); 

    var filter = new Array(), 
     keyword = $('#Keyword').val(), 
     category = $("#ChooseCategory").val(); 
    if (keyword) { 
     filter.push({ field: "ItemName", operator: "contains", value: keyword }); 
    } 

    gridInventory.dataSource.filter(filter); 
}

請幫幫忙！

來源

2016-01-05 dungdn

你要當用戶訪問頁面下一次已經預過濾電網？如果是這樣，您可以使用[filter]（http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration#filter）事件，因爲您已經使用localstorage。但是我不確定我是否正確理解你的問題？ – Ademar

我想使用自定義過濾器來搜索該網格中的數據。網格數據現在從本地存儲中加載。非常感謝 – dungdn

有沒有簡單的answear。您的數據存儲在本地存儲中，但您仍將舊的dataSource保存在您的網格中。在這裏：

.Read(read => 
    { 
     read.Action("GetIndex", "Inventory", new { type = "food" }); 
     read.Data("InventoryIndexGridAdditionalData"); 
    })

你特林從Inventory/GetIndex獲取數據，但你有它已經在你的js本地存儲，所以我認爲它使第一的位置相同數據的兩個請求。

我建議重寫你的網格，JavaScript和從存儲這樣的使用數據：

var keyLocalStorage = 'offline_data_inventory_' + $('#TenantID').val() + '_'  + type + '_' + $('#ItemDate').val(); 
var tempDataInventory = setaJs.getLocalStorage(keyLocalStorage); 

$("#InventoryIndexGrid ").kendoGrid({ 
    dataSource: { 
     data: tempDataInventory, 
     ... 
    }, 
    ... 
});

否則，你將有很多的過濾和其它數據業務醜陋的JavaScript代碼結束，你將有問題在將來改變/添加任何東西。

這裏是例如，本地數據網格在JS：http://demos.telerik.com/kendo-ui/grid/local-data-binding

來源

2016-01-06 11:44:20

kendo網格自定義過濾器與本地存儲

回答

相關問題