Click here to Skip to main content
14,698,679 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to implement server side filtering using kendo grid for angularjs.
I'm not sure how to do it.

My code in Angularjs:
$scope.DS = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Employees",
dataType: "json",
contentType: "application/json",
type: "GET" },
update: {
url: "/api/Employees/PUT",
dataType: "json",
contentType: "application/json",
type: "PUT" },
destroy:
 { url: "/api/Employees/DELETE",
  dataType: "json",
  contentType: "application/json",
   type: "DELETE" },
  create: { url: "/api/Employees/POST",
  dataType: "json",
  contentType: "application/json",
  type: "POST" },
  parameterMap: function (options, operation)
  { if (operation !== "read") {
  console.log(JSON.stringify(options.models));
  return JSON.stringify(options.models); } } }, 
  batch: true,
  pageSize: 5,
 schema: {
  model: {
 id: "Id",
 data: 'Data',
 total: 'Total',
 errors: 'Errors',
 fields: {
 Id: { editable: false, nullable: false, type: "number" },
 Email: { editable: true }, 
 UserName: { editable: true, type: "string"},
 FirstName: { editable: true, validation: { required: true } },
 LastName: { editable: true, validation: { required: true } },

  Age: { editable: true, validation: { required: true } },

  Phone: { editable: true, validation: { required: true } } } } } });

  $scope.mainGridOptions = { dataSource: $scope.DS,

  /*dataBound: function Autocolumnwidth(e) { var grid = e.sender; for (var 
   i = 0; i < grid.columns.length; i++) { grid.autoFitColumn(i); } },*/

  toolbar: ["create"],

 columns: [ { field: "Id", hidden: true },

{ field: "Email", title: "Email", width: "100px" },

{ field: "UserName", title: "User Name", width: "100px" },

 { field: "FirstName", title: "First Name", width: "100px" },

 { field: "LastName", title: "Last Name", width: "100px" },

 { field: "Phone", title: "Phone", width: "100px" },

 { field: "Age", title: "Age", width: "100px" },

 {command: [{ name: "edit", text: { edit: "Edit", update: "Save", cancel: "Cancel" } },"destroy"], title: "Actions", width: "150px" } ],

  pageable: {

  refresh: true,

 input: true,

   numeric: false,

  pageSizes: [5,10, 20, 30, 50, 75, 100, 500, 1000] },

  sortable: true,

 resizable: true, 

navigatable: true,

serverPaging: true,

serverSorting: true,

serverFiltering: true,

 editable: { mode: "inline" },

 filter: {filters:

  [{ field: 'FirstName', operator: 'Contains', value: 'AA' }] }, // Not working I got SCRIPT438: SCRIPT438: Object doesn't support property or method 'call'

 serverFiltering: true,

 filterable: { mode: "row" },

 noRecords: { template: "No results available." } };


What I have tried:

I don't know how to handle it from server side, but I have this code in controller:
public DataSourceResult Filter(Models.DataSourceRequest request)
{

    var employees = db.Users.OrderBy(o => o.Id);
    var i = employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
    var data = i.Data; // This is contain filtered data
    request.Take = i.Total;
    request.Skip = 0;
    return employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
}



This is the model:
 public class DataSourceRequest
{
    public int Take { get; set; }
    public int Skip { get; set; }
    public IEnumerable<Kendo.DynamicLinq.Sort> Sort { get; set; }
    public Kendo.DynamicLinq.Filter Filter { get; set; }
} 
Posted
Updated 27-Apr-19 2:52am
v3

1 solution

I assume the datasourcerequest contains these things, and you just need to read the manual, and put them on the URL?

In 2019, being able to google is a vital skill for any dev

Data-Binding Directives - Grid - Kendo UI for Angular[^]
   
v2
Comments
Member 12919448 25-Apr-19 1:16am
   
I want to send it to the server as object, Kendo grid has its text field to filter data, I want to read this text and send it back to server and do the filtering and return the result
Christian Graus 25-Apr-19 1:54am
   
So read the documentation....
Member 12919448 25-Apr-19 1:58am
   
They have the payment solution, anyway thank you for your answer
Christian Graus 25-Apr-19 2:01am
   
I linked to the doco....

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900