Kendo datasource change read url on request start - kendo-ui

I am currently doing this to change the read url dynamically on my kendo datasource. The datasource is used for a kendoautocomplete text box and for each key typed the list of suggestions are fetched through a get request.
requestStart: function (e) {
var text = $('#txtMail').val();
e.sender.transport.options.read.url = "/Feed/AutoCompleteUser?text=" + text + "&limit=10";
}
This works fine the first time , but consequent request's are exactly same as the first request it never hits this piece of code. What am i missing?
Please advice.

You can just add a data parameter for your read request, like so, in this case, as the request is sent as a get, it will append the query with the fields inside your data object.
By adding the function like this, it will get called every time you make a request.
function getRequestParameters() {
return {
text: $('#txtMail').val(),
limit: 10
};
}
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
data: getRequestParameters,
dataType: "jsonp"
}
}
});
You can find more about configuring the datasource operations here:

Related

JSGrid unable to perform search

Is there anything we must write externally to perform search on a column. from demos i understand that no code is written , please help me out.
I have filtering:true, so that i have search boxes on each col , when i enter text and hit on enter button of keyboard or search icon nothing happens but it calls a REST-ful service which i have written to get data for grid
Following is my code
controller : {
loadData : function(filter) {
var d = $.Deferred();
$.ajax({
url : "myurl",
dataType : "json",
type : 'POST',
}).done(function(response) {
// client-side filtering
$.grep(response, function(project) {
return project.Name === filter.Name;
});
d.resolve({
data : response.project
});
});
return d.promise();
},
},
The first problem is $.grep doesn't change the source array, it returns the result of filtering.
Also be sure about data in response, since you filter the response while resolving deferred with response.project. Apply grep to the array of items.
Another thing is ensure the format of returning data, if pageLoading is false, the deferred should be resolved with the array of items (not { data: [items] }).
So depending on #2 and #3 the fixed code could be:
.done(function(response) {
var result = $.grep(response, function(project) {
return project.Name === filter.Name;
});
d.resolve(result);
});
Hope this will help.

Kendo UI Grid binded to OData: how to get the request URL?

I have a Kendo Grid binded to a remote OData endpoint.
How can I capture the request URL sent to the remote endpoint in one of the javascript events, like the DataSource's onRequestStart ?
this gives me the filter/sort objects
var filter = this.filter();
var sort = this.sort();
But I want the actual URL, like
http://..serviceroot/table1?$filter=....
The easiest way is via beforeSend:
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
beforeSend: function(e, request) {
console.log(request.url);
}
}
}

How to get Single result on kendo.data.Datasource

