Assign page size value to kendo grid from code - kendo-ui

code:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://search.twitter.com/search.json",
dataType: "jsonp",
data: {
q: "kendoui"
}
}
},
schema: {
data: "results",
total: function(response) {
return response.results.length;
}
},
pageSize: 4
});
here i have to set the page size 4 from client side

public JsonResult GetSettings()
{
return Json(new { count = Service.GetSettings<UserSetting>(AuthenticatedUser) }, JsonRequestBehavior.AllowGet);
}
var settingsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetSetting")',
dataType: "json",
type: "GET"
}
},
schema: {
parse: function (data) {
resultCount = data.count;
return data;
}
},
change: function () {
Grid();
}
});
settingsDataSource.read();
function Grid() {
mainGridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetDetails")',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify({ filter: options, isPrimary: options.isPrimary });
}
},
schema: {
model: {
fields: {
Status: { type: "string" },
Name: { type: "string" }
}
},
data: function (data) {
return data.data;
},
total: function (data) {
return data.totalCount;
}
},
pageSize: resultCount,
serverFiltering: true,
serverPaging: true
});

Related

Kendo Grid not showing data with proper json being returned

My kendo grid is not showing data after successfully calling a web method and seeing data being returned in the ajax request.
$(document).ready(function () {
var filterSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: "DoJo.aspx/GetProjects",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d has the json data
}
});
}
},
schema: {
model: {
fields: {
ProjNum: {type: "string"},
Stat: {type: "string"}
}
},
data: "d"
},
change: function (e) {
// e.items is empty
}
});
$("#grid").kendoGrid({
dataSource: filterSource,
columns: [
{
field: "ProjNum", title: "Project Number", width: "130px", filterable: {
multi: true,
dataSource: filterSource
}
},
{
field: "Stat", title: "Status", filterable: {
multi: true,
dataSource: filterSource
}
}
]
});
})
The JSON below is in an array format.
[{"ProjNum":"12345","Stat":null,"ProjTitle":"Test Title","ClientName":"Test Client","ClientContactName":"Test Name","ClientFacilityLocation":"Test Location","SourceOfContact":"Test Contact","ProjManager":"Test Manager","Department":"Test Department"}]
Why is change callback returning an empty e.items? If I remove data: "d" it returns e.Items with the JSON data.
When you set dataSource.transport.read to a function and invoke the ajax call yourself, you need to pass the result (or error) back into the dataSource, like so:
var filterSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: "DoJo.aspx/GetProjects",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d has the json data
// notify the data source that the request succeeded
options.success(msg);
},
error: function(msg) {
// notify the data source that the request failed
options.error(msg);
}
});
}
},
schema: {
model: {
fields: {
ProjNum: { type: "string" },
Stat: { type: "string" }
}
},
data: "d"
},
change: function (e) {
// e.items is empty
}
});
See the documentation for more information.

Kendo-UI autocomplete fails to load

I am having an issue with the data source not being accessed. The webservice executes it's query and firebug shows the return string but I don't get the features of the autocomplete list.
$("#txtCriteria").kendoAutoComplete({
minLength: 1,
suggest: true,
filter: "startswith",
dataTextField: "ACName",
select: function (e) {
var dataItem = this.dataItem(e.item.index());
//output selected dataItem
document.getElementsByName("hdfldSelect")[0].value = dataItem.ACCode;
$("#txtCriteria").kendoAutoComplete();
var autocomplete = $("#txtCriteria").data("kendoAutoComplete");
autocomplete.destroy();
},
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: "../DAL/Reports/wsReports.asmx/AutoComplete",
dataType: "json",
type: "GET",
},
parameterMap: function (data, action) {
var newParams = {
Type: Type,
filter: data.filter.filters[0].value
};//var
return newParams;
},//parameter
}//trans2
})//data
});
Thank you for any assistance
Going along the fact that your endpoint returns the expected data set, you could try adding a 'schema' to your kendo-datasource.
dataSource: new kendo.data.DataSource({
schema: {
data: function (e) {
return e.Results
},
model: {
fields: {
Id: { type: "number" },
Name: { type: "string" }
}
}
},
serverFiltering: true,
transport: {
read: {
url: "../DAL/Reports/wsReports.asmx/AutoComplete",
dataType: "json",
type: "GET",
},
parameterMap: function (data, action) {
var newParams = {
Type: Type,
filter: data.filter.filters[0].value
};//var
return newParams;
},//parameter
}//trans2
})//data

