Persist state issues

15 posts, 3 answers
  1. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 05 Jan 2015 Link to this post

    Hi, after loading state for a grid, the toolbar disappears.  Also, the Scrollable.Height property is no longer recognized and grid auto-sizes.  Basically, I'm trying to save the user's grid state on every dataBound event.  Then on initial load of page, the user's grid state is loaded.  Any ideas?

    function onDataBound(arg)
    {
        var grid = $("#UserAdministrationUserGrid").data("kendoGrid");
     
        if (initialLoad) {
            var options = localStorage["kendo-grid-options"];
            if (options) {
                grid.setOptions(JSON.parse(options));
            }
     
            initialLoad = false;
        }
     
        localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
    }

  2. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 05 Jan 2015 in reply to Bob Link to this post

    Note: I am using the server widgets
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 05 Jan 2015 in reply to Bob Link to this post

    Including toolbar template I have in case that will assist:

    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <button class="k-button k-button-icontext createNewUserButton"><span class="k-icon k-i-plus"></span>Create New User</button>
            <button class="k-button k-button-icontext kendoGridExportCustomButton"><span class="k-icon k-i-excel"></span>Export to Excel</button>
        </text>);
    })
  5. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 07 Jan 2015 Link to this post

    Hi Bob,

    This happens because the Toolbar is rendered on the sever-side, thus it is absent from the Grid's options (see documentation). As a result, it cannot be rendered again when restoring saved options. I would suggest checking the workaround provided in this example:

    Regards,
    Alexander Popov
    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.

     
  6. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 07 Jan 2015 in reply to Alexander Popov Link to this post

    Thanks!  I already went a different route that seems to be working fine.  I've included relevant JavaScript below in case anyone is interested.  In my scenario, I'm auto-saving state whenever grid is databound, then loading state on initial load of page.

    <script type="text/javascript">
        var localStorageKey = "UserAdministrationUserGridOptions";
     
        $(function () {
            // pull client grid state and apply to grid (filters, current page, sorts, etc).
            setGridOptions();
            // toolbar is cleared after pulling grid options, so we must run after grid options are set
            intializeGridToolbars();
        });
     
        function onDataBound(arg)
        {
            var grid = $("#UserAdministrationUserGrid").data("kendoGrid");
            localStorage[localStorageKey] = kendo.stringify(grid.getOptions());
        }
     
        function setGridOptions()
        {
            var options = localStorage[localStorageKey];
     
            if (options) {
                $("#UserAdministrationUserGrid").data("kendoGrid").setOptions(JSON.parse(options));
            }
        }
     
        function intializeGridToolbars()
        {
            var html = '<div class="k-header k-grid-toolbar k-grid-top"><button class="k-button k-button-icontext createNewUserButton"><span class="k-icon k-i-plus"></span>Create New User</button><button class="k-button k-button-icontext kendoGridExportCustomButton"><span class="k-icon k-i-excel"></span>Export to Excel</button><div>';
            $(html).insertBefore("#UserAdministrationUserGrid .k-grid-header");
        }
    </script>
  7. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 11 Mar 2015 Link to this post

    Hi, I'm now having an issue where the header template for a column is not persisted.  Is that a known issue? If so, is there a hack to address?
  8. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 13 Mar 2015 Link to this post

    Hi Bob,

    The header template is also rendered on the server, hence it is not persisted for the same reasons and the same workaround could be used. For example: 
    @helper HeaderTemplate() {
        <span>My Template</span>
    }
    <script type="text/x-kendo-template" id="headerTemplate">   
       @Html.Raw(@HeaderTemplate().ToHtmlString().Replace("#", "\\#").Replace("</scr", "<\\/scr"))
    </script>
     
    @(Html.Kendo().Grid<GridPerserveToolbarServerTemplate.Models.Order>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.OrderID).HeaderTemplate(@<text>@HeaderTemplate()</text>);
    ....
    parsedOptions.columns[0].headerTemplate = $("#headerTemplate").html();


    Regards,
    Alexander Popov
    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.

     
  9. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 13 Mar 2015 in reply to Alexander Popov Link to this post

    Alexander, thanks for reply.  I don't believe it would be safe to go by column index if the grid allows column re-ordering though.  The solution I have at the moment goes on field name
  10. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 13 Mar 2015 Link to this post

    You are absolutely right Bob!

    The code I shared was just a proof of concept - using the field name is a much safer approach.

    Regards,
    Alexander Popov
    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.

     
  11. Fillip
    Fillip avatar
    10 posts
    Member since:
    Nov 2013

    Posted 09 Jun 2015 Link to this post

    For anyone looking for a solution in the future, I have a fiew pieces of advice:

     

    You can get the basics of the toolbar from the `KendoGrid.options.toolbar.command` property. Though, from there, you will be missing hrefs (for some reason). So I then looped through each of those commands, found the element based on the `name` property, got the HTML as a string, and then appended a `template` property to each `command` object. Here's my code:

     

    $Grid.grid.options.toolbar.command.forEach(function(item, idx) {
           var buttonHtml = $('<div>').append($(".k-grid-" + item.name).clone()).html();
           $Grid.grid.options.toolbar.command[idx].template = function() { return buttonHtml; };
    });

     

    Hope it helps!

  12. Tony
    Tony avatar
    7 posts
    Member since:
    Apr 2015

    Posted 30 Jul 2015 in reply to Fillip Link to this post

    I took a simpler approach imho. I abandoned the grid toolbar complete and put a toolbar widget above the grid. the gotcha is when you use the setOptions, the function inserts an empty toolbar even when one did not exist before. I fixed that problem by executing the jquery remove function on the toolbar. Here's my code that I'm using which seems to work find.

        function restoreGridState(Name, grid) {
            var options = localStorage[Name];
            if (options) {
                var parsedOptions = JSON.parse(options);

                grid.setOptions(parsedOptions);

                $(".k-grid-toolbar").remove();

            }
        }​

  13. Jose M
    Jose M avatar
    1 posts
    Member since:
    Oct 2014

    Posted 12 Nov 2015 Link to this post

    Hi,

    I faced the same issue and I found this way to solve it:

                        $("#load").click(function (e) {
                            e.preventDefault();
                            var toolBar = $("#Grid .k-grid-toolbar").html();
                            
                            var options = localStorage["kendo-grid-options"];
                            if (options) {
                                grid.setOptions(JSON.parse(options));
                                $("#Grid .k-grid-toolbar").html(toolBar);
                                $("#Grid .k-grid-toolbar").addClass("k-grid-top");
                            }
                        }); 

    Regards.

  14. timmy
    timmy avatar
    38 posts
    Member since:
    Dec 2006

    Posted 21 Jan in reply to Jose M Link to this post

    Thanks Jose M. That's a nice, simple approach and worked great for me.
  15. RMC
    RMC avatar
    3 posts
    Member since:
    Mar 2011

    Posted 17 Jun Link to this post

    It's unbelievable that so far all we have to fix it, is doing a big workaround. There is no sense to change the whole grid once we just want to set any specific property.

    I'm getting the same trouble and feeling very disappointed that I should follow this EXTRA BIG CODE to prevent this behavior. 

    I'd really like to ensure there is no any other solution to keep grid toolbar intact after setOptions() !?

    Regards,
    Rubens

  16. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 22 Jun Link to this post

    Hi Rubens,

    Indeed, the current implementation does not allow persisting the toolbar, hence the workaround we suggested.

    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready