Unhandled exception at line 11, column 31201 in http://localhost:60267/Scripts/kendo.web.min.js
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'editable': object is null or undefined
Who could help?
<script>
function siteDropDownEditor(container, options) {
$('<input required data-text-field="SiteName" data-value-field="SiteId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
transport: {
read: {
url: "/Employee/PopulateSiteList",
dataType: "json"
}
}
}
});
}
$(document).ready(function() {
$("#gridEmployeeList").kendoGrid({
dataSource: {
serverPaging: false,
serverSorting: false,
pageSize: 300,
transport: {
read: {
url: "/Employee/PopulateEmployeeList",
dataType: "json"
},
update: {
url: "/Employee/EmployeeUpdate",
dataType: "json"
}
//destroy: {
// url: "/Destroy",
// dataType: "json"
//},
//create: {
// url: "/Create",
// dataType: "json"
//}
}
},
height: 648,
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
selectable: "row",
toolbar: ["create"],
editable: "inline",
resizable: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: false },
LohikaId: { editable: true, nullable: false, type: "string" },
LastName: { validation: { required: true }, editable: true, type: "string" },
FirstName: { validation: { required: true }, editable: true, type: "string" },
Site: { validation: { required: true }, editable: true, type: "string" },
Email: { validation: { required: true }, editable: true, type: "string" },
StartDate: { validation: { required: true }, editable: true, type: "date" },
EndDate: { validation: { required: false }, editable: false, type: "date" },
IsAdvocate: { validation: { required: true }, type: "number" },
NonActive: { validation: { required: true }, type: "number" },
DomainNameLastName: { validation: { required: true }, editable: true, type: "string" }
}
}
},
columns: [
{
field: "id",
attributes: {
style: "display: none"
},
headerAttributes:{
style: "display: none"
}
},
{ field: "LohikaId", title: "LohikaId"},
{ field: "LastName", title: "Last Name"},
{ field: "FirstName", title: "First Name"},
{ field: "Site",
title: "Site",
editor: siteDropDownEditor,
template: "#=Site.SiteName#"
},
{ field: "Email", title: "Email" },
{ field: "StartDate", title: "Start Date",
type: "date",
template: '#= kendo.toString(StartDate,"dd/MM/yyyy") #',
attributes: {
style: "text-align: right"
}
},
{
field: "EndDate", title: "End Date",
editable: true,
type: "date",
template: '#= kendo.toString(EndDate,"dd/MM/yyyy") #',
attributes: {
style: "text-align: right, display: none"
}
},
{ field: "IsAdvocate", title: "IsAdvocate", type:"boolean", template: "<input type=\"checkbox\" # if(IsAdvocate){ # checked #} # />" },
{ field: "NonActive", title: "Is Term", type: "boolean", template: "<input type=\"checkbox\" # if(NonActive){ # checked #} # />" },
{ field: "DomainName", title: "DomainName" },
{
command: ["edit", "destroy"],
attributes: {
style: "width: 190"
},
headerAttributes:{
style: "width: 190"
}
}
]
});
});
</script>
<div id="gridEmployeeList" ></div>
3 Answers, 1 is accepted
I believe the issue is caused by the schema that is defined in the Grid's configuration while it is part from the DataSource. Please define the schema in the DataSource (as shown in our online demos) and let me know if you still observe any problems.
Kind regards,
Iliana Nikolova
the Telerik team
Rank 1
how to edit a kendo grid row by double clicking required row?
please refer this code,in that i need instead of editable: "incell" / true / "inline"
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
var myGrid = $('#grid').data("kendoGrid");
myGrid.element.delegate("tbody>tr", "dblclick", function () {
myGrid.editRow($(this));
});
</script>
</div>
</body>
</html>
​
This question is not related to the initial one in this thread. Also, I observed that you opened another thread on the same subject - I would suggest this discussion in the other thread (983479). Thank you in advance for your cooperation.
Regards,
Iliana Nikolova
Telerik