如何保存Kendo MVC網格的列順序

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));
    }
}