Save Grid State in database, missing element

[Regis]

Hi there, 

I am currently working on Kendo Grid. I have implemented with model binding from database. 
I have 3 windows. To add a row, to see the details, and to change the concern row. 

So far everything works.

Now if the logged user wants to change his grid, I allowed him to record its changes / customization on the grid.  
Again everything works fine. I record the grid's statements in my database.
To do this I Took example on this project :
http://www.telerik.com/support/code-library/save-grid-state-in-session-on-server-side

The problem is that when I load my save states, my add button disappears (Custom Toolbar), and none of my windows opens (edit, detail, this 2 buttons are Custom Command)

Do you have an idea for how to save the states of these elements? 

Thank you in advance, 


Ps : This is the javascript code I use to saved grid's states : 

<button id="save">Save state</button>

$("#save").click(function () {
    var grid = $("#Table").data("kendoGrid");

    var dataSource = grid.dataSource;

    var state = {
        columns: grid.columns,
        page: dataSource.page(),
        pageSize: dataSource.pageSize(),
        sort: dataSource.sort(),
        filter: dataSource.filter(),
        group: dataSource.group(),
    };

    $.ajax({
        url: "/Base/Save",
        data: {
            data: JSON.stringify(state)
        }
    });
});

I have a project to show you but it's between 8 and 9 MB when compressed.

Best regards.

[Regis]

Here is the sample project if someone need.

Best regards.

[Regis]

sorry for multi-post ... 

[Dimo]

Hi Regis,

Since the Grid is destroyed and recreated when the "Load" button is clicked, you need to define all Grid settings and not just the one that you have saved. Please follow the syntax guidelines, which are provided in the Grid's client configuration documentation:

http://docs.telerik.com/kendo-ui/api/web/grid

Regards,
Dimo
Telerik

 

 

[Regis]

Hi Dimo,

Thanks for your answer. I wanted to know if is it not possible to save my custom options with the rest of my options?

Something like that : 

$("#save").click(function () {
    var grid = $("#Table").data("kendoGrid");

    var dataSource = grid.dataSource;

    var state = {
        columns: grid.columns,
        command: grid.command, //Here to save custom command
        toolbar: grid.toolbar,            //Here to save custom toolbar
        page: dataSource.page(),
        pageSize: dataSource.pageSize(),
        sort: dataSource.sort(),
        filter: dataSource.filter(),
        group: dataSource.group(),
    };

    $.ajax({
        url: "/Base/Save",
        data: {
            data: JSON.stringify(state),
            id: 1,
            name: "Customer Grid"
        }
    });
});

$("#load").click(function () {
    var grid = $("#Table").data("kendoGrid");

    var dataSource = grid.dataSource;

    $.ajax({
        url: "/Base/Load",
        data: {
            id: 1,
            name: "Customer Grid"
        },
        success: function (state) {
            state = JSON.parse(state);

            var options = grid.options;

            options.columns = state.columns;
            options.command = state.command;   //And here to load custom command
            options.toolbar = state.toolbar;              //Then here to load custom toolbar
            options.dataSource.page = state.page;
            options.dataSource.pageSize = state.pageSize;
            options.dataSource.sort = state.sort;
            options.dataSource.filter = state.filter;
            options.dataSource.group = state.group;

            grid.destroy();

            $("#Table")
               .empty()
               .kendoGrid(options);
        }
    });
});

Here is my grid : 

@(Html.Kendo().Grid<Data.Models.Customer>()
                    .Name("Table")
                    .ToolBar(toolBar => toolBar.Custom()
                            .Text(Resources.Add)
                            .HtmlAttributes(new { id = "CreateCustomer" })
                            .Url("#")
                    )
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.CustomerID).Title(Resources.HeaderGridCustomerID);
                        columns.Bound(c => c.LastName).Title(Resources.HeaderGridCustomerLastname);
                        columns.Bound(c => c.FirstName).Title(Resources.HeaderGridCustomerFirstname);
                        columns.Bound(c => c.Address).Title(Resources.HeaderGridCustomerAddress);
                        columns.Command(command => command.Custom(Resources.Detail).Click("CustomerDetail"));
                        columns.Command(command => command.Custom(Resources.Edit).Click("EditCustomer").HtmlAttributes(new { id = "EditCustomer" }));
                        columns.Command(command => command.Destroy().Text(Resources.Delete));
                    })
                    .HtmlAttributes(new { style = "max-height:500px;" })
                    .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
                    .Groupable()
                    .Filterable()
                    .Reorderable(r => r.Columns(true))
                    .Sortable()
                    .ColumnMenu()
                    .Resizable(r => r.Columns(true))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .ServerOperation(true)
                        .Model(model => model.Id(p => p.CustomerID))
                        .Read(read => read.Action("CustomerList", "Customer"))
                        .Destroy("DeleteCustomer", "Customer")
                    )
        )

With your answer I found this :  { command: "edit" }, and same thing for custom toolbar. 
But if possible I want to save my custom option with the other option. 

If I can't can you show me how to recreate this custom option (toolbar and command)
I am not understanding how to deal with the method I use.

Thanks a lot,

Best regards.

[Dimo]

Hi Regis,

Generally, all Grid options are accessible via:

$("#GridID").data("kendoGrid").options

However, if you will be recreating the Grid with its default settings together with the user's custom settings, maybe it will be smarter and easier to switch to client-side-only initialization - you don't need the server one, which will create a Grid instance that you will destroy later. In addition, I don't think you need to save and load settings, which the user cannot change - you can simply hard-code them in the client declaration.

The previously provided documentation page shows how to configure all the Grid features client-side. Furthermore, you can also see how the server configuration is serialized and rendered as a client-side initialization script and use this information for easier client-side initialization.

Regards,
Dimo
Telerik

 

[Regis]

Hi Dimo, 

Thanks for your answer and sorry for the duplicate support ticket. 
I understant what you mean. It's a good idea, I was just thinking that it was impossible to do this like that.

I need to keep my wrappers. But If I can initialize some element with client side I'll do this.

I'll try as soon as possible. If I managed to do what I want I will share with you.

Thanks a lot.

Best regards.  

[Fernando]

Could you provide an example of how to save commands and toolbar and then load them again?
Thanks in advance

[Dimo]

Hello Fernando,

As I tried to explain in my previous reply, the command and toolbar settings cannot be changed by the end user. From this point of view, there is no need to save and load them. You can hard-code these settings in the Javascript code and use them when creating the Grid client-side. The Grid client-size API and demos will help you with the correct syntax. Let me know if you stumble upon anything.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

http://demos.telerik.com/kendo-ui/grid/editing

http://demos.telerik.com/kendo-ui/grid/toolbar-template

In case you are using the MVC wrapper of the Kendo UI Grid, keep in mind that the toolbar is rendered as HTML. The toolbar settings are not serialized as part of the auto-generated Grid initialization script. This means that you can't copy-paste these settings and need to implement them using the resources above. This is something I did not clarify in my previous post.

Regards,
Dimo
Telerik