Kendo grid post and delete send null to controller - asp.net-web-api

I'm posting a kendoui web grid and it isn't sending data and I can't see what I'm doing different from the sample that's failing. I'm posting to the controller, but it's either empty (if batch: true or null if batch: false)
var crudServiceBaseUrl = "api/Certifications/",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + member.id,
dataType: "json"
},
update: {
url: crudServiceBaseUrl,
type: "Post",
dataType: "json"
},
destroy: {
url: crudServiceBaseUrl,
type: "Delete",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
create: {
url: crudServiceBaseUrl,
type: "Post",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
editable: { //disables the deletion functionality
update: true,
destroy: true
},
batch: true,
pageSize: 30,
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
MemberId: { editable: false, nullable: true },
Name: { validation: { required: true} },
AuthorityName: { validation: { required: true} },
StartDate: { type: "date", validation: { required: true} },
EndDate: { type: "date" }
}
}
}
});
$("#certifications").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 300,
toolbar: ["create"],
columns: [
{ field: "Name", title: "Product Name", width: 250 },
{ field: "AuthorityName", title: "Authority", format: "{0:c}", width: "140px" },
{ field: "StartDate", title: "Earned", template: '#= kendo.toString(StartDate,"MM/dd/yyyy") #', width: 50 },
{ field: "EndDate", title: "Expired", template: '#= kendo.toString(EndDate,"MM/dd/yyyy") #', width: 50 },
{ command: ["edit", "destroy"], title: " ", width: "130px" }],
editable: "popup"
});
the web api:
public Certification DeleteCertification(CertificationVm cert)
{
var model = Uow.Certifications.Get(cert.Id);
if (model == null)
throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NoContent));
Uow.Certifications.Delete(model);
Uow.Commit();
return model;
}

I'd figured it out, although I had to depart from the example http://demos.kendoui.com/web/grid/editing-popup.html
The fix was add the content type, correctly use dataType: "json" as noted above, change from batch: true to batch: false and change the parameter map to the below
destroy: {
url: crudServiceBaseUrl,
type: "Delete",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
parameterMap: function (model, operation) {
if (operation !== "read" && model) {
return kendo.stringify(model) ;
}
}

There is no such thing as jsonp + POST - it is discussed here.
Do not use jsonp unless you really know why you need it.

Related

Kendo UI posting null values to paramter in web api controller method

I am using the following code in cshtml,
Controller display null value in parameter,
I require values to be populated in controller method parameter,
Please help
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var crudServiceBaseUrl = "http://localhost:49885/api",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Suppliers",
dataType: "json",
type: "Get"
},
update: {
url: function(data) {
debugger;
//return crudServiceBaseUrl + "/Suppliers/" + JSON.stringify(data.models[0]);
return crudServiceBaseUrl + "/Suppliers";
},
dataType: "json",
type: "Put",
contentType: "application/json"
},
destroy: {
url: function(data) {
debugger;
return crudServiceBaseUrl + "/Suppliers/" + JSON.stringify(data.SupplierId);
//return crudServiceBaseUrl + "/Suppliers";
},
//url: crudServiceBaseUrl + "/Suppliers",
dataType: "json",
type: "Delete",
contentType: "application/json"
},
create: {
url: function (data) {
debugger;
//return crudServiceBaseUrl + "/Suppliers/" + JSON.stringify(data);
return crudServiceBaseUrl + "/Suppliers";
},
//url: crudServiceBaseUrl + "/Suppliers",
dataType: "json",
type: "Post",
contentType: "application/json",
//data: JSON.stringify([data.SupplierId, data.CommId])
},
parameterMap: function(options, operation) {
debugger;
if (operation !== "read" && options) {
return { models: JSON.stringify(options) };
}
}
},
batch: false,
pageSize: 20,
schema: {
data: function(data) { //specify the array that contains the data
return data || [];
},
errors: function(response) {
return response.error;
},
model: {
id: "SupplierId",
fields: {
SupplierId: { validation: { required: true } },
CommId: { validation: { required: true } },
EmailId: { validation: { required: true } },
FullName: { validation: { required: true } },
FirstName: { validation: { required: true } },
Description: { validation: { required: true } },
LastName: { validation: { required: true } },
StateId: { validation: { required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
sortable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"SupplierId",
{ field: "SupplierId", title: "SupplierId", width: 120 },
{ field: "CommId", title: "CommId", width: 120 },
{ field: "EmailId", title: "EmailId", width: 120 },
{ field: "FullName", width: 120 },
{ field: "FirstName", width: 120 },
{ field: "Description", width: 120 },
{ field: "LastName", width: 120 },
{ field: "StateId", width: 120 },
{ command: "destroy", title: " ", width: 150 }
],
editable: true
});
});
</script>
<div id="example">
<div id="grid"></div>
</div>

