Keep Grid state after rebind()

[Pedro]

Hello.

I saw a great example on how to implement dynamic page size on the gridview

<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>
    {
        %>
        var $grid = $('#Grid');

        var pageSize = $('<select id="pageSize"><option>10</option><option>20</option></select>')
                .change(function() {
                    var grid = $grid.data('tGrid');
                    grid.pageSize = parseInt($(this).val());
                    <%--//Keep grid filter,curr page, sorting, grouping ??--%>
                    grid.rebind();
                    <%--//Keep grid filter,curr page, sorting, grouping ??--%>
                })
                .appendTo($grid.find('div.t-pager'));

        var checkbox = $('<input type="checkbox" value="Check me" />')
                        .prependTo($grid.find('th').eq(0));
        <%
    }); %>

Unfortunately the grid doesn't keep his state(sorting, current page, filters, goups) after changing the page size.

I have the exact same problem with my external filter:

<script type="text/javascript">
        function externalFilter() {
            var grid = $('#Grid').data('tGrid');
            //Keep grid filter,curr page, sorting, grouping ??
            grid.rebind({ externalFilter: $('#filterText').val() });
            //Keep grid filter,curr page, sorting, grouping ??
        }
    </script>

    <div>
        Filter <input id="filterText" />
        <img onclick="externalFilter()" src="..." alt="Search"/>
    </div>

Is there a way to keep the grid state after the rebind() ?

Btw, here is the grid:

<% = Html.Telerik().Grid<SCTR_V2.Models.InstituicaoVC>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.instituicaoId).Width(81);
            columns.Add(o => o.nome).Width(200);
            columns.Add(o => o.morada);
        })
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("_Index", "Instituicao", new { externalFilter = "-1"});
        })
        .Pageable()
        .Filterable()
        .Sortable()
%>

Best Regards,

Pedro Máximo


EDIT.
Solved the problem with the help of the client API http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api.html

[Steve]

What did you end up doing on the client that solved your problem?

Thanks --Steve


Edit...
Nevermind I think I see the same thing you did.

[Pedro]

<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>

    {

        %>

        var $grid = $('#Grid');         

        var pageSize = $('<select id="pageSize"><option>10</option><option>20</option></select>')

                .change(function() {

                    var grid = $grid.data('tGrid');

                            //grid.rebind
    grid.specificSearch();

                })

                .appendTo($grid.find('div.t-pager'));

           

        var checkbox = $('<input type="checkbox" value="Check me" />')

                        .prependTo($grid.find('th').eq(0));

        <%       

    }); %>

Just replace grid.rebind() with grid.specificSearch() on the .change event and then it will use your external filter and will keep the paging and internal Filter

Regards,
Pedro

 

[Steve]

ahh that works...I just needed to keep the same sort before rebinding so I just went with grid.sort(grind.orderBy.toString()) which just tells the grid to sort and keep whatever it's sorted by now. So that worked out well for me.

Thanks for such a quick response.

--Steve