Kendo grid filtering in server side

Hello,

I don’t know if this is the right place to post this question, sorry if not.

I’m trying to implement server side filtering using kendo grid for angularjs.

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",

validation: { required: true, duplicate: function (input)

{ if (input.is("[name='Name']") && input.val() != "")

{ var name = input.val();

var grid = $scope.mainGridOptions;

var data = grid.dataSource.data();

console.log(data);

var dataItem = input.get(0).kendoBindingTarget.source;

//debugger;

var name_edit = dataItem.Name;

console.log("The old name is " + name_edit + " and the new one is " + name)

var valid = true;

for (var i = 0; i < data.length; i++)

{ console.log(name + " & In " + i + " is :" + data[i].Name);

if ((name == data[i].Name) && (name != name_edit) && data[i].id)

{ valid = false; input.attr("data-duplicate-msg", "Name should be unique");

break; } }

return valid; }

else return true; } } },

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: 'eq', value: 'AA' }] }, // Not working I got SCRIPT438: SCRIPT438: Object doesn't support property or method 'call' SCRIPT438: 

serverFiltering: true,

filterable: { mode: "row" },

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

In Controller I have:

[HttpPost]publicDataSourceResultPostFilter(Models.DataSourceRequest request){var employees = db.Users;return employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);}

I have this model:

publicclassDataSourceRequest{publicintTake{get;set;}publicintSkip{get;set;}publicIEnumerable\<Kendo.DynamicLinq.Sort\>Sort{get;set;}publicKendo.DynamicLinq.FilterFilter{get;set;}}

I don’t know how to connect these together,

I didn’t find a clear explanation how to perform server side filtering !

Could you please show me how to do it? How ca I send filtered data to controller?

or provide with a project or a sample?

Note: I don’t have a licence to use DataSourceRequest.

Thank you

The Telerik forum might be a good place to post your question. Seems to be fairly active.

2 Likes