I am working on endless scroll functionality in kendo UI
So far I have managed to load data from url and show on list, but once my list ends, I need to load data from next url
here is my code
var i = 0, pageSize = 10;
function mobileListViewEndlessScrolling() {
var dataSource = new kendo.data.DataSource({
type: "odata",
transport :
read: {
type : "GET",
url : "https://graph.facebook.com/siedae/feed?access_token=150129068491462|a8HxcqfRA-Bn1M59A_wefbEMs9c",
contentType: "application/json; charset=utf-8",
dataType : "json",
error : function (xhr, ajaxOptions, thrownError) {
alert("error " + xhr.responseText);
},
}
},
serverPaging: true,
pageSize: pageSize,
schema: {
data : "data",
total: function() { return 25; }
},
});
$("#endless-scrolling").kendoMobileListView({
dataSource: dataSource,
template: $("#endless-scrolling-template").text(),
endlessScroll: true,
scrollTreshold: 30,
});
}
You may define the dataSource.transport.read.url as a function. The function will execute every time the dataSource is about to make a read request which will give you the opportunity to change the URL at runtime.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.url
Related
Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data. I want to update the second column with the returned data but I'm not having any luck and I'm not even sure if this is the correct approach. I can change the second column with static data by adding a change event to my datasource of my grid, but that of course doesn't help. The only examples I can seem to find show changing another column with client side data, not data returned from the server. Here's what I have so far:
$("#manualStatsGrid").kendoGrid({
dataSource: this.GetManualStatisticsDataSource(),
sortable: true,
pageable: false,
filterable: true,
toolbar: ["create"],
editable: "inline",
messages: {
commands: {
create: "Add New Statistic"
}
},
edit: function (e) {
var _this = _manualStats;
var input = e.container.find(".k-input");
var value = input.val();
input.keyup(function(){
value = input.val();
});
$("[name='Statistic']", e.container).blur(function(){
var input = $(this);
$("#log").html(input.attr('name') + " blurred " + value);
//valid the GL account number
$.ajax({
type: "GET",
url: _this.ValidateGlUrl,
dataType: 'json',
data: { glNumber: value },
success: function (response) {
var newDescription = response.Data.description;
console.log(newDescription);
//change description column here?
},
error: function (response) {
console.log(response);
}
});
});
},
columns: [
{ field: "Statistic" },
{ field: "Description" },
{ field: "Instructions" },
{ command: ["edit", "destroy"], title: " ", width: "250px"}
]
});
}
this.GetManualStatisticsDataSource = function () {
var _this = _manualStats;
var dataSource = {
type: "json",
transport: {
read: {
type: "POST",
url: _this.GetManualStatisticsUrl,
dataType: "json"
},
update: {
type: "POST",
url: _this.UpdateManualStatisticsUrl,
dataType: "json"
},
create: {
type: "POST",
url: _this.CreateManualStatisticsUrl,
dataType: "json"
},
destroy: {
type: "POST",
url: _this.DeleteManualStatisticsUrl,
dataType: "json"
}
},
schema: {
model: {
id: "Statistic",
fields: {
Statistic: {
type: "string",
editable: true,
validation: { required: true, pattern: "[0-9]{5}.[0-9]{3}", validationmessage: "Please use the following format: #####.###" }
},
Description: { editable: false },
Instructions: { type: "string", editable: true }
}
}
}
Inside the edit event, you have e.model. The model has the method set() which can change any dataItem's property value:
edit: function (e) {
...
var editEvent = e; // Creates a local var with the edit's event 'e' variable to be available inside the 'blur' event
$("[name='Statistic']", e.container).blur(function() {
...
$.ajax({
...
success: function(e, response) { // 'e' inside this callback is the 'editEvent' variable
e.model.set("Description", response.Data.description); // e.model.set() will change any model's property you want
}.bind(null, editEvent) // Binds the 'editEvent' variable to the success param
});
});
Working demo
Made this snippet of top of my head. Tell me if there is something wrong with it.
Am calling web api method from view model and getting the 10 records per click. I want paging for kendo template.
this is my code:
// this is the web api method which gets 10 records per each call
function WebApiMethod(parameter)
{
var url = webApiUrl + 'api/{controller}/{methodname}';
var success = function(result)
{
}
CallWebApi(url, 'POST', success, parameter);
}
///this is the ajax call that am calling from webapimethod
function CallWebApi(url, type, successCallBack, data) {
jQuery.support.cors = true;
$.ajax({
cache: false,
type: type,
url: url,
data: JSON.stringify(data),
async: false,
contentType: 'application/json',
success: successCallBack,
error: function (xhr, err) {
}
});
}
///this is the kendo pager in which am biding the datasource
function KendoPager()
{
var pager = $("#pager").kendoPager({
dataSource: ViewModels["NameOfVM"].dataSource,
info: false,
change: function () {
ViewModels["NameOfVM"].pageIndex = pager.page();
}
}).data("kendoPager");
}
//this is the datasource am bind to kendopager
dataSource: new kendo.data.DataSource({
serverPaging:true,
pageSize:10,
})
Thanks in advance.
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);
}
I am using the Data Source object to connect to a SharePoint 2013 ODATA source using REST and then use this as the data for a Kendo UI Grid.
The Data Source reads the list correctly and populates the grid, but when I update an item in the Kendo UI Grid the following error is returned by the REST end point.
The property '__deferred' does not exist on type 'SP.SecurableObject'.
Make sure to only use property names that are defined by the type.
This is caused by the Data Source returning all the properties from the initial read request and then returning in the update command.
SharePoint returns __deferred properties with a REST URL to defer loading, but is throwing a wobbly if they are returned back in an update command request.
Below is my Data Source
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: listUrl,
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
},
create: {
url: listUrl,
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
}
},
update: {
url: function (data) {
return listUrl + "(" + data.ID + ")";
},
beforeSend: function (jqXhr, options) {
var data = JSON.parse(options.data);
jqXhr.setRequestHeader("If-Match", data.__metadata.etag);
},
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE"
},
},
destroy: {
url: function (data) {
return listUrl + "(" + data.ID + ")";
},
type: "DELETE",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
}
}
},
pageSize: 20,
schema: {
data: "d.results",
model: {
id: "ID",
fields: {
ID: { editable: false, nullable: false },
Title: { validation: { required: true } },
Body1: { validation: { required: true } },
Votes: { type: "number", validation: { required: true, min: 1 } },
}
}
}
});
You can specify a "parameterMap" function on the DataSource.transport, and filter out the data you don't want.
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
parameterMap: function(data, type){
if (type === "update" && data["__deferred"]){
delete data["__deferred"];
}
return kendo.stringify(data);
}
// ...
},
// ...
});
See http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap
Another option, if you're working with observable objects, is to provide a custom .toJSON method on your object. I wrote up a blog post about this, here: http://www.kendoui.com/blogs/teamblog/posts/13-04-04/hijacking-tojson-for-fun-and-profit.aspx
Using Derick Bailey's answer I was able to do the following with the parameterMap
the question object is a defined data model. Using this method, it will only send over the fields defined in the model plus the __metadata field that is need by SharePoint.
parameterMap: function (data, type) {
if (type == "update") {
for (var property in data) {
if (property != "__metadata" && !question.fields[property])
delete data[property];
}
}
return kendo.stringify(data);
}
i have encountered a problem on filtering in kendo 2012.3.1315.340 grid filtering, i have textboxes on the header template for filter function, once i filter, my paging is not working properly, i get proper data but my page count and total records don't change on the UI
Here is my code..
function searchOnFilters(element) {
var filtersModel = getSearchFilters();
//debugger;
var filterResults = new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
serverFiltering: true,
batch: true,
pageSize: 50,
transport: {
read: {
url: '#Url.Action("MasterQA_Read", "MasterQA")',
data: { searchFilters: JSON.stringify(filtersModel) },
type: "POST"
}
},
parameterMap: function (data, operation) {
return kendo.stringify(data);
},
schema: {
data: "Data",
total : "Total"
}
});
filterResults.fetch(function () {
// debugger;
var grid = $("#MQASearchGrid").data("kendoGrid");
grid.dataSource = filterResults;
grid.refresh();
});
}
Controller:
var result1 = new DataSourceResult
{
Data = gridData.Items,
Total = gridData.TotalCount
};
return Json(result1, JsonRequestBehavior.AllowGet);
Try using the setDataSource method of the grid. Assigning the dataSource field has no effect.