Kendoui DataSource odata $expand not working - kendo-ui

I have a mobile listview bound to kendoui datasource pointing to an odata service. I have a $expand hint in the datasource config to expand "Patient" property of "Claim" object, but looking the url of the odata query, the kendoui datasource is not generating the $expand code in the querystring. How can I get the kendoui datasource to generate correct $expand instruction on the querystring?
OData query string genereated: http://localhost:1839/OData.svc/Claim?$callback=jQuery20207924230222124606_1374374358450&%24inlinecount=allpages&%24format=json&%24top=10
<script>
$(function () {
var app = new kendo.mobile.Application(document.body, {
transition: 'slide'
});
OData.defaultHttpClient.enableJsonpCallback = true;
var data = new kendo.data.DataSource({
type: "odata", // specifies data protocol
pageSize: 10, // limits result set
transport: {
read: "http://localhost:1839/OData.svc/Claim",
dataType: "json",
data: {
$expand: "Patient"
}
},
schema: {
model: {id: "Id"},
data: function (data) {
return data.d.results;
},
total: function (data) {
return data.d.__count;
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$("#lst").kendoMobileListView(
{
template: "<strong>${data.ClaimNumber}</strong><br/>",
filterable: {
field: "ClaimNumber",
operator: "contains"
},
dataSource: data
});
});
</script>

The data and $expand belong inside the read object. You were getting close in your answer.
var dataSource = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
// See http://www.odata.org/documentation/odata-v2-documentation/uri-conventions/ for OData URI conventions
// OData: ~/api/Users?$inlinecount=allpages&top=2
// OData: ~/api/Users?$inlinecount=allpages - includes odata.count
// OData: inline filtering: ~/api/Users?$filter=USERNAME eq 'asgro'
// to include hierarchical data, use the OData /api/UserGroups?$expand=USER
// To reduce the payload sice, the query ~/api/UserGroups will only include the USERGROUP entities, and not any navigation property content
url: "/api/UserGroups",
data: {
$expand: "USERS"
},
dataType: "json" // the default result type is JSONP, but WebAPI does not support JSONP
},

I added this right in the transport/read/url, rather than a separate data:
var dataSource = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
// See http://www.odata.org/documentation/odata-v2-documentation/uri-conventions/ for OData URI conventions
// OData: ~/api/Users?$inlinecount=allpages&top=2
// OData: ~/api/Users?$inlinecount=allpages - includes odata.count
// OData: inline filtering: ~/api/Users?$filter=USERNAME eq 'asgro'
// to include hierarchical data, use the OData /api/UserGroups?$expand=USER
// To reduce the payload sice, the query ~/api/UserGroups will only include the USERGROUP entities, and not any navigation property content
url: "/api/UserGroups?$expand=USERS",
dataType: "json" // the default result type is JSONP, but WebAPI does not support JSONP
},
.
.
.

read: {
url: "http://localhost:1839/OData.svc/Claim",
dataType: "json",
data: {
$expand: "Patient"
}
}
The data only read options.

Related

Kendo DropDownList Not Binding Data

I am using a Kendo dropdownlist to display data made from a remote service call.
First, here is the definition in the HTML template:
<select
kendo-drop-down-list
k-options="dropdownOptions"
k-ng-delay="dropdownOptions">
</select>
Next, here is the code to populate the dropdown from an AngularJS controller:
var myUrl = '(url of REST service)';
$scope.dropdownOptions = {
dataSource: {
transport: {
read: {
url: myUrl,
dataType: 'json',
type: 'POST',
contentType: "application/json;charset=ISO-8859-1"
},
parameterMap: function (data, type) {
const req = {
"PARAMS": $scope.params
};
return JSON.stringify(req);
}
}
},
dataTextField: 'DESCRIPTION',
dataValueField: 'VALUE',
schema: {
type: "json",
data: "resultData",
model: {
id: "VALUE",
fields: {
"VALUE":{field: "VALUE", type: "string"},
"DESCRIPTION":{field: "DESCRIPTION", type: "string"}
}
}
}
};
(Note: the REST service requires data to be provided as a JSON object via POST, hence the type and parameterMap).
I have confirmed that the data to populate the dropdown is being returned from the REST service as an array under the key "resultData":
{
"resultData":[{"DESCRIPTION":"Whatever","VALUE":"VALUE1"},...]
}
Can anyone help me?
Update
I am also seeing "e.slice is not a function" in my dev console.
Edit
Added id field to model, no effect.
The problem was that schema should have been a child of dataSource. Once I fixed that, the data began to display.

Populating a kendo multiselect with ajax data

I am using a kendo multiselect widget for users to select different values pulled from the database via an ajax call. The ajax call takes one parameter, searchValue, which will narrow down the returned data. Here is my controller:
[HttpPost]
public JsonResult ProfitabilitySearch(string searchValue)
{
return Json(InventoryDataAccess.ProfitabilitySearch(searchValue));
}
1) How do you get the value from the text box to use as your searchValue? I commented the area in question below.
Here is my dataSource:
var searchDataSource = new kendo.data.DataSource({
transport: {
read: function () {
$.ajax({
type: 'POST',
url: Firm.ProfitabilitySearchURL,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
//'SuperClient' is test data to see if it works, but what do i
//need to make searchValue = what I type?
data: JSON.stringify({ searchValue: 'SuperClient'}),
success: function (data) {
return data.RESULT;
}
});
}
},
group: { field: 'category' },
serverFiltering: true
});
And here is where I create the multiselect widget:
var TKSearch = $("#TKSearch").kendoMultiSelect({
dataSource: searchDataSource,
autoBind: false,
minLength: 3,
placeholder: 'Search Timekeepers...',
dataTextField: 'label',
dataTextValue: 'value',
delay: 200
}).data("kendoMultiSelect");
I'm not sure if this will help, but here is the structure of the json that is returned from the ajax call:
{"label":"SUNFLOWER REALTY CORP. (023932)","value":"023932","category":"RC"}
Solving the first question above may answer my second question so I will wait to ask that until after.
You can use functions for the request parameters.
var searchDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: 'POST',
url: Firm.ProfitabilitySearchURL,
contentType: 'application/json; charset=utf-8',
data: {
searchValue: function () {
// better: use a model property instead of this
return $("#TKSearch").data('kendoMaskedTextBox').value();
}
},
success: function (data) {
options.success(data.RESULT);
}
});
}
},
group: { field: 'category' },
serverFiltering: true
});
Notes
This really should be a GET request. Use POST for requests that actually change data on the server and GET for requests that merely retrieve data from the server.
You do not have to JSON.stringify() yourself. jQuery does that transparently.
Specifying dataType is completely superfluous, jQuery will figure this out from the response headers.
Reading the input value via jQuery is not clean. Use the data-bound model property instead.
The callback invocation (options.success())
This sample lacks HTTP error handling, you must add that.