InCell Editing in Kendo UI and Web API

I am new to Web API and Kendo UI. My requirement is InCell Editing. I have implemented this with below reference links. But my problem is In controller action method i am getting count of employee as 0. I am not any other things means edited rows.
http://demos.telerik.com/kendo-ui/grid/editing
http://demos.telerik.com/aspnet-mvc/grid/editing
and another way I tried with below reference. But here also in JQuery I am getting what I updated rows. but when passing data to controller through AJAX call in controller I am getting count as 0. Please can you help this.
http://stackoverflow.com/questions/17033025/kendo-grid-batch-editing-making-a-single-call-to-save
Here is my code:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Employee/GetEmployee",
dataType: "json"
},
create: {
url: "/api/Employee/CreateEmployee",
dataType: "json",
type: "POST",
complete: function (jqXhr, textStatus) {
// Do something
}
},
update: {
url: "/api/Employee/Update",
dataType: "json",
type: "POST",
complete: function (jqXhr, textStatus) {
// Do something
}
},
destroy: {
url: "/api/Employee/DeleteEmployee",
dataType: "json",
type: "DELETE",
complete: function (jqXhr, textStatus) {
// Do something
}
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 12,
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, type: "number" },
EmployeeId: {
editable: true, type: "text", validation: {required: true },
},
EmployeeName: { validation: { required: true } }
}
}
}
});
if (container.find('#gridEmployee').data().kendoGrid)
container.find('#gridEmployee').data().kendoGrid.destroy();
container.find("#gridEmployee").kendoGrid({
dataSource: dataSource,
pageable: true,
// toolbar: [{ text: "Add new Employee", className: "btn btn-primary grid-add-new-record" }, { text: "Save", className: "btnKendoUiSave" }],
toolbar: ["create", "save", "cancel"],
columns: [
{
command: [
//define the commands here
{ name: "edit", text: " " }, { name: "destroy", text: " " }, { name: "update", text: " ", click: showDetails }], width: "200px"
},
{ field: "EmployeeId", title: "Employee Id", format: "{0:0}", headerAttributes: { "data-localize": "FIELD_NUMBER" } },
{ field: "EmployeeName", title: "Employee Name", headerAttributes: { "data-localize": "FIELD_NAME" } },
],
editable: true,
});
Web API Controller:
[HttpPost]
public System.Web.Mvc.JsonResult Update([System.Web.Mvc.Bind(Prefix = "models")]List<PlantEmployeeModel> Employees)
{
//
}

Giving a unique ID on create new row for the kendo grid in the JS

