Store and restore grid layout

[Jill-Connie Lorentsen]

I would like to persist the layout of my grid. I save the layout when it changes, - the problem is when to restore it. If I try calling restoreGridLayout in document.ready() the grid hasn't been initialized yet. If I do it in the onNotesGridDataBound-event the data disappears. I've tried calling grid.dataSource.read() manually on a buttonClick after the onNotesGridDataBound-event, which reloads the data, but if I do it in the event in question I end up in an infinite loop reading data.

 

Any ideas?

 

<script>

  function OnNotesGridLayoutChange(e) {        
        var grid = $("#notesGrid").data("kendoGrid");
        var gridStoreName = getGridStoreName("notesGrid");
        var name = gridStoreName + "-grid-options";
        localStorage[name] = kendo.stringify(grid.getOptions());
    }

 

    function OnNotesGridDataBound(e) {
        var gridStoreName = getGridStoreName("notesGrid");
        var grid = $("#notesGrid").data("kendoGrid");

        restoreGridLayout(grid, gridStoreName);

    }

    function restoreGridLayout(grid, gridStoreName) {
        var name = gridStoreName + "-grid-options";
        var options = localStorage[name];
        if (options) {
            grid.setOptions(JSON.parse(options));
        }    
    }

</script>

 

@(Html.Kendo().Grid<WebClient.Models.NoteViewModel>()
        .Name("notesGrid")
        .AutoBind(false)
        .HtmlAttributes(new { style = "height: 1000px;" })
        .Filterable()
        .Scrollable(s => s.Enabled(true))
        .Resizable(r => r.Columns(true))
        .Groupable()
        .Sortable()
        .ColumnMenu()
        .Pageable(pageable => pageable
            .PageSizes(new int[] { 2, 30, 100, 200 })
            .ButtonCount(5)
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("SearchForNotes", "Search"))
            .PageSize(20)
            .ServerOperation(false)
        )
        .Events(e => e.ColumnHide("OnNotesGridLayoutChange")
                      .ColumnResize("OnNotesGridLayoutChange")
                      .ColumnShow("OnNotesGridLayoutChange")
                      .ColumnReorder("OnNotesGridLayoutChange")
                       //.DataBinding("onNotesGridDataBinding")
                       .DataBound("OnNotesGridDataBound")
                       .Change("OnNotesGridLayoutChange")
                       .DataBound("OnNotesGridDataBound")
                       )


       .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
        )

[Radoslav]

Hi,

The desired functionality can be achieved by restoring the grid layout on the document ready function. I am sending you a simple example which shows that on $(document).ready the grid is initialized. Please check it out and let me know what differs in your case.

Looking forward for your reply.

Regards,
Radoslav
Telerik

[Jill-Connie Lorentsen]

Thank you for taking your time.

I am afraid my problem still exists. I've looked closely at your example, but in my case the line alert(grid); in the document.ready function gives 'undefined'.

I forgot to say that my grid is in a partial view, - does that make a difference?

 

Regards, Jill-Connie

[Radoslav]

Hi,

Even when the grid is in partial view is it available on the $(document).ready function. I updated my example to show that.
The described issue can be caused by javascript error which stops the scripts execution and initialization of the grid. Can you please check if any error are thrown in the browser console?

Looking forward for your reply.

Regards,
Radoslav
Telerik

[Jill-Connie Lorentsen]

If I in my action method return View("_Grid") there are no errors in the console.

If I return PartialView("_Grid") I get an error saying "Uncaught ReferenceError:jQuery is not defined" on the anonymous function jQuery(function(){jQuery("#notesGrid").kendoGrid({"columnHide":OnNotesGridLayoutChange, ... })

To me the bundleConfig looks correct, as well as the _Layout view.

 

 

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-migrate-{version}.js"
                    ));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate-vsdoc.js",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.min.js",
                    "~/Scripts/jquery.validate.unobtrusive.js",
                    "~/Scripts/jquery.validate.unobtrusive.min.js",
                    "~/Scripts/jquery.validate.unobtrusive.bootstrap.min.js",
                    "~/Scripts/jquery.unobtrusive-ajax.js",
                    "~/Scripts/jquery.unobtrusive-ajax.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
               "~/Scripts/kendo/2015.1.429/kendo.all.min.js",
               // "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
               "~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js"));

}

 

And the top of _Layout

 

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/kendo/2015.1.429/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/kendo")
    @Scripts.Render("~/bundles/ias")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/fancybox")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="@Url.Content("~/Scripts/kendo/2015.1.429/jszip.min.js")"></script>
</head>

 

 

[Radoslav]

Hello,

The described behavior is expected when you return partial view from the controller. In this case only a fragment of the code placed in the partial view is rendered, no HTML, BODY, HEAD tags, and no references to the scripts. On the following link you can find more info:
http://stackoverflow.com/questions/2662285/whats-the-difference-between-return-view-and-return-partialview

In your case you can try loading an empty view with added partial view into it like in the example which I sent you:

@{ Html.RenderPartial("_Grid"); }

I hope this helps.

Regards,
Radoslav
Telerik