Save Grid State in database, missing element

9 posts, 0 answers
  1. Regis
    Regis avatar
    8 posts
    Member since:
    May 2014

    Posted 03 Jul 2014 Link to this post

    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.




  2. Regis
    Regis avatar
    8 posts
    Member since:
    May 2014

    Posted 03 Jul 2014 Link to this post

    Here is the sample project if someone need.

    Best regards.
  3. Regis
    Regis avatar
    8 posts
    Member since:
    May 2014

    Posted 03 Jul 2014 in reply to Regis Link to this post

    sorry for multi-post ... 
  4. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 07 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Regis
    Regis avatar
    8 posts
    Member since:
    May 2014

    Posted 08 Jul 2014 Link to this post

    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.




  6. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 08 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  7. Regis
    Regis avatar
    8 posts
    Member since:
    May 2014

    Posted 08 Jul 2014 in reply to Dimo Link to this post

    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.  






  8. Fernando
    Fernando avatar
    25 posts
    Member since:
    Nov 2011

    Posted 23 Oct 2014 in reply to Regis Link to this post

    Could you provide an example of how to save commands and toolbar and then load them again?
    Thanks in advance
  9. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 24 Oct 2014 Link to this post

    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

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top