I have a kendo grid.. It works fine.. But when I create a new row in the grid I need to provide a unique ID (integer is fine but not a duplicate one eg. 0, 1, 2, 3.. ) to save. At the moment when I get data from backend I count the number of rows and keep it in the session. And when an user requests for new row, I read the session and find the number of rows there and add 1 to create a unique ID. Is there any elegant way of giving a unique ID for the grid in the JS without using the session. Thanks in advance.
$("#TrainingDetailsGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: "GetTrainingDetailsData",
datatype: "json",
type: "POST",
contentType: "application/json"
},
create: {
url: "UpdateTrainingDetailsData",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json"
},
update: {
url: "UpdateTrainingDetailsData",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json"
},
parameterMap: function (data, operation) {
if (operation != "read") {
return kendo.stringify(data.models);
}
}
},
pageSize: 5,
serverPaging: false,
batch: true,
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false },
Description: { editable: true, nullable: false, validation: { required: true } },
Instructor: { editable: true, nullable: false, validation: { required: { message: "Instructor name is required" } } },
Trainee: { editable: true },
TimeSpent: { editable: true, type: "number", validation: { required: { message: "Hours are required" }, min: 0, step: 0.25 } },
}
},
errors: "Errors"
},
error: function (e) {
alert(e.errors + "TrainingDetailsGrid");
}
},
groupable: false,
autoBind: false,
sortable: true,
toolbar: ["create"],
editable: "inline",
pageable: {
refresh: true,
pageSizes: true
},
dataBound: onDataBound,
columns:
[
{ field: "Description", width: 90, title: "Description" },
{ field: "Instructor", width: 90, title: "Instructor" },
{ field: "Trainee", width: 90, title: "Trainee" },
{ field: "TimeSpent", width: 90, title: "Hours" },
{ command: ["edit"], title: "Action", width: "175px" }
]
});
In your parameterMap you can count the number of rows you have in the Grid and put the value in the model before you pass it to the server side.
parameterMap: function (data, operation)
{
if (operation != "read") {
if (operation == "create") {
if ($("#TrainingDetailsGrid").data("kendoGrid").dataSource.total() > 0) {
data.models[0].ID = $("#TrainingDetailsGrid").data("kendoGrid").dataSource.total() - 1;
}
else {
data.models[0].ID = 0;
}
}
return kendo.stringify(data.models);
}
}

Kendo UI DataSource not triggering transport.destroy

