如何保存 Kendo MVC Grid 的列顺序
Posted
技术标签:
【中文标题】如何保存 Kendo MVC Grid 的列顺序【英文标题】：How to save Column Order of Kendo MVC Grid 【发布时间】：2016-02-02 01:15:54 【问题描述】：我有一些包含 15 个字段的网格，我想使用 Kendo 列规范轻松显示和隐藏这些字段，但我想保存该屏幕，就像我将用 2 个 scrrenshot 解释一样
在这张图片中我想隐藏“UserPicture”列，我点击了它，我可以隐藏它
当我点击第一个按钮时，我想通过这个屏幕保存这个网格列顺序...
这是我的网格代码
@( html.Kendo().Grid<Models.webuser>()
.Name("grdUserCreation")
.DataSource(d => d.Ajax().Read("GridUserCreationBinding", "UserCreation").Model(keys => keys.Id(k => k.Web_UserId)))
.HtmlAttributes("width: 100%;cellpadding:0;")
.Columns(columns => columns.LoadSettings(columnSettings))
.Events(events => events.Change("ongrdRowSelected").DataBound("onDataBoundusercre"))
.Selectable()
.Scrollable(scrolling => scrolling.Height(500))
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.Contains("Contains")
))
)
.Groupable(grouping => grouping.Enabled(true))
.Resizable(config =>
config.Columns(true);
)
.Reorderable(config =>
config.Columns(true);
)
.ColumnMenu()
)
这是我设置列设置的控制器部分...
var columnSettings = new List<Kendo.Mvc.UI.GridColumnSettings>();
columnSettings = new List<Kendo.Mvc.UI.GridColumnSettings>()
new Kendo.Mvc.UI.GridColumnSettings
Member = "Web_UserId",
ClientTemplate="<input type='checkbox' value='#= Web_UserId #' />",
Width="70px",
IncludeInMenu=false,
Filterable=false
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Fleet_Id",
Width="auto",
Hidden=true,
IncludeInMenu=false
,
new Kendo.Mvc.UI.GridColumnSettings
Member="CariKod",
Width="150px",
Visible=false
,
new Kendo.Mvc.UI.GridColumnSettings
Member="UserPicture",
ClientTemplate="#=Picture(UserPicture)#",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Username",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Name",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Surname",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "FleetDesc",
Width="150px",
Visible= true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "MailAddress",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Mobilephone1",
Width="150px",
Hidden = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Mobilephone2",
Width="150px",
Hidden = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Phone",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Role_Id",
Hidden=true,
IncludeInMenu=false,
Width="150px"
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Status_ID",
Width="150px",
Hidden = false
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "AlertSms",
Width="150px",
Hidden = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "AlertMail",
Width="150px",
Hidden = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Loc_ID",
Hidden=true,
IncludeInMenu=false,
Width="150px"
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Dep_ID",
Hidden=true,
IncludeInMenu=false,
Width="150px"
,
new Kendo.Mvc.UI.GridColumnSettings
Member = "Carplate_Id",
Hidden=true,
IncludeInMenu=false,
Width="150px"
,
new Kendo.Mvc.UI.GridColumnSettings
Member="RoleDesc",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member="InvitationDate",
Width="150px",
Visible = true,
ClientTemplate = "#= kendo.toString(InvitationDate, 'dd.MM.yyyy hh:mm:ss tt') #"
,
new Kendo.Mvc.UI.GridColumnSettings
Member="ActivationDate",
Width="150px",
Visible = true,
ClientTemplate = "#= kendo.toString(ActivationDate, 'dd.MM.yyyy hh:mm:ss tt') #"
,
new Kendo.Mvc.UI.GridColumnSettings
Member="LocName",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member="DepName",
Width="150px",
Visible = true
,
new Kendo.Mvc.UI.GridColumnSettings
Member="VehName",
Width="150px",
Visible = true
;
我该怎么做？ 你知道有什么方法可以保存列顺序吗？
谢谢！
【问题讨论】：
有没有看持久化状态演示：demos.telerik.com/kendo-ui/grid/persist-state @ezanker 是的，我看过，但我无法使用它，因为当我定义 getOptions() 或 setOptions() 返回时，我的剑道网格返回未定义，没有类似的函数？所以无法解决 有什么解决办法吗？？ 【参考方案1】：您可以使用 getOptions() 获取当前网格配置并将其保存到服务器然后像这样加载
var localStorageKey = "UserAdministrationUserGridOptions";
function onDataBound(arg)
var grid = $("#UserAdministrationUserGrid").data("kendoGrid");
localStorage[localStorageKey] = kendo.stringify(grid.getOptions());
$(function ()
// pull client grid state and apply to grid (filters, current page, sorts, etc).
);
function setGridOptions()
var options = localStorage[localStorageKey];
if (options)
$("#UserAdministrationUserGrid").data("kendoGrid").setOptions(JSON.parse(options));
【讨论】：
这也节省了一些额外的东西，比如排序和过滤。以上是关于如何保存 Kendo MVC Grid 的列顺序的主要内容，如果未能解决你的问题，请参考以下文章
如何更改 kendo ui grid mvc 中的默认过滤器运算符
Telerik Kendo UI ASP.NET MVC Grid - 已保存数据项的事件处理