This is a migrated thread and some comments may be shown as answers.

Persist state issues

21 Answers 558 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 05 Jan 2015, 03:16 PM
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());
}

21 Answers, 1 is accepted

Sort by
0
Bob
Top achievements
Rank 1
answered on 05 Jan 2015, 03:21 PM
Note: I am using the server widgets
0
Bob
Top achievements
Rank 1
answered on 05 Jan 2015, 03:24 PM
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>);
})
0
Accepted
Alexander Popov
Telerik team
answered on 07 Jan 2015, 02:19 PM
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.

 
0
Bob
Top achievements
Rank 1
answered on 07 Jan 2015, 02:49 PM
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>
0
Bob
Top achievements
Rank 1
answered on 11 Mar 2015, 12:10 PM
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?
0
Accepted
Alexander Popov
Telerik team
answered on 13 Mar 2015, 08:41 AM
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.

 
0
Bob
Top achievements
Rank 1
answered on 13 Mar 2015, 01:01 PM
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
0
Accepted
Alexander Popov
Telerik team
answered on 13 Mar 2015, 02:27 PM
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.

 
0
Fillip
Top achievements
Rank 1
answered on 09 Jun 2015, 08:28 PM

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!

0
Tony
Top achievements
Rank 1
answered on 30 Jul 2015, 06:28 PM

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

        }
    }‚Äč

0
Jose M
Top achievements
Rank 1
answered on 12 Nov 2015, 11:19 PM

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.

0
timmy
Top achievements
Rank 1
answered on 21 Jan 2016, 07:30 PM
Thanks Jose M. That's a nice, simple approach and worked great for me.
0
Rubens
Top achievements
Rank 2
answered on 17 Jun 2016, 08:17 PM

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

0
Alexander Popov
Telerik team
answered on 22 Jun 2016, 07:15 AM
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
0
Raj
Top achievements
Rank 1
answered on 22 Dec 2016, 07:05 PM

Hi Jose

I found your solution useful to get Tool bar back on page after set Options. But the button controls in toolbar are not working(not invoking js functions) after we load the page that we persisted(get options).

Did it work in your case?

Thanks

Raj

 

0
Alexander Popov
Telerik team
answered on 23 Dec 2016, 03:08 PM
Hi Raj,

We're not aware of such behavior. Would you please share more details about your setup?

Regards,
Alexander Popov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Raj
Top achievements
Rank 1
answered on 23 Dec 2016, 03:21 PM

After loading state for a grid, Moving to other page and coming back to same page saving shows the loaded state but the custom controls(buttons) in toolbar are not working.

 function EditFacility(e) {
        var grid = $("#FacilityGrid").data("kendoGrid");
       localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());

}

  $(document).ready(function () {

        var grid = $("#FacilityGrid").data("kendoGrid");
        var toolBar = $("#FacilityGrid .k-grid-toolbar").html();
        var options = localStorage["kendo-grid-options"];
        if (options) {
            grid.setOptions(JSON.parse(options));
            $("#FacilityGrid .k-grid-toolbar").html(toolBar);
            $("#FacilityGrid .k-grid-toolbar").addClass("k-grid-top");
            $('#FacilityGrid .k-grid-content').height(400);
        }
    })

 

  .ToolBar(toolbar =>
                {
                    toolbar.Custom().Text("Add New Facility").Action("AddFacility", "Facility");
                    toolbar.Custom().Text("Clear Filters").HtmlAttributes(new { id = "clearAllGridFilters" });
                })

 

 $("#clearAllGridFilters").click(function (e) {
        e.preventDefault();
        $("form.k-filter-menu button[type='reset']").trigger("click");
    });

 

clearallgridfilters js function is not working after i reload the page with saving state for grid.

0
Alexander Popov
Telerik team
answered on 26 Dec 2016, 01:31 PM
Hello Raj,

In this case you might try attaching the click event handler after the Grid's ToolBar gets restored or attaching it to a parent element and filtering the event. For example: 
$("#FacilityGrid").on("click", "#clearAllGridFilters", function() {...});

Regards,
Alexander Popov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Curt Rabon
Top achievements
Rank 1
Veteran
answered on 25 Feb 2017, 07:04 PM

Since the "jQuery" version of Kendo and the MVC Wrappers seem to be mostly in "maintenance mode" only these days, meaning bug fixes but rarely any deep enhancements, I would guess that Telerik will never make this better.  Since Kendo is the one that renders the toolbar template div onto the page, it could easily find this HTML and take care of it, but again, I seriously doubt it will ever get fixed.

Thanks to everyone who posted options.  Thanks to Jose M., because I'm using most of your solution, which works well.

0
Raj
Top achievements
Rank 1
answered on 11 May 2017, 06:17 PM

Hi Alexander

Grid Filter with Drop down List using filterable "UI" is not working when using Grid persist state.

I came to know that grid.setOptions will destroy the grid and recreates grid with old values and hence dropdown is not calling the controller action method to fill the dropdown with data.

But is there an alternative to solve this? that can bring back data to dropdown.

Thanks

Raj

0
Stefan
Telerik team
answered on 15 May 2017, 01:13 PM
Hello Raj,

I can suggest using a flag and on the dataBound event to determine if the event is fired from using the setOptions method.

Then on the dataBound event to manually call the read method of the custom UI DropDown used for filtering.

This will ensure that every time the setOptions method is used, the read action in the controller will be called.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Bob
Top achievements
Rank 1
Answers by
Bob
Top achievements
Rank 1
Alexander Popov
Telerik team
Fillip
Top achievements
Rank 1
Tony
Top achievements
Rank 1
Jose M
Top achievements
Rank 1
timmy
Top achievements
Rank 1
Rubens
Top achievements
Rank 2
Raj
Top achievements
Rank 1
Curt Rabon
Top achievements
Rank 1
Veteran
Stefan
Telerik team
Share this question
or