I am using Kendo UI with ASP.NET Web API. There is a ProjectsController that has all the necessary methods.
My issue is that when I click on Delete button, Kendo UI grid will raise remove() event, but DataSource never invokes transport.destroy. Rather, it seems that tansport.create is being invoked. In transport.parameterMap I can see that the operation is create instead of destroy.
Here is a sample JavaScript code:
$(document).ready(function () {
var apiUrl = '/api/projects/';
var dataType = 'json';
var dataSource = new kendo.data.DataSource({
batch: true,
autoSync: false,
transport: {
read: {
url: apiUrl,
dataType: dataType,
type: "GET"
},
update: {
url: apiUrl,
dataType: dataType,
type: "PUT"
},
destroy: {
url: apiUrl,
type: "DELETE"
},
create: {
url: apiUrl,
contentType: "application/json;charset=utf-8",
dataType: dataType,
type: "POST"
},
parameterMap: function (data, operation) {
console.log("Operation: " + operation);
if (operation === "create" && data.models) {
for (var i in data.models) {
var model = data.models[i];
if (model.ProjectId === 0) {
return kendo.stringify(model);
}
}
} else if (operation === "destroy") {
console.log("Data.Models: " + data.models);
console.log("Data.id: " + data.ProjectId);
return { id: data.ProjectId };
}
return data;
}
},
schema: {
id: "ProjectId",
model: {
fields: {
ProjectId: { type: "number", editable: false, nullable: false, defaultValue: 0 },
ProjectName: { type: "string", validation: { required: true } },
Status: { type: "string", validation: { required: true } },
IsActive: { type: "boolean" }
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false
});
$("#projectsGrid").kendoGrid({
dataSource: dataSource,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
pageSize: 10,
toolbar: ["create"],
editable: "popup",
columns: [
{ field: "ProjectId", width: 30, title: "ID" },
{ field: "ProjectName", width: 180, title: "Project" },
{ field: "Status", width: 90, title: "Status" },
{ field: "IsActive", width: 40, title: "Is Active", type: "boolean", template: '<input type="checkbox" #if (IsActive) {# checked="checked" #}# disabled="disabled" />' },
{ command: ["edit", "destroy"], title: "&nbsp", width: "80px" }
],
remove: function (e) {
console.log("Delete button clicked.");
console.log("Project ID: " + e.model.ProjectId);
//dataSource.remove(e.model);
//dataSource.sync();
}
});
});
Web API works fine when requests are issued via Fiddler, but Kendo UI Grid shows:
POST http://localhost:port/api/Projects
when it should be DELETE.
Thanks everyone in advance!
On your datasource, you have the batch flag set to true, this means the datasource will make the call only after you tell it to, e.g calling sync().
http://docs.kendoui.com/api/framework/datasource#configuration-batch
As well as
Make sure you have defined Id in the model, as OnaBai explained here Why does the KendoUI Grid Transport Create event gets raised multiple times, and even when the action is Update? , your id is outside the model, should be in :
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
}
}
if someone has defined the id in model as answered in above ,but dataSource not triggering transport.destroy yet ,below configuration could be helpful:
editable: {
..
mode: "inline", //or "popup
...
}
//or
editable: "inline" //or "popup"
http://www.telerik.com/forums/transport-destroy-of-grid-editor-is-not-working

Kendoui grid, datasource and restful service

Q1: I'm trying to get the kendoui grid bound to a datasource talking to a restful service, (using servicestack). All is working ok except when I call PUT and the rest service sends back the persisted poco object I get a strange javascript error and you do not get to the success method of the datasource.
Error is
Uncaught SyntaxError: Unexpected number kendo.all.min.js:9
extend.setter kendo.all.min.js:9
o.extend._set kendo.all.min.js:9
T.extend.accept kendo.all.min.js:9
o.extend._accept kendo.all.min.js:9
(anonymous function) kendo.all.min.js:9
n jquery.min.js:2
o.fireWith jquery.min.js:2
o.fire jquery.min.js:2
g.(anonymous function).call.c.success kendo.all.min.js:9
n jquery.min.js:2
o.fireWith jquery.min.js:2
w jquery.min.js:4
d
The datasource/grid configuration looks like
$(document).ready(function () {
var crudServiceBaseUrl = "/api/configuration/databaseconnections";
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: function (db) {
console.log(db);
return crudServiceBaseUrl + "/" + db.Id;
},
type: "PUT",
success: function (result) {
console.log(result);
}
//dataType: "json"
},
destroy: {
url: function (db) {
return crudServiceBaseUrl + "/" + db.Id;
},
type: "DELETE",
//dataType: "json"
},
create: {
url: function (db) {
return crudServiceBaseUrl + "/" + db.Id;
},
type: "PUT",
//dataType: "json"
},
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string" },
ConnectionString: { type: "string" },
DatabaseType: { type: "string" },
ProfileConnection: { type: "string" },
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false,
model: {
id: "Id",
fields: {
ConnectionString: { editable: true },
DatabaseType: { editable: false, nullable: false, validation: { required: true } },
ProfileConnection: { editable: false, nullable: false, validation: { required: true } },
}
}
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
reorderable: true,
resizable: true,
toolbar: ["create"],
columns: [{
field: "Id",
filterable: false,
width: 150,
},
{
field: "ConnectionString",
title: "Connection String",
filterable: false,
}, {
field: "DatabaseType",
title: "Type",
width: 100
},
{
field: "ProfileConnection",
title: "Profile",
width: 100
},
{ command: ["edit", "destroy"], title: " ", width: "210px" }
],
editable: "popup"
});
});
Q2: Anyone have an idea or a sample of the kendoui datasource working with a crud rest service ?
Q1: As you mentioned in your comment you found the problem.( ";" in connection string)
Q2: But for second question, download and check this sample code (Binding grid to a Web ApiController) it may help you or others refer here.

Resources