How to save Column Order of Kendo MVC Grid

Question

I have some grids with 15 fields and i want to show and hide this fields easily with Kendo column specisfication but i want to save that screen like i will explain with 2 scrrenshot

In this picture i want to hide "UserPicture" column, i clicked that and i can hide that

With this screen when i click first button i want to save this grid column order...

Here is my grid codes

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

This is my controller part where i set the column settings...

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
                        }

                    };

How can i do this?? Do you know any way to do this save Column Order??

Thanks!

Answer 1

You can use the getOptions() to get the current grid configuration and save it to the server then load like so

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