I have:
require(['jquery', 'kendo'], function($, kendo){
var activeGrid = $('#incomeGrid');
var incomeSource = new kendo.data.DataSource({
sort: {
field: "date",
dir: "desc"
},
batch: true,
transport: {
read: {
url: 'core/income-grid/read',
dataType: 'json',
type: 'get'
},
update: {
url: 'core/income-grid/update',
dataType: 'json',
type: 'post'
},
create: {
url: 'core/income-grid/create/',
dataType: 'json',
type: 'post'
},
destroy: {
url: 'core/income-grid/destroy/',
dataType: 'json',
type: 'post'
}
},
error: function (e) {
alert(e.errorThrown + "\n" + e.status + "\n" + e.xhr.responseText);
},
schema: {
data: "data",
total: 'total',
model: {
id: 'id',
fields: {
typeId: {
type: 'number'
}
}
}
},
change: function (e) {
if (e.action == "itemchange" || e.action == "remove") {
if (!activeGrid.ctrlDown) {
this.sync();
}
}
}
});
activeGrid.kendoGrid({
dataSource: incomeSource,
autoBind: true,
height: 152,
pageable: false,
filterable: false,
toolbar: kendo.template($("#incomeToolBar").html()),
edit: function (e) {
var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
if (ddl) {
ddl.open();
}
},
columns: [
{
title: 'Date added',
field: 'date',
width: '90px',
filterable: false,
template: '<span data-id="#=id#"><abbr title="">#=kendo.toString(date, "dd/MM/yyyy")#</abbr></span>'
}
],
editable: true,
sortable: true,
scrollable: true
}).data("kendoGrid");
})
But on the line that has:
activeGrid.kendoGrid({
I am getting the error:
Uncaught TypeError: undefined is not a function
Any idea how I can fix this? It's been driving me mad for the past four hours...
Related
today i'm trying to implement a kendo gridview to my website, actually i'm using a webservice that give me a JSON Result.
This is the result:
[{"IdComponente":"8","NoParte":"12","Descripcion":"Componente A","CostoUnitario":"0.12"},{"IdComponente":"9","NoParte":"123","Descripcion":"Componente B","CostoUnitario":"0.23"},{"IdComponente":"10","NoParte":"1234","Descripcion":"Componente C","CostoUnitario":"0.54"},{"IdComponente":"11","NoParte":"12345","Descripcion":"Componente D","CostoUnitario":"0.90"},{"IdComponente":"12","NoParte":"123456","Descripcion":"Componente E","CostoUnitario":"1.25"},{"IdComponente":"13","NoParte":"1234567","Descripcion":"Componente F","CostoUnitario":"0.12"},{"IdComponente":"14","NoParte":"12345678","Descripcion":"Componente G","CostoUnitario":"0.12"},{"IdComponente":"16","NoParte":"123456789","Descripcion":"Componente H","CostoUnitario":"0.98"}]
And i'm using this script, the problem is that i don't get any error in the console, but it doesn't show me the information in the grid.
So, i don't know why, because the json result its okay..
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "WSComponentes.asmx/obtenerComponentes",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json", // dataType is json format
success: function OnSuccess(response) {
cargarGrid(response);
},
error: function onError(error) {
console.log(error.d);
},
});
});
function cargarGrid(datos) {
console.log(datos);
$("#grid").kendoGrid({
dataSource: {
dataType: 'json',
data: datos,
schema: {
data: "d",
type: "json",
model: {
fields: {
IdComponente: { editable: false, type: "string" },
NoParte: { editable: false, type: "string" },
Descripcion: { editable: false, type: "string" },
CostoUnitario: { editable: false, type: "string" }
}
}
},
pageSize: 10
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "IdComponente",
title: "IdComponente",
}, {
field: "NoParte",
title: "NoParte"
}, {
field: "Descripcion",
title: "Descripcion"
}, {
field: "CostoUnitario",
title: "CostoUnitario",
}
]
});
}
</script>
You're not far away with what you have.. You need to declare a kendo.data.DataSource:
var dataSource = new kendo.data.DataSource({
dataType: 'json',
data: datos,
schema: {
model: {
fields: {
IdComponente: { editable: false, type: "string" },
NoParte: { editable: false, type: "string" },
Descripcion: { editable: false, type: "string" },
CostoUnitario: { editable: false, type: "string" }
}
}
},
pageSize: 10
});
Which is then used in your grid declaration like so:
$("#grid").kendoGrid({
dataSource: dataSource, ....
Here is a Dojo example to demonstrate implementation changes required.
I'm having problem with using Kendo UI Grid whenever I click on add new button it always produce this script error.
This is the code that I'm using:
dataSource = new kendo.data.DataSource({
batch: true,
pageSize: 20,
transport: {
read: {
url: 'SaladEntry/GetSupport2/',
dataType: "json"
},
destroy: {
url: 'SaladEntry/DeleteSupportKendo2/',
type: "POST",
contentType: 'application/json'
},
create: {
url: 'SaladEntry/SaveSupportKendo2/',
type: "POST",
contentType: 'application/json',
complete: function (e) {
SupportGrid();
}
},
update: {
url: 'SaladEntry/EditSupportKendo2/',
type: "POST",
contentType: 'application/json',
complete: function (e) {
SupportGrid();
}
},
parameterMap: function (options, operation) {
if (operation == "read") {
return saladparamObj;
}
else {
options.models[0].CountryNo = $('#Country_No').val();
var SaladParamSerialized = JSON.stringify(options.models);
return SaladParamSerialized;
}
}
},
schema: {
model: {
id: "PK",
fields: {
CountryNo: { editable: true, nullable: true },
EffectiveDate: { type: "date" },
stringEffectiveDate: { type: "string" },
ScaleMin: { validation: { required: true } },
ScaleMax: { validation: { required: true } },
Currency: { type: "string" }
}
}
},
sort: {
field: "stringEffectiveDate",
dir: "desc",
compare: function (a, b, dir) {
return kendo.parseDate(a.EffectiveDate) - kendo.parseDate(b.EffectiveDate);
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 300,
toolbar: ["create"],
columns: [
{
field: "stringEffectiveDate", title: "Date",
template: "#= kendo.toString(kendo.parseDate(EffectiveDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #", width: "100px",
sortable: {
allowUnsort: false,
compare: function (a, b, dir) {
return kendo.parseDate(a.EffectiveDate) - kendo.parseDate(b.EffectiveDate);
}
}
},
{ field: "EffectiveDate", title: "Effective Date", template: "#= kendo.toString(kendo.parseDate(EffectiveDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #", width: "100px" },
{ field: "ScaleMin", title: "BG1 Min", width: "100px" },
{ field: "ScaleMax", title: "BG7 Max", width: "100px" },
{ field: "Currency", title: "Currency", width: "100px" },
{ command: ["edit", "destroy"], title: "Commands", width: "160px" }
],
height: 300,
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
resizable: true,
selectable: true,
editable: "popup",
cancel: function (e) {
nEdit();
},
edit: function(e) {
e.container.find(".k-edit-label:first").hide();
e.container.find(".k-edit-field:first").hide();
if (!e.model.isNew()) {
var dt = e.container.find("input[name=EffectiveDate]").data("kendoDatePicker");
dt.enable(false);
}
}
}).css("background-color", "#C7D6A7");
No popup modal shown when I click on Add or Edit button. Below is the screenshot of my view.
.andSelf was removed in jQuery 3.0. You are referencing 3.1.1. You'll have to downgrade jQuery or find an update for Kendo.
i have a problem. I am using kendo in my Angular web api and i have a problem with updating data. This is my code.
$scope.documentListGridOptions = {
dataSource: {
type: "json",
transport: {
read: {
url: serviceBase + "Documents/GetListDocuments",
type: "POST",
dataType: "json",
contentType: 'application/json',
beforeSend: function (req)
{
req.setRequestHeader('Authorization', authGlobalService.getAuthorizationData().token);
}
},
parameterMap: function (options)
{
if (options.filter)
{
options.filter = options.filter.filters;
}
return JSON.stringify(options);
}
},
schema: {
data: "data",
total: "total"
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
selectable: 'row',
scrollable: false,
sortable: true,
filterable: {
extra: false
},
pageable: true,
change: function (idSelectedVote)
{
$scope.$apply(function ()
{
$scope.setSelected(idSelectedVote.sender.dataItem(idSelectedVote.sender.select()));
});
},
dataValueField: "id",
columns: [{
title: "Id dokumentu",
field: "documentId",
hidden: true
},{
title: "Nazwa dokumentu",
field: "nameDocument"
},{
title: "Opis",
field: "descriptionDocument"
},{
title: "Data dodania",
field: "dateAdded"
}]
};
Data are getting from database and all is fine. But when data will change i don't know how can i update my data. How can i make another request to database. Please for help.
edit:
var documentListGridOptionsRemote = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
method: 'POST',
url: serviceBase + "Documents/GetListDocuments",
data: { name: "eco" },
dataType: "jsonp",
beforeSend: function (req) {
req.setRequestHeader('Authorization', authGlobalService.getAuthorizationData().token);
}
},
update: {
method: 'POST',
url: serviceBase + "Documents/GetListDocuments",
dataType: "json",
beforeSend: function (req) {
req.setRequestHeader('Authorization', authGlobalService.getAuthorizationData().token);
}
}
}
});
$scope.documentListGridOptions = {
dataSource: documentListGridOptionsRemote,
schema: {
data: "data",
total: "total"
},
selectable: "row",
scrollable: false,
sortable: true,
filterable: {
extra: false
},
pageable: true,
columns: [
{ field: "documentId", title: "Id", hidden: true },
{ field: "nameDocument", title: "Nazwa dokumentu" },
{ field: "descriptionDocument", title: "Opis" },
{ field: "dateAdded", title: "Data dodania" },
{ field: "name", title: "Test" }
]
};
in your dataSource's transport, you need to specify the update property like this:
transport: {
read: {
url: serviceBase + "Documents/GetListDocuments",
type: "POST",
dataType: "json",
contentType: 'application/json',
beforeSend: function (req)
{
req.setRequestHeader('Authorization', authGlobalService.getAuthorizationData().token);
},
update: {
//you can have function for url if you need to customise you url
//like url:function(data){ serviceBase + "Documents/GetListDocuments("+data.id+");}
url: serviceBase + "Documents/GetListDocuments",
type: "POST",//properly dont need this one, as update is a 'PUT'
dataType: "json",
contentType: 'application/json',
beforeSend: function (req)
{
req.setRequestHeader('Authorization', authGlobalService.getAuthorizationData().token);
}
},
and use 'create' for add and 'destroy'
for the complete document, please check this document , and also i will recommend to use angular httpProvider interceptor to handle the authentication token so you dont have to have beforeSend in every request
I need to pass an additional parameter along with my grids datasources create routine but I am having trouble getting it to work.
I have tried:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem.set('phoneId', phoneId)
but this gives me the error Cannot read property 'set' of undefined.
Code for my grid:
function contactPhoneGrid() {
var contactPhoneGrid = $('#contactPhonesGrid').kendoGrid({
dataSource: {
pageSize: 25,
serverSorting: false,
serverFiltering: true,
sort: {
field: "ref",
dir: "asc"
},
transport: {
read: {
url: ROOT + 'Contact/contactPhoneGrid',
dataType: 'json',
type: 'POST'
},
create: {
url: ROOT + 'Contact/createContactPhone',
type: 'POST'
},
update: {
url: ROOT+'Contact/updateContactPhone',
dataType: 'json',
type: 'POST'
},
destroy: {
url: ROOT+'Contact/deleteContactPhone',
dataType: 'json',
type: 'POST'
}
},
error: function(e) {
alert(e.errorThrown + "\n" + e.status + "\n" + e.xhr.responseText);
},
schema: {
data: "data",
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
type: {
type: 'string',
editable: true
},
tel: {
type: 'string',
editable: true
},
typeId: {
type: 'number',
editable: true
}
}
}
}
},
autoBind: false,
columns: [
{
field: 'phoneId',
headerTemplate: '<b>Phone Id</b>',
filterable: false,
width: '50px',
hidden: true
},
{
field: 'type',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
// template: '#=type#'
},
{
field: 'tel',
headerTemplate: '<b>Number</b>',
filterable: false,
}
],
edit: function(e) {
var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
if (ddl) {
ddl.open();
}
},
height: '75',
filterable: true,
editable: true,
sortable: true,
scrollable: true
}).data("kendoGrid");
}
dataItem is a method so you should not use it as:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem
but as:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem(something here)
See documentation here : http://docs.telerik.com/kendo-ui/api/web/grid#methods-dataItem
I use open source edition of kendo web, my current version is Kendo UI Web
i'm using kendo ui and asp.net mvc 4
my kendo grid have this js code
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverSorting: true,
serverFiltering: true,
serverPaging: true,
transport: {
read: {
url: "api/Usermanage",
dataType: "json",
contentType: "application/json"
},
create: {
url: "/api/Usermanage",
dataType: "json",
type: "POST"
},
update: {
url: function (UserModel) {
return "/api/articles/" + UserModel.ID
},
dataType: "json",
type: "PUT"
},
destroy: {
url: function (UserModel) {
return "/api/Usermanage/" + UserModel.ID
},
dataType: "json",
contentType: "application/json",
type: "DELETE"
},
update: {
url: function (UserModel) {
return "/api/Usermanage/" + UserModel.ID
},
dataType: "json",
type: "PUT"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
data: function (response) {
if (response.value !== undefined)
return response.value;
else {
delete response["odata.metadata"];
return response;
}
},
total: function (response) {
return response['odata.count'];
},
model: {
fields: {
ID:"ID",
ID: { editable: false },
Name: { type: "string", editable: true, nullable: false, validation: { required: true } },
Roles: { type: "string" }
}
}
}
},
height: 430,
scrollable: {
virtual: true
},
toolbar: ["create"],
editable: "popup",
sortable: true,
columns: [
{ field: "Name", title: "UserName", width: 110 },
{ field: "Roles", title: "Role", width: 160 },
{ command: ["edit", "destroy"], title: " ", width: "160px" }
]
});
});
</script>
},
method of api controller is:
// DELETE api/usermanage/5
public void Delete(int id)
{
var name = db.UserProfiles.Find(id);
Membership.DeleteUser(name.UserName,true);
}
but it doesn't works, what i doing wrong?
All of your command urls are pointing to url: "/api/Usermanage/"
This has to be specific to your action inside of the controller so in this case it should be:
url: function (UserModel) {
return "/api/Usermanage/Delete/" + UserModel.ID
},