i am try to use grid view with inline editing function.
now i have write this code:-- on cshtml.
<script>
$(document).ready(function () {
$("#countryzone-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("ParticipatingCountry", "Program", new {id = Model.Id } ))",
type: "POST",
dataType: "json",
contentType: "application/json"
},
create: {
url: "@Html.Raw(Url.Action("EditCountries", "Program"))",
type: "POST",
dataType: "json"
},
update: {
url:"@Html.Raw(Url.Action("SettingUpdate", "Setting"))",
type: "POST",
dataType: "json"
},
destroy: {
url: "@Html.Raw(Url.Action("SettingDelete", "Setting"))",
type: "POST",
dataType: "json"
},
parameterMap: function(data, operation) {
if (operation != "read") {
return data;
} else {
//for some reasons only such "Filter" data be parsed
return JSON.stringify(data);
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
CountryId: { editable: true, type: "number" },
CountryName: { editable: true, type: "string"},
PointsValue: { editable: true, type: "number"},
Id: { editable: false, type: "number" },
ProgramId: { editable: false, type: "number" }
}
}
},
requestEnd: function (e) {
if (e.type == "create" || e.type == "update") {
this.read();
}
},
error: function (e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true
},
sortable: true,
toolbar: ["create"],
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
columns:[{
field: "CountryId",
title: "Admin.Program.participatingCountryName",
editor: countryDropDownEditor,
template: "#:Store#"
},{
field: "PointsValue",
title: "Admin.Program.PointsValue"
},{
command: ["edit", "destroy"], title: "",width: "200px"
}]
});
});
function countryDropDownEditor(container, options) {
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:CountryId"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
type: "json",
transport: {
read: {
dataType: "json",
type: 'POST',
url:
"@Html.Raw(Url.Action("DropDownListCountries", "Program", new {id =
Model.ClientId } ))"
}
}
}
});
}
</script>
by this code when i click on update button there is an ajax call
this is data of post tab in ajax call ( view on browser by firebug)
CountryId 0
CountryName
Id 0
PointsValue 2
ProgramId 0
there is data 0 and 2
on controlller side my code is
[HttpPost]
public ActionResult EditCountries([Bind(Exclude = "Id")] ParticipatingCountryModel model) <== Here i put break point
{
return null;
}
by break point i see that there is ajax call come means action call but there is an empty model ,,, alll values are 0, there is an value 2 but there is 0 why?
is am i doing wrong?
Please advice how to do?
Regard,
vinit
4 Answers, 1 is accepted
Basically you should use custom parameterMap function which to format the data in a way that can be understand by the MVC default ModelBinder. That why In current case I would suggest to use the Grid wrapper for ASP.NET MVC as it supports (out of the box) CRUD operations with MVC Controller:
For more information about the MVC wrappers you can check the following help articles:
Regards,
Vladimir Iliev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Rank 1
Hello Vladimir,
Ajax enabled grid with the grid MVC wrapper are using async calls. Is there an option to switch to non-async Ajax calls?
I'm currently tried something comparable to Krunal, using javascript dataource definition but I don't know how to setup the parameterMap function which works with a MVC controller create/update/destroy method. May you give an example for the update method ?
Yours
Stephan
Please check the answers of your questions below:
1) The topic is already discussed in the following thread at StackOverflow:
2) Such examples are available in the following repository at GitHub:
Regards,
Vladimir Iliev
Telerik
Rank 1
Hello Vladimir,
thanks for the links. Using these links, I was able to use javascript based datasource definition together with MVC controller methods. The datasource in my case looks like this:
var l_dataSource = new kendo.data.DataSource({
transport: {
read: {
async: false,
url: function (data) {
return "/Home/SelectedCriteria_Read";
},
dataType: "json",
method: "GET",
},
create: {
async: false,
url: function (data) {
return "/Home/SelectedCriteria_Create";
},
dataType: "json",
method: "POST",
},
update: {
async: false,
url: function (data) {
return "/Home/SelectedCriteria_Update";
},
dataType: "json",
method: "POST",
},
destroy: {
async: false,
url: function (data) {
return "/Home/SelectedCriteria_Destroy";
},
dataType: "json",
method: "POST",
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: false, type: "Number" },
Columnname: { editable: false, nullable: false, type: "String" },
Title: { editable: true, type: "String" },
Hidden: { editable: false, type: "Boolean" },
Singlevalue: { editable: true, type: "String" },
Datatype: { editable: false , type: "String" },
}
},
data: "Data",
total: "Total",
errors: function (response) {
return response.error;
},
},
error: function (e) {
console.log(e.errors); // displays "Invalid query"
},
pageSize: 10000,
batch: true,
});
The MVC CRUD controller methods are defined like the following pattern:
public JsonResult SelectedCriteria_Read([DataSourceRequest]DataSourceRequest request)
{
... some logic...
return Json([List<your class>].ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
public JsonResult SelectedCriteria_Update([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")] List<your class> shc)
{ ... some logic ...
return Json([List<your class>].ToDataSourceResult(request, ModelState));
}
public JsonResult SelectedCriteria_Create([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")] List<your class> shc)
{ ... some logic ...
return Json([List<your class>].ToDataSourceResult(request, ModelState));
}
public JsonResult SelectedCriteria_Destroy([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")] List<your class> shc)
{ ... some logic ...
return Json([List<your class>].ToDataSourceResult(request, ModelState));
}
Now, this works for me.