Persisting user selections in Kendo Grid

[Vita]

Hi I have seen a similar post however I would like some clarification.
Desi: we have MVC.NET application which binds grid to model via Ajax binding.  When user submits the data and we refresh the page, we have a requirement to keep the user original selections (sorting, filtering, etc.).  You already posted that you do not support scenario like this "out of the box".  However I would like to know whether there is a way (some js method or control id or anything at all that would allow me to get to those selections before the page submitted via JavaScript.
Thanks.

[Petur Subev]

Hello Vita,

We have created a code library project which shows how with the help of the Grid client API, its dataSource object and a jQuery cookie plugin you can save and restore all the settings of a Grid including row selection.

http://www.kendoui.com/code-library/web/grid/preserve-grid-state-in-a-cookie.aspx

Kind regards,
Petur Subev
the Telerik team

[Jeroen]

Hi,

this works great however we have some timing problems when databinding is used with AJAX.
It looks like the data is not present in the grid yet when the load action is called.

could you help us when we need to trigger the saving and loading of the configuration ?

<%= Html.Kendo()
            .Grid<.HistoryViewModel>()                   
            .Name("Grid")
            
   
            .Columns(columns =>        
            {
                columns.Bound(o => o.Applicatie).Width(100);
                columns.Bound(o => o.username).Width(100);
            
            })        
            .Groupable()
            .Resizable(resizing => resizing.Columns(true))
            .Sortable()   
            .Filterable()
            .Events(e => e.Change("onRowSelected")
                    .DataBound("onDataBound")

                    .Change("onChange"))
            .DataSource(datasource => datasource
                .Ajax()
                .Read(read => read.Action("_History", "Admin")))

            .Scrollable(scrolling => scrolling.Height(500))
            
           %>

           
    </div>
</div>

     <script type="text/javascript">
         load();
     </script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">

 

    function load() {

        var grid = $(".k-grid").data("kendoGrid");     
        var state = JSON.parse($.cookie("employeesState1"));
        if (state) {
            if (state.filter) {
                parseFilterDates(state.filter, grid.dataSource.options.schema.model.fields);
            }
            grid.dataSource.query(state);
        }
        else {
            grid.dataSource.read();
        }
    }

 

    function onChange() {
        var grid = this;
        var ids = grid.select().map(function () {
            return grid.dataItem($(this)).Id
        }).toArray();
        $.cookie('empRows1', JSON.stringify(ids));
    }

    function parseFilterDates(filter, fields) {
        if (filter.filters) {
            for (var i = 0; i < filter.filters.length; i++) {
                parseFilterDates(filter.filters[i], fields);
            }
        }
        else {
            if (fields[filter.field].type == "date") {
                filter.value = kendo.parseDate(filter.value);
            }
        }
    }

    function onDataBound() {
        var grid = this;
        var dataSource = this.dataSource;

        var state = kendo.stringify({
            page: dataSource.page(),
            pageSize: dataSource.pageSize(),
            sort: dataSource.sort(),
            group: dataSource.group(),
            filter: dataSource.filter()
        });

        $.cookie("employeesState1", state);
        if ($.cookie('empRows1')) {
            $.each(JSON.parse($.cookie('empRows1')), function () {
                var item = dataSource.get(this);
                var row = grid.tbody.find('[data-uid=' + item.uid + ']');
                row.addClass('k-state-selected');
            })
        }

    }

</script>

[Petur Subev]

Hello Vita,

I noticed that you have not disabled the AutoBind property of the Grid. Rest of the logic which should be executed when the DOM ready event is triggered.
If you still experience any difficulties explain in more details and do not hesitate to send us a project to see what exactly is the issue.

Kind regards,
Petur Subev
the Telerik team

[Masoud]

I moved my question to a new thread (http://www.kendoui.com/forums/mvc/grid/persist-column-selection-in-cookie.aspx).

[Brad Reed]

I've tried the solution, adapting it for the MVC framework, and I'm getting an infinte loop trying to load the grid.  The main difference I see between my code and that in the example is that my datasource is 'Server' based, not Ajax.

Has anyone seen this issue with the MVC framework?

[Petur Subev]

Hello Vita,

I am afraid that the solution from the code library is only applicable to Ajax bound Grids.

Kind Regards,
Petur Subev
Telerik

[Brad Reed]

Thanks Petur,

I was afraid of that.

Is there a way to programatically set the grid's page with a 'Server' datasource AND using the MVC framework?

[Petur Subev]

Hello Brad,

I am afraid it is not possible with ServerBinding - because the Grid does not expose such option and also you cannot modify the QueryString parameters (the collection is read only).

Regards,
Petur Subev
Telerik