I am very new to telerik and angular. Literall my 4th week using these controlls and i need help. I created a telerik grid and connected to a datsource generated by a service. I am able to get the data into to the grid, but the filter/sort does not function. I have inserted my code below.
<====================== html page begin =======================>
<div id="recentclaimsgrid" kendo-grid k-data-source="recentclaims" k-selectable="'row'" k-pageable='{ "refresh": true, "pageSizes": true }'
k-columns='[
{ field: "url", filterable: { multi: true, search: true }, title: "" },
{ field: "status", filterable: { multi: true, search: true }, title: "Status" },
{ field: "settled", filterable: { multi: true, search: true }, title: "Settled" },
{ field: "name", filterable: { multi: true, search: true }, title: "Name" },
{ field: "dateofloss", filterable: { multi: true, search: true }, title: "Data Of Loss" },
{ field: "claimnumber", filterable: { multi: true, search: true }, title: "Claim Number" },
{ field: "policynumber", filterable: { multi: true, search: true }, title: "Policy Number" },
{ field: "sequencenumber", filterable: { multi: true, search: true }, title: "Sequence Number" },
{ field: "lineofbusiness", filterable: { multi: true, search: true }, title: "Line Of Business" },
{ field: "currentworkqueue", filterable: { multi: true, search: true }, title: "Current Workqueue" },
{ field: "numberofdays", filterable: { multi: true, search: true }, title: "Number of Days" },
{ field: "liabilitydecision", filterable: { multi: true, search: true }, title: "Liability Decision" }
]'>
</div>
<====================== html page end=======================>
<====================== angular controller page begin =======================>
function loadfullrecentclaims() {
caseopenService.loadfullrecentclaims(function(response) {
$scope.recentclaims = new kendo.data.DataSource({
data: response,
schema: {
model: {
fields: {
url: { type: "string" },
status: { type: "string" },
settled: { type: "string" },
name: { type: "string" },
dateofloss: { type: "string" },
claimnumber: { type: "string" },
policynumber: { type: "string" },
sequencenumber: { type: "string" },
lineofbusiness: { type: "string" },
currentworkqueue: { type: "string" },
numberofdays: { type: "string" },
iabilitydecision: { type: "string" },
}
}
},
pageSize: 5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
}, function(error) {
messageService.Error(error, true);
});
};
<====================== angular controller page begin=======================>
function loadfullrecentclaims(callSuccess, callError) {
helperService.httpget('caseopen/LoadFullRecentClaims', callSuccess, callError);
}
<====================== angular service page end=======================>
1 Answer, 1 is accepted
In order to perform server-side data operations, the DataSource needs to be bound to a remote data service:
http://docs.telerik.com/kendo-ui/framework/datasource/overview#to-remote-service
You can also check out the following online Grid/AngularJS demo:
http://demos.telerik.com/kendo-ui/grid/angular
... in which both the main, and details Grid are configured for remote binding, and server-side data operations.
I hope this helps.
Regards,
Dimiter Topalov
Telerik by Progress