All states work well from one to the other, but I have some issues with refreshing them :
refreshing /products/verandas leads to /warranty/verandas
refreshing /products/pergolas leads to /warranty/pergolas-inside
.state('app', { // LEVEL 0
abstract: true,
url: ''
})
.state('app.posts', { // LEVEL 1 -> this parent is defined
url: '/products', // but not prioritized on refresh
})
.state('app.posts.type', { // LEVEL 2
url: '/{type}',
})
.state('app.page', { // LEVEL 1
url: '/{level1}',
abstract: true
})
.state('app.page.child', { // LEVEL 2
url: '/{level2}',
})
Any help is welcome...
Johan
Related
I need to populate a lot of data into a kendo dropdown list(probably could go to millions). SO I am trying to use serverFiltering of kendo to achieve that. I checked their official api in github and they are using parameters skip and take and it seems to be working fine for them. I am trying to send skip and take through the following code
$("#parentProductId").kendoDropDownList({
filter: "startswith",
dataTextField: "ProductName",
dataValueField: "id",
optionLabel: ' --Select--',
dataSource: {
serverFiltering: true,
data: {
skip:0 ,
take: 10
},
transport: {
read: {
url: webApiUri + '/Product/ProductSel',
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
}
}
}
}
});
My Apicontroller is as follows: -
[Route("api/Product/ProductSel")]
public List<SpProductSel_Result> ProductGet(int skip, int take)
{
//return result
}
Now my problem is this api controller is not being called. What am I doing wrong here?
One of the possibility can be you need to use correct transport.read configuration. When using Tranport configuration we specify data as a part of read please see the code snippet below.Refer to kendo documentation transport.read.data
Example # 1 SEND ADDITIONAL PARAMETERS As Object
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/twitter/search",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
data: {
q: "html5" // send "html5" as the "q" parameter , like int skip and take
}
}
EXAMPLE # 2 - SEND ADDITIONAL PARAMETERS BY RETURNING THEM FROM A FUNCTION
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/twitter/search",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
data: function() {
return {
skip: 0, // send 0 as the "skip" parameter
take:10 // send 10 as the "take" parameter
};
}
}
}
Code:
var url = base_url + "/api/v1/users/getUsers";
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: 'GET',
url:url,
dataType: 'json',
data: { searchTerm: $("#searchTerm").val().trim() },
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
},
schema: {
data: function (result) {
return result.model;
},
total: function (result) {
return result.model.length;
},
},
pageSize: 5
});
$("#matches").kendoListView({
dataSource: dataSource,
autoBind: false, // if set to false the widget will not bind to the data source during initialization.
template: kendo.template($("#matchesListViewTemplate").html())
});
$("#pager").kendoPager({
dataSource: dataSource,
autoBind: false
});
$(document).keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
var searchTerm = $("#searchTerm").val().trim();
if (searchTerm.length < 1)
return;
dataSource.read();
dataSource.page(1); // makes another call to the remote service
}
});
Because data source is remote, when we call dataSource.page(1), kendo issues another call to the remote service. This behaviour is described in this so post:
If you are doing server side paging it should be enough doing grid.dataSource.page(1) since this will invoke the read exactly as you already realized.
What must I change so that after I search with new searchTerm, API call would be done only once and pager would go to page 1 without making another call?
I tried with dataSource.query() but still no luck? I hope I demonstrated enough.
Solution is to call dataSource.page(1) when dataSource.read() gets data / is done.
$(document).keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
var searchTerm = $("#searchTerm").val().trim();
if (searchTerm.length < 1)
return;
dataSource.read().done(function() {
// in case remote service returns empty result set (but still http 200 code)
// page() makes another request (if data() is empty it makes another request)
// therefore we must check data length/total
if( dataSource.total() > 0)
dataSource.page(1);
}
});
If the read request's response have not arrived yet or if an error occurs, another read request is allowed (in order to fetch data). DataSource.read() makes asynchronously request and then dataSource.page(1) starts to execute. DataSource.page(1) function checks if there is any data read, if it's not it executes again read method - therefore we got 2 calls as you mentioned it. Because of asynchronously call this scenario may happen.
I have a Kendo UI DataSource that works when I use fetch(), but when I use the exact same configurtation with read() it fails. This is a problem as I need to retrieve data more than once and I can't do that with fetch().
Here is the DataSource code -
var FieldsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "../WebServiceAddress",
dataType: "json",
type: "POST",
contentType: 'application/json; charset=utf-8',
cache: false
},
parameterMap: function() {
return "{some mapping that has been confirmed to work}";
},
schema: {
data: function (data) {
if (data && data.d) {
//execution gets to here and stops
return data.d;
}
else {
return [];
}
},
}
});
Here is the code that calls the DataSource.read() function -
function loadFields() {
FieldsDataSource.read(function() {
var data = this.data();
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
var dataitem = data[i].Key;
$("#" + dataitem + "_field").prop("checked", data[i].Value);
}
}
});
}
If I change FieldsDataSource.read(function() to FieldsDataSource.fetch(function() everything works, but that doesn't make sense as I was under the improession that read and fetch do the same thing the difference being fetch only gets data once.
What I do know is that the data is being returned from the server, I can see it in fiddler - but the execution stops in the schema section where I flagged it in my code sample.
Apologies if I am asking a really obvious question, but I'm very new to Kendo.
have a look at the kendo demo site, this post explains how to read remote data quite nicely. I beleive the schema.data requires only string value. Configure your model and parse and then just call read(), your datasource.data collection will get populated and then you can play with it.
Also note that datasource.read() is async, thefore you populatefields method should be called from complete event of the datasource, not other way around. eg you might have no data in when populating.
transport: {
read: {
url: "../WebServiceAddress",
dataType: "json",
type: "POST",
contentType: 'application/json; charset=utf-8',
cache: false,
complete : function () { }
},
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
Since I've tryed to write on kendoui forum but the answer I've got was "buy a license" for report a bug, I'm asking if someone has faced the same problem using kendoGrid 2013.1.319. Since I'm using it in a "sundays test application" there's no hurry at all!
My original message was on kendo forum was:
Hi there,
I've been updated kendo grid with the latest version and all of a sudden my application is facing problems on data operations. The problem seems to be located client side, because I'm correctly receiving requests for GET, PUT, POST and DELETE verbs but the grid does not update its status.
I'm using ASP.NET MVC 4 OData implementation through an API service.
For example: if I delete 2 rows and press save, the DELETE calls are made, the client grid hides the rows but if I press save again, the delete is called on and on.
The same problem is on update / create, the cell remains with the red corner and, after saving, again the data are still submitted as it was the first time.
I've noticed that when I receiving the callback on dataSource:
requestEnd: function (e) {
if (e.type === "update" || e.type === "create") {
// Refresh data after changes
this.read();
}
}
e.type is always undefined when inserting or updating records.
This is my dataSource configuration:
dataSource: {
type: 'odata', // <-- Include OData style params on query string
transport: {
read: {
url: $("#contactsGrid").attr("data-api-crud"),
dataType: "json", // <-- The default is "jsonp".
type: "GET"
},
update: {
url: $("#contactsGrid").attr("data-api-crud"),
dataType: "json", // <-- The default is "jsonp".
type: "POST"
},
create: {
url: $("#contactsGrid").attr("data-api-crud"),
dataType: "json", // <-- The default is "jsonp".
type: "PUT"
},
destroy: {
url: function (data) {
return $("#contactsGrid").attr("data-api-crud") + "/" + data.Id;
},
dataType: "json", // <-- The default is "jsonp".
type: "DELETE"
},
parameterMap: kendo.data.transports.odata.parameterMap
},
schema: {
// The array of repeating data elements (items)
data: "Results",
// The total count of records in the whole dataset. used for paging.
total: "Count",
model: {
id: "Id",
fields: {
Dealer: { type: "string", editable: true },
Address: { type: "string", editable: true }
}
}
},
pageSize: 50,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
requestEnd: function (e) {
if (e.type === "update" || e.type === "create") {
// Refresh data after changes
this.read();
}
}
}
the Kendo UI team have just published a blogpost how to use the library with JayData to simplify the configuration of datasources. Hopefully it will help you.