I try to get data from a server with kendo.data.breeze.Source in my datacontext.js file, using this code :
function getClients() {
var query = breeze.EntityQuery.from("Clients");
var dataSource = new kendo.data.breeze.Source({
manager: new breeze.EntityManager(serviceName),
query: query,
serverSorting: true,
serverPaging: true,
serverFiltering: true,
pageSize: 100,
});
return dataSource ;
}
But when I try to log the results using console.log(datacontext.getClients());, datasource is empty.
You are basically only creating a datasource here, not fetching data from the specified endpoint. In this case, you could call fetch method of kendo datasource. Also read about read method
dataSource.fetch(function(){
var data = this.data()
console.log(data.length)
})
However, the point of using kendo-breeze is to create a datasource that supports breeze queries and their result sets to be used in any kendo widget that uses it. For example, kendo grid.
$("#grid").kendoGrid({
dataSource: yourKendoBreezeDataSource,
dataBound: function (e) {
console.log(e)
},
height: 550
})
Related
My application has a Kendo TreeList and a Kendo ComboBox. The DataSource for the TreeList could also be used for the ComboBox. If this is possible it would prevent me from having to run the same query twice.
This is further complicated, it seems, by my TreeList using a transport for CRUD operations.
Example of my shared DataSource:
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
webService.getData(arg1, arg2).then(function (response) {
e.success(response.data);
}, function (response) {
console.log(response);
});
}
}
});
sharedDataSource.read();
The transport part of my TreeList:
transport: {
read: function (e) {
e.success(sharedDataSource);//sharedDataSource has NO data here. That's the problem
}
}
ComboBox:
$("#comboBox").width(250).kendoComboBox({
dataTextField: "name",
dataValueField: "id",
dataSource: sharedDataSource//The comboBox is launched via a click after the page loads and DOES have data here
});
DataSource.read() is an async method. Data isn't loaded yet when TreeList is being initialized, therefore it will be empty.
Using read method with Promise resolving should help:
sharedDataSource.read().then(function () {
// TreeList init
// ComboBox init
});
Since TreeList has no paging or grouping, (assuming you load all treeitems at once), you could use DataSource.view() method to extract data and avoid undesired remote requests.
// TreeList and ComboBox transports
transport: {
read: function (e) {
e.success(sharedDataSource.view());
}
}
Dojo demo: http://dojo.telerik.com/#msagi/EnEnI (with fake remote call)
I have been unsuccessful at getting data to show in a Kendo grid based on a web api action I have created.
In the code below I am reading data from a web api action at /api/controller/action. The data is seen in the browser as the response below which is a list of strings returned from the action method.
Response from Server:
<string>Value 1</string>
Init function within cshtml:
$(document).ready(function () {
var element = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/api/controller/action"
},
serverSorting: true
},
sortable: true,
pageable: false,
columns: [
{
field: "string",
title: "Name",
width: "100%"
}
]
});
});
How do I get data to map to the grid?
Does not look like you are returning JSON from your controller action and your datasource is set to accept json.
Yeah that looks like XML. Be sure in your API to use the KendoMVC DataSourceRequest Object to return data in the right Json format.
Here is an example:
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
var result = ReadData();
return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
FYI the Json of
<string>Value 1</string>
Should be like this
{"string":"Value 1"}
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*/ })
I have kendo grid and chart in my application.I am using shared data source for both grid and chart.But i want to use same datasource for both grid and chart without using shared datasource.I want to bind the result of grid as chart datasource.Is it possible?If it is possible how to do that?If any one know about this please help me..
Well if you do not want to use shared dataSource then you have to use different dataSource with the same configuration object. I guess you are trying to stay DRY.
To do so you can use the same configuration object in both places.
e.g.
var configDS = {
type: "odata",
transport: {
read: "..."
},
schema: {
model: {
fields: {
...
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
}
$("#grid").kendoGrid({
dataSource: configDS
//other options for Grid
})
$('#chart').kendoChart({
datasource:configDS
//other options for Chart
})
I have a problem with the Kendo AutoComplete widget.
I am trying it to query the datasource after the user has entered the first two characters of their search.
On the server (web api) I restrict the search using those two chars and all is well, i.e. a subset is returned and correctly shown and further filtered if I carry on typing in the search.
However, I then retype a new search entry which is no longer firing back to the datasource so I am stuck with the data that was retrieved from the first query.
How do I go about this properly?
Thanks
Here is my test code:
public class AlbumsController : ApiController
{
HttpRequest _request = HttpContext.Current.Request;
// GET api/albums
public IEnumerable<Album> GetForAutoComplete()
{
string sw = _request["sw"] == null ? "" : _request["sw"].ToString();
var query = (from a in Albums.MyAlbums
where a.Title.ToLower().StartsWith(sw)
orderby a.Title
select a).ToArray();
return query;
}
and my javascript on the client is like this:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Albums/GetForAutoComplete",
data: {
sw: function () {
return $("#albumSearch").data("kendoAutoComplete").value();
}
}
}
}
});
$("#albumSearch").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "Title",
minLength: 2,
placeholder: "type in here.."
});
Set serverFiltering to true. The default is false, so it will only grab data once and assume that it now has all the data, and subsequent filtering is done on the client.
To have it re-send to the server every time, add this:
var dataSource = new kendo.data.DataSource({
serverFiltering: true, // <-- add this line.
transport: {
...
}
});
The code for selecting an European country while typing using kendo autocomplete from database as below:
$("#countries").kendoAutoComplete({
dataTextField: "yourfield",
filter: "startswith", // or you can use filter: "contains",
minLength: 3, //what ever you want. In my case its 0.
placeholder: "Select country...",
dataSource: {
type: "get",
serverFiltering: true, //or can also make it false
transport: {
read: {
url: "/yourController/yourAction",
datatype: "json"
}
}
}
});
It works fine for me.