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"));
}
}