I have a kendo grid populated dynamically using AngularJS. I am using web api for populating in my grid.
I want to perform filter on each of the columns, filter is getting displayed in browser but it is not working.
Appreciate if someone finds time to guide me how to achieve filtering in all columns (dynamically irrespective of column data type) in case of my code.
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';
loadGrid();
}
$scope.LoadProd = function () {
uri = 'api/products';
loadGrid();
}
function loadGrid() {
$scope.dataTableSource = new kendo.data.DataSource({
type: "json",
transport: {
read: uri
},
serverFiltering: true
});
$scope.dataTableGridOptions = {
dataSource: $scope.dataTableSource,
filterable: {
mode: "row"
}
}
}
});
---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
I noticed that you have enabled dataSource serverFiltering but the WebAPI controller that you provided does not implement filtration.
If you want to use serverFiltering, the data must be filtered on the server. In case you want to use client side filtering you should set serverFiltering to false.
Regards,
Alexander Valchev
Telerik