Question

我有一些有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
                        }

                    };

我怎么能这样做？你知道如何保存列顺序吗？

谢谢！

Answer 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的列顺序

1 个答案: