2013-08-30 30 views
0

我网格是:如何使用本地HTML5存储保存在剑道格之格的喜好

@(Html.Kendo().Grid<Stuff>() 
.Name("Grid") 
    .DataSource(source => source.Ajax().Events(events=>events.Error("onError")) 
    .Events(events=>events.RequestEnd("onRequestEnd")) 
    .Model(model => 
     { 
      model.Field(p => p.PurchaseQuantity).Editable(false); 
      model.Field(p => p.PurchasePrice).Editable(false); 
     }) 
    .Read("GetData", "Data")) 
.Columns(columns => 
    { 
     columns.Bound(o => o.PurchaseQuantity).Width(100); 
     columns.Bound(o => o.PurchasePrice).Format("{0:C}").Width(100); 

    }) 
.Sortable() 
.Pageable(page=> page.PageSizes(new int[] { 10, 20, 50, 100 }).Refresh(true)) 
.Filterable(filterable => filterable.Extra(false)) 
.Events(boo=>boo.DataBound("onTest")) 
.HtmlAttributes(new { style = "width:850px" }) 

,并用来加载数据的JavaScript是:

<script type="text/javascript"> 
var storage = window.localStorage; 
var storageLoaded = false; 

function onError() { 
    $("#Grid").data("kendoGrid").dataSource.cancelChanges(); 
} 
function onTest() { 
    if (!storageLoaded) { 
     console.log('loading size from storage ' + storage.pageSize); 
     storageLoaded = true; 
     console.log('marked storage loaded'); 
     $("#Grid").data("kendoGrid").dataSource.pageSize(storage.PageSize); 
     console.log('set pagesize from storage ' + storage.pageSize); 
     var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize(); 
     console.log('page size is ' + pagesize); 
    } 
} 

function onRequestEnd(e) { 
    if (storageLoaded) { 
     var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize(); 
     storage.pageSize = pagesize; 
     console.log('setting size to storage ' + storage.pageSize); 
    } 
} 


萤火虫控制台显示:从存储50 /标记存储

装载尺寸加载/套的页面大小从存储50 /页面大小为10个

问题: 为什么页面大小不保存设置后? 有没有更好的方法来完成这个? 有没有办法连接到pagesize选择器而不是使用requestEnd?

回答

0

找到了解决办法。使电网.AutoBind(false)

然后

$(document).ready(function() { 
    storageLoaded = true; 
    $("#Grid").data("kendoGrid").dataSource._pageSize = storage.pageSize; 
    $("#Grid").data("kendoGrid").dataSource.read(); 
}); 

现在这个正在使用的_这可能会破坏在未来的任何一点,但现在它的工作的数据源中的变量。

我完全删除了数据绑定事件,Telerik的一位朋友对我进入解决方案非常有帮助。

希望在将来会有这样的:

.Pageable(page=> page.PageSizes(true).Refresh(true).Sticky("gridPageSizeDefault")

将使用gridPageSizeDefaultkey值存储在HTML5本地存储。