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

Kendo UI MVC Grid and client paging

1 Answer 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gonzalo
Top achievements
Rank 1
Gonzalo asked on 16 Jun 2014, 03:41 PM
Hi,

I have a Kendo MVC Grid with start date and end date filters on the same page:

@(Html.Kendo().Grid<UnileverMetricsSystem.Entities.VisitsByTimeDTO>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.DateFormat).Width(140);
            columns.Bound(c => c.Product).Width(190);
            columns.Bound(c => c.Duration);
            columns.AutoGenerate(false);

        })
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()
        
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)                      
            )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("RefreshTable", "AverageDuration").Data("additionalInfo"))
        )
    )

The initial grid data is binded calling RefreshTable action.
When the user click on a "Show" button I want to filter the grid taking into account the start and end dates.
I do this through an Ajax call to a controller:

$.ajax({
                type: "POST",
                url: controllerName + '/RefreshTable',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({ country: country, startDate: startDate, endDate: endDate, groupedBy: groupedBy, product: product }),
                success: function (results) {
                   
                    $("#grid").kendoGrid({
                        autoBind: false,
                        dataSource: results,
                        pageable: {

                            pageSize: 5,
                            autoBind: false,
                            info: true,
                            refresh: false
                        }
                    });

                    dataSource2.read();
                }
            });

The new data loads correctly in the grid but when i change the page I am paging the data that was initially shown in the grid, not the filtered by dates data.
How can I implement client paging with this configuration?

Thanks in advance.


1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 18 Jun 2014, 03:08 PM
Hello,

The problem will occur with the provided code because a new grid is initialized on the same element without first destroying the old grid. If you wish to replace the grid dataSource with a local one with the new data then you should use the setDataSource method e.g.
var grid = $("#grid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({
    data: results,
    pageSize: 5
});
grid.setDataSource(dataSource);
If the grid options should be changed as well then you should destroy the existing grid before initializing the new one:
var gridElement = $("#grid");
gridElement.data("kendoGrid").destroy();
 
gridElement.kendoGrid({
    autoBind: false,
    dataSource: results,
    pageable: {
        pageSize: 5,
        autoBind: false,
        info: true,
        refresh: false
    }
});


Regards,
Daniel
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
Gonzalo
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or