Kendo Datasource Transport custom function not getting called

Im experiencing a rather annoying bug (?) in Kendo UI Datasource.
My Update method on my transport is not getting called when I pass a custom function, but it does work if I just give it the URL.
This works:
...
transport: {
update: { url: "/My/Action" }
}
...
This does not
...
transport: {
update: function(options) {
var params = JSON.stringify({
pageId: pageId,
pageItem: options.data
});
alert("Update");
$.ajax({
url: "/My/Action",
data:params,
success:function(result) {
options.success($.isArray(result) ? result : [result]);
}
});
}
}
...
The function is not getting invoked, but an ajax request is made to the current page URL, and the model data is being posted, which is rather odd. Sounds like a bug to me.
The only reason I have a need for this, is because Kendo can't figure out that my update action returns only a single element, and not an array - so, since I dont want to bend my API just to satisfy Kendo, I though I'd do it the other way around.
Have anyone experienced this, and can point me in the right direction?
I also tried using the schema.parse, but that didn't get invoked when the Update method was being called.
I use myDs.sync() to sync my datasource.
Works as expected with the demo from the documentation:
var dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax( {
url: "http://demos.kendoui.com/service/products",
dataType: "jsonp",
success: function(result) {
options.success(result);
}
});
},
update: function(options) {
alert(1);
// make JSONP request to http://demos.kendoui.com/service/products/update
$.ajax( {
url: "http://demos.kendoui.com/service/products/update",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
// send the updated data items as the "models" service parameter encoded in JSON
data: {
models: kendo.stringify(options.data.models)
},
success: function(result) {
// notify the data source that the request succeeded
options.success(result);
},
error: function(result) {
// notify the data source that the request failed
options.error(result);
}
});
}
},
batch: true,
schema: {
model: { id: "ProductID" }
}
});
dataSource.fetch(function() {
var product = dataSource.at(0);
product.set("UnitPrice", product.UnitPrice + 1);
dataSource.sync();
});
Here is a live demo: http://jsbin.com/omomes/1/edit

Kendo DataSource: How to set filters before fetch without sending two httprequests

Environment:
kendo version: 2013.1.319
dataSource:
productsDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://www.mydomain.com/odata.svc/products",
dataType: "json",
contentType: "application/json"
}
schema: {
type: "json",
data: function(data){
return data.value;
},
total: function(data){
return data['odata.count'];
},
model: product
},
pageSize: 50,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
Get data:
productsDataSource.filter([{ field: "Id", operator: "eq", value: 5 }]); //this will send an httprequest
productsDataSource.fetch(function (e) {
tempDataStorage = e.items;
//more logic to dealing with the data;
});
problems:
need to use the fetch method of the dataSource for data processing(widgets initialization, data binding...etc);
avoid sending two httprequests when setting filters before fetch;
the filter condition need to be changed at runtime.
productsDataSource._filter = { logic: 'and', filters: [
{ field: "Id", operator: "eq", value: 5 }]};
I've found this to work. Set the internal property to a full filter object. You can then call fetch afterwards. I've not yet found a way to change the page size without triggering a fetch however.
You can user filter in the DataSource configuration. This should issue only one request with the filtering conditions that you specify in the DataSource configuration.
Set the _filter field in the dataSource using productsDataSource._filter = [{ field: "Id", operator: "eq", value: 5 }]; and then manually initiate the request for remote data when you are ready using productsDataSource.read();
Even though it is an old question, it comes in google results. So even though I don't know if it is valid for kendo version: 2013.1.319, but there is currently a method
dataSource.query({
sort: { field: "ProductName", dir: "desc" },
page: 3,
pageSize: 20
});
This can set multiple options like sort, filter paging etc in a single call and returns a promise.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-query
Bind event listener to datasource which initializes widget and then use filter method.
datasource.one('requestEnd', function(){
// initialize or/and bind widget
});
datasource.filter({ /*your filter*/ })

KendoUI Remote datasource : assign url parameter a value from javascript variable

I'm using KendoUI to create charts from a remote datasource which is JSON file.
When I assign the url parameter(inside datasource object) a remote path ,pointing to the JSON the chart doesn't appear .
Say Like,
var myVar="some remote url";
dataSource: {
transport: {
read: {
url: myVar,
dataType: "json"
}
}
}
On the other hand if I directly specify the url as:
url: "http://myserver-name/somefile.json"
I can see the chart being displayed.
I cannot figure out what I'm doing wrong.
It should work! Check the following running on jsfiddle.
var url = "http://demos.kendoui.com/service/Products";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: url,
dataType: "jsonp"
}
},
pageSize: 4,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: "ProductName"
}
}
}
});
$("#kendogrid").kendoGrid({
dataSource: dataSource,
columns: [
{
field: "ProductID",
title: "ID"},
{
field: "ProductName",
title: "Name"}
]
});​
And this is the HTML:
<div id="kendogrid"></div>​
It defines an external URL and sets it to a variable ( url) and then uses the resulting DataSource.
Check for differences or post a code as complete as possible in jsfiddle or jsbin.
well , your solution worked for me but in different way.I was getting the url value from a .cs file and storing inside an javascript variable.
var URL="<%=myCSvariable%>";
But this alone doesnt works...:(
I had to modifiy the URL variable value as,
var completeURL="\"" + URL + "\"";
and then create dataSource object as,
var mydataSource = new kendo.data.DataSource({
transport: {
read: {
url: URL, // this is the tricky part. Using 'completeURL' here doesnt creates my chart , instead 'URL' works just fine.
dataType: "json"
}
}
});
I know its STRANGE but that's how it worked for me..
Anyways, Thanks a ton..:)

Resources