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)
Related
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
})
I am using a kendo grid with batch editing style.
When editing (or creating) multiple records, the dataSource call update (or create) for each modified record.
Is there a way to get notified when all of these requests are finished?
There's a requestEnd event that is fired when all requests are complete
From their docs:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
requestEnd: function(e) {
var response = e.response;
var type = e.type;
console.log(type); // displays "read"
console.log(response.length); // displays "77"
}
});
dataSource.fetch();
Note that this fires when all requests are made including initial loads and updates so you might want to check on which type request has completed:
function onGridRequestEnd(e) {
if (e.type === "update") { //whatever... };
}
I am trying to understand what is meant here by the phrase "when the gridOptions variable becomes available". By "becomes available" is it meant that the kendo UI control is watching or observing the gridOptions variable to detect a change?
Also, I don't understand why the $http success-handler creates a new dataSource object based on result.data, and then in the gridOptions object we have dataSource: data. I would expect to see there dataSource: dataSource.
Does the dataSource property for the UI widget's ng-delay-configuration object expect to be assigned raw data or a kendo dataSource object?
// in controller
$http({ method: "GET", url: "customers.json" })
.success(function(result){
var dataSource = new kendo.data.DataSource({
data: result.data
});
$scope.gridOptions = {
dataSource: data,
columns: result.columns,
...
};
});
<!-- in HTML: -->
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions"></div>
In this context "becomes available" means when it is defined in the angular scope the widget will then be created. To rebind the widget when a property changes the k-rebind attribute should be used on the widget that you wish to update.
The $http success handler is correct in creating a new kendo.data.DataSource, but it should have following code (as you suggested):
$http({ method: "GET", url: "customers.json" })
.success(function(result){
var dataSource = new kendo.data.DataSource({
data: result.data
});
$scope.gridOptions = {
dataSource: dataSource,
columns: result.columns,
...
};
});
Also here the kendo-grid has a k-rebind attribute applied, which will refresh the grid when the gridOptions item is changed.
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions" k-rebind="gridOptions"></div>
I'm trying to implement an ajax based kendo datasource.
Getting errors like:
TypeError: e.schema is undefined
..when you exclude the schema property declaration...
OR
TypeError: r._observable is not a function
Above error happens when I try to write schema definition as follows:
schema:{
data:function(response){
return response;
}
The code I've used is as follows:
$(document).ready(function () {
var ds = kendo.data.DataSource({
schema: {
type:'json'
},
transport: {
type: 'json',
read: {
url:'/echo/json/',
type:'POST',
data:{
json: JSON.stringify(students),
delay:1000
},
contentType:'application/json',
processData:false
}
}
});
//stripped for sake of brevity
});
You can use the following fiddle for starts: http://jsfiddle.net/deostroll/3GqVR/4/
Positive I am missing something on the kendo configuration front...
A couple of issues:
You should use the new operator to instantiate a data source:
var ds = new kendo.data.DataSource({ /* options */ });
For some reason /echo/json/ didn't like the delay option. Removing it fixes it.
The dataSource option of the grid is never set.
Here is the updated fiddle: http://jsfiddle.net/3GqVR/9/
I've got a problem with the JQuery events in one of my Backbone.Marionette Views. I have defined some click and keyboard events. But some of them are not working. For example I want that the fetch-function is called every time the keyup event is triggered.
So here is the code:
return Backbone.Marionette.ItemView.extend({
tagName: 'div',
template: Template,
events:{
'click .yes': 'yes',
'click .no': 'no',
'keyup #citySearch': 'fetch'
},
yes : function() {
this.close();
},
no : function() {
this.close();
},
initialize: function(){
this.collection = new AreaCollection();
this.collection.on('sync', this.onShow, this);
this.sourceArr = [];
},
onShow: function() {
var that = this;
$('#citySearch').typeahead({
source: that.sourceArr
});
},
fetch: function(ev) {
var that = this;
that.collection.fetch({
data : {
query : $(ev.currentTarget).val(),
type : 'cities'
},
success: function(response) {
for (var i = 0; i < response.length; i++) {
that.sourceArr.push(response.models[i].get('name'));
}
}
});
}
});
But the keyup-Event is never fired. I also tried it with the "change"-event, which is also not working. When i use "keydown" or "keypress" instead then everything is fine and the fetch-function is called correctly.
I also tried to bind the event to that input-field manually in the initialize-function with
$('input#citySearch').bind('keyup',function() {
console.log('keyup');
});
But this is also not working. It only works if I bind the event to the input field within my underscore-Template file. But that couldn't be the solution.
Does anybody have an idea what the problem could be?
I can think of only one reason for this. And that is:
input#citySearch is not part of your itemView. This means you are NOT binding your fetch function to keyup event inside the container element of your view.
If you want to bind to something outside your view, you can trigger an event to the View in which the element resides.