Hello,
I'm trying to use kendo grid with angularjs and webApI
From days of typing and searching I want to understand why when posting I get all field as null parameters
I'm still don't understand kendo grid very well
so, I appropriate any help..
Model:
public class EmployeesInfo
{
public EmployeesInfo() { }
//[Required]
public int ID { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public int Phone { get; set; }
public string Job { get; set; }
public string Department { get; set; }
}
View:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Try</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">
<script src="http://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<h3 style="font-style:italic;color:#F35800"> Information </h3>
<br />
<div ng-controller="MyCtrl">
<kendo-grid
k-options="mainGridOptions"
k-data-source="DS"
k-on-change="onChange(kendoEvent)"
k-on-save="onSave(kendoEvent)"
k-selectable="true">
</kendo-grid>
</div>
</div>
<script>
var app = angular.module("KendoDemos", ["kendo.directives"]);
app.controller("MyCtrl",
function($scope) {
$scope.DS = new kendo.data.DataSource({
transport: {
contentType: "application/json",
read: {
url: "/api/EmployeesInfoes",
dataType: "json",
type: "GET"
},
update: {
url: "/api/EmployeesInfoes/PutEmployeesInfo",
dataType: "json",
type: "PUT"
},
destroy: {
url: "/api/EmployeesInfoes/DeleteEmployeesInfo",
dataType: "json",
type: "DELETE"
},
create: {
url: "/api/EmployeesInfoes/PostEmployeesInfo",
dataType: "json",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
console.log(kendo.stringify(options.models));
console.log(JSON.stringify(options.models));
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 8,
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false, nullable: false, type: "number" },
Name: { editable: true, nullable: false,type: "string", validation: { required: true } },
}
}
}
});
// $scope.onSave = function (e,) {
// Disable the editor of the "id" column when editing data items
// console.log(e);
// }
//$scope.onChange = function(e) {
// alert("on change");
//};
$scope.mainGridOptions = {
dataSource: $scope.DS,
// dataBound:function(e){
// $('.k-grid-add').unbind("click");
// $('.k-grid-add').bind("click", function() {
// console.log("Handle the add button click");
// });
//},
toolbar: ["create"],
columns: [
{ field: "ID", title: "ID", width: "180px" },
{ field: "Name", title: "Name", width: "180px" },
{ field: "Age", title: "Age", width: "180px" },
{ field: "Phone", title: "Phone", width: "180px" },
{ field: "Job", title: "Job", width: "180px" },
{ field: "Department", title: "Department", width: "180px" },
{ command: ["edit", "destroy"], title: "Actions", width: "250px" }
],
editable: "popup",
pageable: true,
filterable: { mode: "row" },
};
});
</script>
</body>
</html>
Controller:
public class EmployeesInfoesController : ApiController
{
private DetailGridContext db = new DetailGridContext();
// GET: api/EmployeesInfoes
public IQueryable<EmployeesInfo> GetEmployees() {
return db.Employees;
}
// GET: api/EmployeesInfoes/5
[ResponseType(typeof(EmployeesInfo))]
public async Task<IHttpActionResult> GetEmployeesInfo(int id)
{
EmployeesInfo employeesInfo = await db.Employees.FindAsync(id);
if (employeesInfo == null)
{
return NotFound();
}
return Ok(employeesInfo);
}
// PUT: api/EmployeesInfoes/5
[ResponseType(typeof(void))]
public async Task<IHttpActionResult> PutEmployeesInfo(int id, EmployeesInfo employeesInfo)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != employeesInfo.ID)
{
return BadRequest();
}
db.Entry(employeesInfo).State = EntityState.Modified;
try
{
await db.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!EmployeesInfoExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}
// POST: api/EmployeesInfoes
[ResponseType(typeof(EmployeesInfo))]
public async Task<IHttpActionResult> PostEmployeesInfo
([FromBody]EmployeesInfo employeesInfo)
{
if (!ModelState.IsValid) {
return BadRequest(ModelState);
}
db.Employees.Add(employeesInfo);
await db.SaveChangesAsync();
return CreatedAtRoute("DefaultApi", new { id = employeesInfo.ID }, employeesInfo);
}
// DELETE: api/EmployeesInfoes/5
[ResponseType(typeof(EmployeesInfo))]
public async Task<IHttpActionResult> DeleteEmployeesInfo(int id)
{
EmployeesInfo employeesInfo = await db.Employees.FindAsync(id);
if (employeesInfo == null)
{
return NotFound();
}
db.Employees.Remove(employeesInfo);
await db.SaveChangesAsync();
return Ok(employeesInfo);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool EmployeesInfoExists(int id)
{
return db.Employees.Count(e => e.ID == id) > 0;
}
}
3 Answers, 1 is accepted
Rank 1
Note:
Read operation work with me.
When perform create Api receive null field.
Rank 1
I am sorry to see that you are frustrated with the time that it took us to get back to you so below you can read more about the response time of the team.
The Kendo UI team handles the support tickets in the time that they are due.
The forums have a 48 hours response time - from Monday to Friday. So if a forum thread is submitted on Friday evening at 7 PM, it will be due on Tuesday by 7 PM.
On the other hand, private support tickets usually have 24 hours response time Monday through to Friday, unless it is trial account. The trial accounts have a 72 hours response time for private tickets so for you it is quicker to use the forums.
I have already responded to you in the other thread that you have posted. This one will be closed as it is a duplicated post.
In case you have further questions, I will be sure to answer them here:
https://www.telerik.com/forums/kendo-grid-returning-null-values-in-my-model-on-web-api-end#c4yq5jCfUEOXKb1CoX8myg
Kind Regards,
Alex Hajigeorgieva
Progress Telerik