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

Persisting user selections in Kendo Grid

8 Answers 632 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vita
Top achievements
Rank 1
Vita asked on 05 Dec 2012, 01:25 AM
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.

8 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 06 Dec 2012, 02:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeroen
Top achievements
Rank 1
answered on 18 Jan 2013, 11:41 AM
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>



0
Petur Subev
Telerik team
answered on 21 Jan 2013, 06:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Masoud
Top achievements
Rank 1
answered on 18 May 2013, 07:24 PM
0
Brad Reed
Top achievements
Rank 1
answered on 23 May 2013, 07:47 PM
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?
0
Petur Subev
Telerik team
answered on 27 May 2013, 08:04 AM
Hello Vita,

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

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brad Reed
Top achievements
Rank 1
answered on 28 May 2013, 03:05 PM
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?

0
Petur Subev
Telerik team
answered on 30 May 2013, 07:40 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Vita
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Jeroen
Top achievements
Rank 1
Masoud
Top achievements
Rank 1
Brad Reed
Top achievements
Rank 1
Share this question
or