Why can't I update or delete the new import of excel data in kendo grid?

I import the Excel file to server and the server return the JSON data to client. but after the new JSON data binding to the kendo grid dataSource, I can't update or delete this or these datas? What can I do to resolve this problem?
This is the form submit js code:
var form = $('#idForm');
var grid = $('#demo2').data('kendoGrid');
form.submit(function (e) {
var formData = new FormData($(this)[0]);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: formData,
cache: false,
processData: false,
contentType: false,
dataType: 'json',
//async: false,
success: function (response) {
if (response.result) {
***grid.dataSource.data(response.data);***
$('#moneyin').text(response.context.moneyin);
$('#moneyout').text(response.context.moneyout);
$('#moneyleft').text(response.context.moneyleft);
} else {
alert(response.message);
}
},
error: function (response) {
alert("error");
}
});
//e.preventDefault(); // avoid to execute the actual submit of the form.
return false;
});
var url = site_url + 'inline_edit/';
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: site_url + 'initial/',
type: 'GET',
dataType: "json"
},
update: {
url: url,
type: 'POST',
dataType: 'json'
},
create: {
url: url,
type: 'POST',
dataType: 'json'
},
destroy: {
url: url,
type: 'POST',
dataType: 'json'
},
parameterMap: function (options, operation) {
//if (operation == "read") {
// return {
// page: options.page,
// pageSize: options.pageSize,
// start: $('#start').val(),
// end: $('#end').val()
// }
//}
if (operation !== "read" && options.models) {
for (var k = 0; k < options.models.length; k++) {
var date_str = date2str(options.models[k].date, 'yyyy-MM-dd');
var recor_str = date2str(new Date(), 'yyyy-MM-dd');
options.models[k].date = date_str;
options.models[k].recordate = recor_str;
}
return {
'operation': operation,
'models': kendo.stringify(options.models)
};
}
}
},
requestEnd: function (e) {
if (e.response && e.response.context) {
$('#moneyin').text(e.response.context.moneyin);
$('#moneyout').text(e.response.context.moneyout);
$('#moneyleft').text(e.response.context.moneyleft);
}
},
//serverPaging: true,
batch: true,
pageSize: 7,
schema: {
model: {
id: 'id',
//data type of the field {Number|String|Boolean|Date|datetime} default is String
fields: {
id: {
type: "number",
editable: false,
nullable: false
},
date: {
type: "date",
defaultValue: new Date(),
validation: {
required: true
}
},
fundbefore: {
type: "number",
editable: false,
nullable: true
},
moneyin: {
type: "number",
validation: {
min: 0,
required: true
}
},
moneyout: {
type: "number",
validation: {
min: 0,
required: true
}
},
fundafter: {
type: "number",
editable: false,
nullable: true
},
charge: {
type: "string",
validation: {
required: true
}
},
reason: {
type: 'textarea',
validation: {
required: true
}
},
recordate: {
type: 'date',
editable: false,
defaultValue: new Date()
},
modify: {
editable: false,
defaultValue: user_name
}
}
},
data: function (response) {
if (response.result) {
return response.data;
} else {
return alert(response.message);
}
},
total: function (response) {
return response.total;
}
}

Kendo Grid error on update - no database issue

