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

Pagination not working in GRID after calling the READ event

1 Answer 365 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RAJEEV
Top achievements
Rank 1
RAJEEV asked on 17 Jul 2013, 02:03 AM
Hi,

We are using the Kendo UI build 2013.1.319. We are implementing a ASP.NET MVC Application using Razor as the templating engine. We've a simple page with a Search Criteria interface and the Grid displayed on the Right side. When the page loads initially, all features of the grid seem to be working fine. But when the user clicks on the Search button on the screen, we reload the grid using AJAX.  The dataset in the grid is refreshed by making a call to a method in the Controller Class which returns data. The read method of the grid is invoked to trigger this process as shown in many of your examples. When this happens pagination is reflected incorrectly. It displays "0" pages and "No Results Found" for the result count when the data set in the grid contains lot of data. Features like Sorting, Pagination etc are handled on the client side for this component. Please let us know if we are doing something incorrectly in this case.

Code is attached in the following files. Appreciate if you can provide a quick input on this issue. We tried to search the cases in the forums but were unable to resolve this particular issue.

Thanks

Girish

View
--------
            @(Html.Kendo().Grid(Model)
                            .Name("grid")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.Products)
                                           .Width(100);
                                columns.Bound(p => p.DocumentCode)
                                            .Groupable(false)
                                            .Width(80);
                                columns.Bound(p => p.Title)
                                            .Groupable(false)
                                            .Width(150);
                                columns.Bound(p => p.Description)
                                            .Groupable(false)                                    
                                            .Width(200);
                                columns.Bound(p => p.Categories)
                                            .Title("Category - Topic")
                                            .Width(250);
                                columns.Bound(p => p.ObjectId)
                                            .Title("")
                                            .Filterable(false)
                                            .Groupable(false)
                                            .Width(150)
                                            .ClientTemplate("#= documentDetails(data) #");
                            })
                            .Groupable()
                            .Sortable(sortable => sortable
                                    .AllowUnsort(true)
                                    .SortMode(GridSortMode.MultipleColumn))
                            .Scrollable()
                            .Filterable()
                            .Pageable()
                            .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .ServerOperation(false)
                                    .PageSize(50)
                                    .Events(events => events.Error("onError"))
                                    .Read(read => read.Action("SearchResultsRead", "Search")) 
                            )    
                        )
            <script>
                function onError(e, status) {
                    alert("error raised");
                }

                function documentDetails(searchResult) {
                    var action = '@Url.Action("DocumentDetails", "Search")';
                    
                    var links = "<a href='#' class='tablectrl_small bDefault tipS' title='View Properties Test Title' onclick='viewProperties(\"{1}\")'><span class='iconb'> <img src='@Url.Content("/Images/icons/usual/icon-list.png")' alt='View Properties' /></span></a>";
                    var html = kendo.format(links,
                        action,
                        searchResult.ObjectId
                    );
                    
                    return html;
                }
            </script>

@section scripts
            {
    <script>
            $(document).on({
                click: function () {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.read();
                    
                }
            }, "#btnSearch");
</script>


Controller Class

 public class SearchController : BaseController
    {

        public ActionResult Index(string id)
        {
            ViewBag.PageName = "Search";
            return View(SearchData());
        }

        public List<SearchResultsViewModel> SearchData()
        {
            SearchService searchService = new SearchService();
            List<SearchResultsViewModel> searchResults = searchService.PerformSearch(30);
            return searchResults;
        }

        public ActionResult SearchResultsRead()
        {
            SearchService searchService = new SearchService();
            List<SearchResultsViewModel> searchResults = searchService.PerformSearch(75);
            var searchResultsJson = Json(searchResults);
            return Json(searchResultsJson, JsonRequestBehavior.AllowGet);

        }
    }

1 Answer, 1 is accepted

Sort by
0
Accepted
RAJEEV
Top achievements
Rank 1
answered on 17 Jul 2013, 01:34 PM
Adding the DataSourceRequest to the Controller Action Method and using .ToDataSourceResult has fixed the pagination issue.
Tags
Grid
Asked by
RAJEEV
Top achievements
Rank 1
Answers by
RAJEEV
Top achievements
Rank 1
Share this question
or