kendo grid пользовательский фильтр с локальным хранилищем

Я использую версию пользовательского интерфейса Kendo: «2015.1.318», которая настроена для работы с локальным хранилищем, когда потребитель отключается в автономном режиме. Моя проблема заключается в том, что когда я использую пользовательский фильтр на стороне клиента, он всегда запрашивает сервер для получения данных. Как я могу фильтровать с помощью источника данных grid (теперь это локальное хранилище).kendo grid пользовательский фильтр с локальным хранилищем

Это моя Сетка:

@(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

Существует не простой ответ. У вас есть данные в локальном хранилище, но вы по-прежнему сохраняете старый источник данных в своей сетке. Здесь:

.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 grid пользовательский фильтр с локальным хранилищем

ответ

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