I recently updated to the most recent version of kendo (v2014.2.716).
And now, I get errors when receiving callbacks of grid datasources. It seems that the datasource has an aggregate, but the weird thing is, the aggregate it self is the function to get the aggregates...
The kendo datasource aggregate function is as follow :
function (val) {
var that = this;
if(val !== undefined) {
that._query({ aggregate: val });
return;
}
return that._aggregate;
}
If I call the aggregate function, I get an array of the aggregate function itself :
[
function (val) {
var that = this;
if(val !== undefined) {
that._query({ aggregate: val });
return;
}
return that._aggregate;
}
]
The datasource is created this way :
new kendo.data.DataSource({
pageSize: 100,
transport: {
read: {
async: true
cache: false
contentType: "text/plain; charset=utf-8"
dataType: "json"
type: "GET"
url: "URL"
}
}
})
I've traced this back to this line in kendo.data.js line 2089 :
that._aggregate = options.aggregate;
Am I doing something wrong or I have some incompatibility ?
Thanks for any help!
Related
Have a Kendo Read Call from JQuery as follows:
var dataSource = new kendo.data.DataSource({
error: function (e) {
if (e.status === "error") {
this.cancelChanges();
showToast("Error Occurred", e.xhr.responseText, "exclamation-circle", "red");
var grid = $('#grid').data('kendoGrid');
grid.dataSource._data = self.formatData(grid.dataSource.data());
grid.refresh();
}
},
requestEnd: onRequestEnd,
transport: {
read: {
type: "GET",
dataType: "json",
url: '/api/user/getall'
},
destroy: {
url: function (data) {
return "api/user/delete/" + data.RecordKey;
},
type: "delete",
dataType: "json"
},
parameterMap: function (data, operation) {
return kendo.stringify(data);
}
},
The server determines user unauthorized and returns the following Content
...
return new ContentResult()
{
StatusCode = 401,
Content = "No Access"
};
...
The errors blodk in the in the datasource does not fire? Not sure what I am missing.
Seems like the issue is with the parameterMap definition, specifically when the function is executed on a read operation
parameterMap: function (data, operation) {
if (operation != "read") {
return kendo.stringify(data);
}
}
With the above update and a mock 401 response the error event fires as expected - example.
Found my issue I had an error begin throw in my requestEnd block. Corrected that and error is firing.
In my kendo dataSource > transport > update. I want to catch a server response status (refer image), but none of this methods trigger an alert. Any idea why?
update: {
url: "./getRevenueAccounts.php",
type: "POST",
data: function() {
return {
method: "editRevenueAccounts"
}
},
success: function(e) {
if(e.status == 'duplicate'){
alert('Trigger 1');
}
},
error: function(e) {
if (e.errorThrown == 'duplicate') {
alert("Trigger 2");
}else if(e.status == 'duplicate' ){
alert("Trigger 3")
}
},
complete: function (e) {
if(e.status == 'duplicate'){
alert('Trigger 4');
}
}
},
console.log(e) screen shot
Try the following code for your success function:
success: function(e) {
if(e.responseText.status == 'duplicate'){
alert('Trigger 1');
}
},
Essentially, you are looking at the status property when you should have been looking at the responseText property to get the status (which is another property on that object).
You need to make an ajax call inside the update function.
Like:
var dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
/* implementation omitted for brevity */
},
update: function(options) {
// make JSONP request to https://demos.telerik.com/kendo-ui/service/products/update
$.ajax({
url: "https://demos.telerik.com/kendo-ui/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" }
}
});
For more details please check this from telerik documentation: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.update
Is not a good method to apply, but it works to fetch the response.
if(e.responseText=='{"status":"duplicate"}'){
kendo.alert('duplicate data');
}
I am tearing my hair out with this...!
I have a telerik kendo mvc ui grid widget using an Inline gridedit mode. When the user adds a new entry to the grid (by way of a custom dropdown edit control), I want it to validate that this entry is not already present in the grid.
I have an MVC controller action that does this and returns True or False accordingly. This works perfectly. Here is the validator javascript code I am using.
(function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: {
bedQuantity: function (input, params) {
if (input.is("[name='Quantity']") && input.val() <= 0) {
input.attr("data-bedQuantity-msg", "Quantity must be 1 or more");
return false;
}
return true;
},
bedExists: function(input, params) {
if (input.is("[name='BedType']")) {
var model = {
PropertyId: #Model.Id,
BedTypeId: input.val()
};
var url = "/Property/ValidateBedTypeExists";
input.attr("data-val-bedExists-requested", true);
$.ajax({
type: "POST",
url: url,
traditional: true,
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
success: function(data) {
return data === false;
},
fail: function(data) {
return false;
}
});
} else {
return true;
}
}
},
messages: {
bedQuantity: function (input) {
return input.attr("data-val-bedQuantity");
},
bedExists: function(input) {
return "This bed type already exists";
}
}
});
})(jQuery, kendo);
No matter whether the ajax call returns true or false, the validator always flags the entry as invalid.
You can give the html attribute for the kendoDropdownList as required like this
#(Html.Kendo().DropDownList()
.DataValueField("")
.DataTextField("")
.Name("")
.HtmlAttributes(new { required ="required" })
.OptionLabel("- Select a type - ")
.Filter(FilterType.Contains)
)
Try this..
I have a made a kendo datasource which makes a call out to my api, I have it limited to make pages of 10's. My problem is that the pager will not set back to the first page. For example, when I make a call and to my api and receive 50 results, I will have 5 pages of 10 items each. I select to go to the fifth page which, I then make another call and only receive 10 items which makes one page. However then the cal completes I am still on the 5th page; it will not reset to the first page.
var dataSource = new kendo.data.DataSource({
page:1, << From what I read this is suppose to do the job
pageSize: 10,
transport: {
read: {
type: "POST",
url: location + "/api/ContentSearch/SearchRequest",
contentType: 'application/json',
beforeSend: function (req) {
req.setRequestHeader("Authorization", "Bearer " + token);
}
},
parameterMap: function (option, operation) {
return JSON.stringify(query);
}
},
change: function (e) {
var data = this.data();
$("#searchButton").prop("disabled", false);
$("#loadingGif").hide();
//kendoPager.page(1); << does not work
switch (data.length) {
case 0:
FeedBackMessage("No result found");
break;
case 500:
FeedBackMessage("Please check or refine the search");
break;
default:
$('#pager').show();
$('#descriptionColumn').show();
$("#listView").show();
$("#keyWordText").val("").data("kendoDropDownList").text("");
$("#searchText").val("");
}
return data;
},
error: function (e) {
$("#loadingGif").hide();
ErrorHandler(e.sender.transport.options.read.url, e.xhr.status, e.xhr.statusText, "Kendo datasource was not binded to the WebApi response", "", true);
}
});
function SubmitSearch(e) {
e.preventDefault();
query = {
SearchText: $("#searchText").val(),
KeywordText: generalContentKeywords.text(),
GlobalSearch: true
};
if (query.SearchText === "" && query.KeywordText === "Select Category") {
FeedBackMessage("Please enter a value");
}
else {
if (query.KeywordText === "Select Category") {
query.KeywordText = "";
}
$.when(TokenForWebApi()).then(function (adalToken) {
token = adalToken;
$('#pager').hide();
$('#descriptionColumn').hide();
$("#listView").hide();
$("#searchButton").prop("disabled", true);
$("#loadingGif").show();
dataSource.read();
});
}
};
var kendoPager = $("#pager").kendoPager({
dataSource: dataSource,
}).data("kendoPager");
I went around this issue, by changing my submit function to see if the datasource has any data, and if it find that it does it reset set the page back to one. I am guessing that my previous code, I was trying to set a page value before the datasource had any values to page.
function SubmitSearch(e) {
e.preventDefault();
query = {
SearchText: $("#searchText").val(),
KeywordText: generalContentKeywords.text(),
GlobalSearch: true
};
if (query.SearchText === "" && query.KeywordText === "Select Category") {
FeedBackMessage("Please enter a value");
}
else {
if (query.KeywordText === "Select Category") {
query.KeywordText = "";
}
$.when(TokenForWebApi()).then(function (adalToken) {
if (dataSource._pristineData.length) {
kendoPager.page(1);
}
token = adalToken;
$('#pager').hide();
$('#descriptionColumn').hide();
$("#listView").hide();
$("#searchButton").prop("disabled", true);
$("#loadingGif").show();
dataSource.read();
});
}
};
Is it possible to access and modify data in Kendo UI grid before updating?
Below is an example to illustrate what I need. The options.data contains the sent data but it is already formatted in string "models=%B7%22Id22%.... etc" not really convenient form.
dataSource = new kendo.data.DataSource({
transport: {
read: {
...
},
update: {
url: baseURL + "update",
beforeSend: function(xhr, options){
xhr.setRequestHeader('API-KEY', apikey );
var modifiedData = doSomething(options.data);
return modifiedData;
},
dataType: "json",
method: "POST",
dataFilter: function(data){
... some data recieved modification
return JSON.stringify(somedata);
},
complete: function(e) {
....
}
},
You should be able to use the parameterMap function, check the type for "update" and change the options.data anyway you want.
parameterMap: function(options, type) {
if(type === "update") {
options.someProperty = "somenewvalue";
}
return kendo.data.transports.odata.parameterMap(options, type);
}