[Solved] Save/Load grid state

[Cezary]

Hi,

I prepared solution for save Kendo grid state into database and load it. I have problem, because if I click Load state everything was loading correctly but toolbar with standard create command disappear. Please help I don't know what I'm doing wrong.

This is code for save/load state:

function save_state() {
        var grid = $("#Projects").data("kendoGrid");

        var dataSource = grid.dataSource;

        var state = {
            columns: grid.columns,
            toolbar: grid.options.toolbar,

            page: dataSource.page(),
            pageSize: dataSource.pageSize(),
            sort: dataSource.sort(),
            filter: dataSource.filter(),
            group: dataSource.group()
        };

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

    function load_state() {
        var grid = $("#Projects").data("kendoGrid");

        var dataSource = grid.dataSource;

        $.ajax({
            url: "/Projects/Load",
            success: function (state) {

                var loaded_state = JSON.parse(state);

                var options = grid.options;

                options.columns = loaded_state.columns;

                options.dataSource.page = loaded_state.page;
                options.dataSource.pageSize = loaded_state.pageSize;
                options.dataSource.sort = loaded_state.sort;
                options.dataSource.filter = loaded_state.filter;
                options.dataSource.group = loaded_state.group;

                grid.destroy();

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

There is Kendo Grid definition code:

@(Html.Kendo().Grid<issueTracker.Model.Project>()
    .Name("Projects")
    .Pageable()
    .Columns(col => 
        {
            col.Bound(p => p.ProjectID).Hidden(true);
            col.Bound(p => p.ProjectName);
            col.Bound(p => p.Description);
            col.Bound(p => p.ImagePath);
            col.Command(comm => { comm.Edit(); comm.Destroy(); });
        })
    .ToolBar(t => t.Create())
    .Sortable()
    .Filterable()
    .ColumnMenu()
    .Editable(edit => edit.Mode(GridEditMode.InLine))
    .DataSource(dt => dt
        .Ajax()
        .Read(r => r.Action("GetData", "Projects"))
        .PageSize(20)
        .ServerOperation(false)
        .Events(e => e.Error("error_handler"))
        .Update(u => u.Action("UpdateProject", "Projects"))
        .Destroy(u => u.Action("DeleteProject", "Projects"))
        .Create(u => u.Action("CreateProject","Projects"))
        .Model(m => m.Id(p => p.ProjectID)))

)

[Daniel]

Hi,

You can use the following approach to preserve the toolbar:

success: function (state) {
    var loaded_state = JSON.parse(state);
    var toolbar = $("#Projects").find(".k-toolbar").html();
    var options = grid.options;

    options.columns = loaded_state.columns;

    options.dataSource.page = loaded_state.page;
    options.dataSource.pageSize = loaded_state.pageSize;
    options.dataSource.sort = loaded_state.sort;
    options.dataSource.filter = loaded_state.filter;
    options.dataSource.group = loaded_state.group;

    grid.destroy();

    $("#Projects")
    .empty()
    .kendoGrid(options)
    .find(".k-toolbar").html(toolbar);
}

The MVC wrapper renders the toolbar on the server and so it will not be restored from the options.

Regards,
Daniel
Telerik

 

 

[Cezary]

Thanks for help. Everything work's perfect.