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

Implement Infinite Scrolling in Kendo Grid using Angularjs

1 Answer 221 Views
Grid
This is a migrated thread and some comments may be shown as answers.
anand
Top achievements
Rank 1
anand asked on 11 Aug 2015, 12:13 PM

I have a kendo grid populated dynamically using AngularJS. I am using web api for populating in my grid locally.
I want to implement infinite scroll in kendo grid using angularjs. There will be remote data service call actually.
Appreciate if someone finds time to guide me how to achieve infinite scrolling in kendo grid using angularjs for remote data service call.
My code for reference is as below:
---dataApp.js---------------
var app = angular.module("app", ["kendo.directives"]);
app.controller("dataController", function ($scope) {
var uri = '';
$scope.LoadLib = function () {
uri = 'api/libs'; //remote service
loadGrid();
}
$scope.LoadProd = function () {
uri = 'api/products'; //remote service
loadGrid();
}
function loadGrid() {
$scope.dataTableSource = new kendo.data.DataSource({
type: "json",
transport: {
read: uri
},

serverPaging: true,
serverFiltering: true
});
$scope.dataTableGridOptions = {
dataSource: $scope.dataTableSource,

height: 550,

pageable: true,
 scrollable: true ,

endlessScroll : true
}
}
});
---index.html----------------------------------------------------------------------------------
<!DOCTYPE html>
< html xmlns="http://www.w3.org/1999/xhtml ">
< head>
< title></title>
< link href="styles/kendo.common.min.css" rel="stylesheet" />
< link href="styles/kendo.default.min.css" rel="stylesheet" />
< script src="js/jquery.min.js"></script>
< script src="js/angular.min.js"></script>
< script src="js/dataApp.js" type="text/javascript"></script>
< script src="js/kendo.all.min.js"></script>
< /head>
< body>
< div>
< div ng-app="app" data-ng-controller="dataController">
< button id="loadLib" class="btn btn-primary" type="button" data-ng-click="LoadLib()">Get Lib</button>
< button id="loadProd" class="btn btn-primary" type="button" data-ng-click="LoadProd()">Get Products</button>
< div kendo-grid="dataTableGrid" k-options="dataTableGridOptions" k-rebind="dataTableGridOptions"></div>
< /div>
< /div>
< /body>
---model------
public class lib
    {
public string Name { get; set; }
public string Path { get; set; }
public string DateUpdated { get; set; }
}
--- web api controller----
public class libsController : ApiController
{
        lib[] libs = new lib[]
{
new lib{ Name = "Book1", Path="Path1", DateUpdated=System.DateTime.Now.ToString() },
new lib{ Name = "Book2", Path="Path2", DateUpdated=System.DateTime.Now.ToString() }            
                           
        };
public IEnumerable<lib> GetAllLibs()
{
return libs;
}
}
------------model-----------------
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}
-------web api controller--------
public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
public IEnumerable<Product> GetAllProducts()
{
return products;
}
}
----------------WebApiConfig.cs-----------------------
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
//To produce JSON format add this line of code
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
}
}

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 13 Aug 2015, 07:04 AM
Hello Anand,

I would recommend checking the Virtual Scrolling examples and documentation.

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