I have an Odata result like this
{"odata.metadata":"https://localhost/DocTalkMobileWebApiOData/odata/$metadata#MasterPatient/#Element","PatUniqueId":"39e713db-6a0e-4e59-bf7b-033f4fc47ad5", "PatID":null,
"pat_lname":"White","pat_fname":"Peter","pat_mi":" ","pat_ssn":"270787655","pat_dob":"08/07/1973","pat_sex":"M","pat_status":null,"priInsID":2,"secInsID":1,"PCPID":1,"InternalDrID":1,"EXPID":1,"EXPDate":"","pat_phone":null,"isNew":true,"imported":true,"byWhom":"dt","lastUpdate":"2011-03-30T09:41:57.36","changeStamp":"AAAAAAAAIUE=","address":"","city":"","state":"","zip":"","currentMcp":"","currentVisitCount":-2,"otherId":"543674","pcpName":null,"hasChanges":true,"ProgramSource":null,"mrnID":"","createdBy":null,"createdDate":"2007-10-26T10:16:15","expLocation":null,"ethnicId":1,"prefLanguageId":1,"raceId":1
}
and i tried to get this result via kendo.ui.datasource:
newPatient = new kendo.data.DataSource({
type: 'odata', // <-- Include OData style params on query string.
transport: {
read: {
url: url + '/MasterPatient(guid\'00000000-0000-0000-0000-000000000000\')', // <-- Get data from here
dataType: "json" // <-- The default was "jsonp"
},
parameterMap: function (options, type) {
var paramMap = kendo.data.transports.odata.parameterMap(options);
delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
},
schema: {
data: function (data) {
return data;
},
total: function (data) {
return data['odata.count']
},
}
});
newPatient.fetch(function () {
kendo.bind($('#newPatientTab'), newPatient);
});
But not sure why it always throw error :
Uncaught TypeError: Object [object global] has no method 'slice'
Please help me. Thanks
In Kendo UI, DataSource works only with arrays. If you can change the server response to send something like this
[{"odata.metadata":"https://localhost/DocTalkMobileWebApiOData/odata/$metadata#MasterPatient/#Element","PatUniqueId":"39e713db-6a0e-4e59-bf7b-033f4fc47ad5","PatID":null,"pat_lname":"White","pat_fname":"Peter","pat_mi":" ","pat_ssn":"270787655","pat_dob":"08/07/1973","pat_sex":"M","pat_status":null,"priInsID":2,"secInsID":1,"PCPID":1,"InternalDrID":1,"EXPID":1,"EXPDate":"","pat_phone":null,"isNew":true,"imported":true,"byWhom":"dt","lastUpdate":"2011-03-30T09:41:57.36","changeStamp":"AAAAAAAAIUE=","address":"","city":"","state":"","zip":"","currentMcp":"","currentVisitCount":-2,"otherId":"543674","pcpName":null,"hasChanges":true,"ProgramSource":null,"mrnID":"","createdBy":null,"createdDate":"2007-10-26T10:16:15","expLocation":null,"ethnicId":1,"prefLanguageId":1,"raceId":1}]
then it will work fine.
N.B. It's in array format.
OR
You can wrap the single object into array on the client side, inside data function of the schema.
schema: {
data: function(server-response) {
return [server-response];
}
}
The Kendo team should put more time on good Documentation.
That means you are not using an odata source from the backed. You need to think about here do you really need a kendo odata source from the client in this case if your back-end not supported odata correcly.
See this response from odata url, http://services.odata.org/Northwind/Northwind.svc/?$format=json
It should return an array of object in the value field.
If you can't change the backed what you can do is to format the data in the Schema.data function
schema: {
data: function (data) {
return [data];
},

What is the advantage to use kendo.data.Model with dataSource in Kendo UI?

I'm new in kendo UI and I don't fully understand what is the primary goal and advantage of using kendo.data.Model within dataSource.
Not really sure if I understand your question. But the datasource is a good way to abstract your interaction with for example twitter:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: "http://search.twitter.com/search.json",
// JSONP is required for cross-domain AJAX
dataType: "jsonp",
// additional parameters sent to the remote service
data: {
q: "html5"
}
}
},
// describe the result format
schema: {
// the data which the data source will be bound to is in the "results" field
data: "results"
}
});

Kendo UI Grid, restful URL and paging

I have a web service from which I get text which is parsed into JSON using $parseJSON from jquery.
A client can get data from the web service by doing loading http://myserver/myfunction/{pagenumber}/{pagesize}
This will return an object
{
total: <some int> //A number indicating the total number of records
rowsForPage: [......] //An array with just the rows for the requested page
}
How can I use this endpoint as a datasource for a Kendo UI grid which will pass the page number and page size for the selected page.
For the life of me I cannot figure this out, but I would think this should be relatively simple.
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
schema: {
data: function(data) {
return data.rowsForPage;
},
total: function(data) {
return data.total;
}
},
transport: {
read: "http://myserver/myfunction"
}
}
);
As far as the url goes you have to parse out the url parameters skip and take to identify which records you should be passing back. If your page size is 100 and your page is 3 then it should pass
skip=200&take=100

Resources