I am trying to add the data using kendo popup. it's adding to the datasource(please see the grid bottom-right side) but it's not showing in the value in the Grid Row. Please help me to achieve this. Source Code: This code will kendo editor - http://dojo.telerik.com/
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
"dataSource": {
"batch": "TRUE",
"schema": {
"model": {
"id": "id",
"field": {
"id": {
"editable": "FALSE",
"nullable": "FALSE"
},
"cusAddTelephone": {
"editable": false,
"type": "string"
}
}
}
},
"table": null,
"fields": [
{
"encoded": true,
"field": "cusAddTelephone",
"title": "Telephone"
},
{
"encoded": true,
"title": " ",
"command": [
"destroy",
"edit"
]
}
],
"pageSize": "TRUE",
"data": [
{
"cusAddTelephone": "Joe Smith"
},
{
"cusAddTelephone": "Jane Smith"
},
{
"cusAddTelephone": "Will Roberts"
}
]
},
"columns": [
{
"field": "cusAddTelephone",
"title": "Telephone"
},
{
"title": " ",
"command": [
"destroy",
"edit"
]
}
],
"sortable": "TRUE",
"editable": "popup",
"toolbar": [
{
"name": "create",
"text": "add a new contact"
}
],
"groupable": "TRUE",
"pageable": {
"pageSize": "TRUE",
"buttonCount": "5",
"schema": "TRUE"
}
});
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
