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

Filter in Kendo grid with JSON using AngularJS

1 Answer 367 Views
Grid
This is a migrated thread and some comments may be shown as answers.
anand
Top achievements
Rank 1
anand asked on 10 Aug 2015, 10:38 AM

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

Sort by
0
Alexander Valchev
Telerik team
answered on 12 Aug 2015, 07:25 AM
Hello Anand,
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
 
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 Valchev
Telerik team
Share this question
or