I am getting this error every time i update any row.
The update itself is successful in the database, but when i trigger the success method for kendo it seems to be bothered, at the beginning i thought it could be that the object i return from the database is different, but its exactly the same one as the one i submit.
Thanks in advance
Uncaught SyntaxError: Unexpected identifier
yt.setter
lt.extend._set
Ut.extend.accept
lt.extend._accept
(anonymous function)
(anonymous function)
j
k.fireWith
e.(anonymous function)
o.(anonymous
function).call.X.success
$.ajax.success
j
k.fireWith
x
b
Here is the code:
dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax( {
url: crudServiceBaseUrl + "?serviceType=students&serviceFunction=getStudentLists&type=2",
dataType: "json",
success: function(result) {
var data = _.flatten(result);
options.success(data);
}
});
},
update: function(options) {
$.ajax( {
type: 'POST',
url: "/tools.php?id=ajaxstudentlist",
dataType: "json",
data: {data:options.data.models},
success: function(result) {
var arr = [];
arr.push(result);
var data = _.flatten(arr);
options.success();
}
});
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 70,
schema: {
model: {
id: "studystatusid",
fields: {
studystatusid : { type: 'number', editable: false, nullable: true },
studentid : { type: 'string', editable: false, nullable: false},
lastname : { type: 'string', editable: false, },
firstname : { type: 'string', editable: false, },
spnumber : { type: 'string', editable: false, },
status : { type: 'string', editable: false, },
begin_date: { type: "date", validation: { required: true } },
end_date: { type: "date" }
}
},
parse : function(data) {
for (var i = data.length - 1; i >= 0; i--) {
data[i].studentid = addZeros(data[i].studentid);
if(data[i].begin_date !== '0'){
data[i].begin_date = new Date(parseInt(data[i].begin_date+ '000'));
}
if(data[i].end_date){
data[i].end_date = new Date(parseInt(data[i].end_date+ '000'));
}
}
return data;
}
}
});
Your Datasource Update
update: function(options) {
$.ajax( {
type: 'POST',
url: "/tools.php?id=ajaxstudentlist",
dataType: "json",
data: {data:options.data.models},
success: function(result) {
var arr = [];
arr.push(result);
var data = _.flatten(arr);
options.success();
}
});
},
the above ajax call is expecting a JSON result back , you should return a JSON result back as a success , Its Better to return the updated row back.
why are are you calling ajax inside Kendo?
Should be like the following code. Try this and update the status I will modify the code if it not get succeeded.
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "?serviceType=students&serviceFunction=getStudentLists&type=2",
dataType: "json",
success: function (data) {
console.log(data);
}
},
update: {
url: "/tools.php?id=ajaxstudentlist",
dataType: "json",
data:{inputParam:inputvalue},
success: function(result) {
console.log(data);
}
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "studystatusid",
fields: {
studystatusid : { type: 'number', editable: false, nullable: true },
studentid : { type: 'string', editable: false, nullable: false},
lastname : { type: 'string', editable: false, },
firstname : { type: 'string', editable: false, },
spnumber : { type: 'string', editable: false, },
status : { type: 'string', editable: false, },
begin_date: { type: "date", validation: { required: true } },
end_date: { type: "date" }
}
}
}
});

How to get the ID property in KendoUI TreeView

Here is my tree view of KendoUI:
<script src="~/scripts/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var regions = {
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllRegions?countryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
},
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
};
var countries = {
type: "odata",
schema: {
model: {
id: "Id",
hasChildren: "HasChildren",
children: regions
}
},
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllCountries?territoryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
}
};
var Territories = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllTerritories",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
},
schema: {
model: {
hasChildren: "HasChildren",
Id: "ID",
children: countries
}
}
});
$("#treeview").kendoTreeView({
dataSource: Territories,
dataTextField: ["Name", "Name", "Name"],
dataValueField:"ID"
});
});
</script>
The hierarchy is Territories->countries->regions
I can see the territories populating, but I am unable to fetch the ID property of selected Territory so that countries can be populated, that is in ajax call,
options.ID is undefined there.

Resources