This is a migrated thread and some comments may be shown as answers.

Editable property

3 Answers 401 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Rafael asked on 24 Jan 2013, 01:58 PM

When i click on save/cancel button after editing I am getting js error

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

answered on 30 Oct 2015, 12:05 PM

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>