Store and restore grid layout

6 posts, 0 answers
  1. Jill-Connie Lorentsen
    Jill-Connie Lorentsen avatar
    118 posts
    Member since:
    Nov 2008

    Posted 02 Mar Link to this post

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

  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 04 Mar Link to this post

    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
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jill-Connie Lorentsen
    Jill-Connie Lorentsen avatar
    118 posts
    Member since:
    Nov 2008

    Posted 04 Mar in reply to Radoslav Link to this post

    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

  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 07 Mar Link to this post

    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
    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
  6. Jill-Connie Lorentsen
    Jill-Connie Lorentsen avatar
    118 posts
    Member since:
    Nov 2008

    Posted 07 Mar in reply to Radoslav Link to this post

    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>

     

     

  7. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 09 Mar Link to this post

    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
    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