Requirement: How to get selected drop down value in kendo grid while updating records
By using kendo editor i have implemented dropdown in grid column and i want to save datavaluefiled value
Datasource
ID:1,Interestname:cricket
Id:2,Interestname:football
while submiiting i need to save only value i:e Id
<html>
<head>
<title></title>
</head>
<body>
<div id="grid-container"></div>
#*Scripts*#
<script type="text/javascript">
$(document).ready(function () {
debugger
var gridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/KendoGrid/GetStudents",
dataType: "json"
},
update: {
url: "/KendoGrid/CreateOrUpdate",
dataType: "json"
},
create: {
url: "/KendoGrid/CreateOrUpdate",
dataType: "json"
},
destroy: {
url: "/KendoGrid/DeleteDetails",
dataType: "json"
},
parameterMap: function (options, operation) {
debugger
if (operation !== "read" && options) {
return options;
}
}
},
pageSize: 5,
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
Name: { editable: false, validation: { required: true } },
FatherName: { type: "text", validation: { required: true, min: 1 } },
DateOfBirth: { type: "date" },
Address: { type: "text", validation: { min: 0, required: true } },
Email: { type: "email", validation: { min: 0, required: true } },
Phone: { type: "text", validation: { min: 0, required: true } },
StudnetInterest: { type: "text", validation: { min: 0, required: true } }
}
},
parse: function (data) {
debugger
if (!data.success && typeof data.success !== 'undefined') {
//notifier.logixNotifier("notifyError", data.message);
gridDataSource.read();
}
if (data.success) {
//notifier.logixNotifier("notifySuccess", data.message);
gridDataSource.read();
}
return data;
}
}
});
$("#grid-container").kendoGrid({
dataSource: gridDataSource,
height: 550,
groupable: true,
sortable: true,
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5,
},
columns: [
{
field: "Name",
title: "Name",
editable: false
},
{
field: "FatherName",
title: "Father Name",
},
{
field: "DateOfBirth",
title: "Date Of Birth",
format: "{0:MM/dd/yyyy}"
},
{
field: "Address",
title: "Address",
},
{
field: "Email",
title: "Email",
},
{
field: "Phone",
title: "Phone",
attributes: { hideMe: true }
},
{
field: "StudnetInterest",
title: "Student Interest",
editor: interestsDropdown,
values: interestsDropdown
},
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
// editable: "inline"
editable: "popup"
});
});
#*drop down Data Source*#
var dropDownDataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
url: "/KendoGrid/GetInterest",
},
}
});
function interestsDropdown(container, options) {
debugger
$('<input required name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
.appendTo(container)
.attr('data-bind', 'value:Id')
.kendoDropDownList({
autoBind: false,
dataTextField:"InterestName",
dataValueField:"Id",
dataSource: dropDownDataSource,
});
}
function drop(event) {
debugger
var data= $("#dropintrest").data("kendoDropDownList");
}
</script>
</body>
</html>
I think you may be binding to the wrong property on your model. Also, try setting the valuePrimitive property of your drop down list to true:
$('<input required data-bind="value:' + options.field + '" name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField:"InterestName",
dataValueField:"Id",
dataSource: dropDownDataSource,
valuePrimitive: true
});
According to the documentation:
If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.
Hope this helps.
Related
I'm having problem with using Kendo UI Grid whenever I click on add new button it always produce this script error.
This is the code that I'm using:
dataSource = new kendo.data.DataSource({
batch: true,
pageSize: 20,
transport: {
read: {
url: 'SaladEntry/GetSupport2/',
dataType: "json"
},
destroy: {
url: 'SaladEntry/DeleteSupportKendo2/',
type: "POST",
contentType: 'application/json'
},
create: {
url: 'SaladEntry/SaveSupportKendo2/',
type: "POST",
contentType: 'application/json',
complete: function (e) {
SupportGrid();
}
},
update: {
url: 'SaladEntry/EditSupportKendo2/',
type: "POST",
contentType: 'application/json',
complete: function (e) {
SupportGrid();
}
},
parameterMap: function (options, operation) {
if (operation == "read") {
return saladparamObj;
}
else {
options.models[0].CountryNo = $('#Country_No').val();
var SaladParamSerialized = JSON.stringify(options.models);
return SaladParamSerialized;
}
}
},
schema: {
model: {
id: "PK",
fields: {
CountryNo: { editable: true, nullable: true },
EffectiveDate: { type: "date" },
stringEffectiveDate: { type: "string" },
ScaleMin: { validation: { required: true } },
ScaleMax: { validation: { required: true } },
Currency: { type: "string" }
}
}
},
sort: {
field: "stringEffectiveDate",
dir: "desc",
compare: function (a, b, dir) {
return kendo.parseDate(a.EffectiveDate) - kendo.parseDate(b.EffectiveDate);
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 300,
toolbar: ["create"],
columns: [
{
field: "stringEffectiveDate", title: "Date",
template: "#= kendo.toString(kendo.parseDate(EffectiveDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #", width: "100px",
sortable: {
allowUnsort: false,
compare: function (a, b, dir) {
return kendo.parseDate(a.EffectiveDate) - kendo.parseDate(b.EffectiveDate);
}
}
},
{ field: "EffectiveDate", title: "Effective Date", template: "#= kendo.toString(kendo.parseDate(EffectiveDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #", width: "100px" },
{ field: "ScaleMin", title: "BG1 Min", width: "100px" },
{ field: "ScaleMax", title: "BG7 Max", width: "100px" },
{ field: "Currency", title: "Currency", width: "100px" },
{ command: ["edit", "destroy"], title: "Commands", width: "160px" }
],
height: 300,
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
resizable: true,
selectable: true,
editable: "popup",
cancel: function (e) {
nEdit();
},
edit: function(e) {
e.container.find(".k-edit-label:first").hide();
e.container.find(".k-edit-field:first").hide();
if (!e.model.isNew()) {
var dt = e.container.find("input[name=EffectiveDate]").data("kendoDatePicker");
dt.enable(false);
}
}
}).css("background-color", "#C7D6A7");
No popup modal shown when I click on Add or Edit button. Below is the screenshot of my view.
.andSelf was removed in jQuery 3.0. You are referencing 3.1.1. You'll have to downgrade jQuery or find an update for Kendo.
I have a kendo ui grid and I am doing batch operation on it. In one of the columns I populating data in kendo dropdownlist. While editing when I change value of that dropdown, it is getting changed at the moment but when I click outside of the row, old value comes back. How to keep teh selected value in dropdown?
here is my code:
var rateScheduleItemGridDatasource = new kendo.data.DataSource({
transport: {
read: {
type: 'get',
url: config.apiServer + "api/RateSchedule/GetAllRateScheduleItems?rateScheduleId=" + selectedRateScheduleId,
dataType: "json"
},
destroy: {
type: 'delete',
url: function (options) {
$.ajax({
url: config.apiServer + "api/RateSchedule/DeleteRateScheduleItem?rateScheduleItemId=" + options.RateScheduleItemId,
type: 'delete',
data: ko.toJSON(options),
contentType: "application/json",
success: function (data) {
popupNotification.show(updateSuccessMessage, "success");
rateScheduleItemGridDatasource.read();
},
error: function (jqXHR, textStatus, errorThrown) {
popupNotification.show(updateFailureMessage, "error");
}
});
},
dataType: "json",
contentType: "application/json"
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
batch: true,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "RateScheduleItemId",
fields: {
RateScheduleItemId: { type: "number", editable: false, nullable: false },
RateScheduleId: { type: "number", editable: false, nullable: false, validation: { required: true } },
MathmetricalSymbolCode: { type: "number", nullable: true, editable: true, validation: { required: false } },
MathmetricalSymbolCodeValue: { type: "string", nullable: true, editable: true, validation: { required: false } },
MeasureTypeCode: { type: "number", nullable: true, editable: true, validation: { required: false } },
MeasureTypeCodeValue: { type: "string", nullable: true, editable: true, validation: { required: false } },
MultiplierRate: { type: "number", nullable: true, editable: true, validation: { required: false } },
RangeLowerNumber: { type: "number", nullable: true, editable: true, validation: { required: false } },
RangeUpperNumber: { type: "number", nullable: true, editable: true, validation: { required: false } },
RateTier: { type: "string", nullable: true, editable: false, validation: { required: false } }
}
}
}
});
$("#rateScheduleItemGrid")
.kendoGrid({
columns: [
{ "command": [{ name: "destroy", text: " " }], "width": "60px" },
{ "title": "Rate Tier", "width": "100px", "field": "RateTier" },
{ "title": "Operand", "width": "100px", "field": "MathmetricalSymbolCode", "editor": rateScheduleItemOperandDropDownEditor, "template": "#= (MathmetricalSymbolCodeValue == null ) ? ' ' : MathmetricalSymbolCodeValue#" },
{ "title": "Range Type", "width": "100px", "field": "MeasureTypeCode", "editor": rateScheduleItemRangeTypeDropDownEditor, "template": "#= (MeasureTypeCodeValue == null) ? ' ' : MeasureTypeCodeValue#" },
{ "title": "Range (From)", "width": "100px", "field": "RangeLowerNumber" },
{ "title": "Range (to)", "width": "100px", "field": "RangeUpperNumber" },
{ "title": "Rate (Multiplier)", "width": "100px", "field": "MultiplierRate" }
],
toolbar: kendo.template($("#rateScheduleGridItemTemplate").html()),
resizable: true,
editable: true,
groupable: false,
filterable: true,
pageable: {
pageSize: 10,
pageSizes: [10, 50, 100, 150, 200, 250]
},
sortable: true,
height: 200,
dataSource: rateScheduleItemGridDatasource,
cancel: function (e) {
dirty = false;
},
save: function (e) {
dirty = false;
}
});
function rateScheduleItemOperandDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "ReferenceValue",
dataValueField: "ReferenceValueId",
dataSource: rateScheduleItemOperandReferenceData,
optionLabel: "Select Operand"
});
}
function rateScheduleItemRangeTypeDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "ReferenceValue",
dataValueField: "ReferenceValueId",
dataSource: rateScheduleItemRangeItemReferenceData,
optionLabel: "Select Range Type"
});
}
You are binding your columns to MathmetricalSymbolCode and MeasureTypeCode but you have based the templates on MathmetricalSymbolCodeValue and MeasureTypeCodeValue...BUT...you have nothing that actually sets the value of MathmetricalSymbolCodeValue and MeasureTypeCodeValue so they forever remain null.
When you make your selection in your dropdownlist, you are selecting the value for the "Code" fields not the "CodeValue" fields...the grid and dropdownlist have no idea that those are key-value pairs.
Here's an example with your setup(tweaked so I can run it without access to your data) where I have the Operand column working:
http://dojo.telerik.com/#Stephen/OCEpa
There are 2 important points:
using valuePrimitive: true on the DropDownList config, which is kind of required if the value is nullable(http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-valuePrimitive)
After selecting the value in the dropdownlist(which returns the ID) you need to map that ID to the text you want to display in the cell somehow. The Kendo Grid provides the values for this purpose(http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.values)
Another possible solution is instead of binding to the MathmetricalSymbolCode number field, bind the column to a complex object consisting of both the Code and the CodeValue fields with an appropriate column template...but that's more complicated(especially hooking up the dropdownlist) and I only do it when I have to.
This is a very stupid and amateur question, but I used Telerik's CDN in my demo website and it works everywhere except IE,
and I wanted to know why this is happening.
I included all the files like
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
As you can see I tried doing it like they have done in their dojo examples and I also tried adding 'http://' but still the files don't seem to load in IE and I wanted to know why this happens because everywhere else the code seems to run flawlessly and if I give it a local source it works in IE also, I just wanted to know why CDN are not working in IE, am I missing something very basic ?
the rest of the code is
<%-- Main Body --%>
<form id="form1" >
<div id="grid"></div>
</form>
<%--End of Main Body --%>
<%-- Scripts --%>
<script>
var crudServiceBaseUrl = "http://localhost:50371/api";
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
change: function (e) {
if (e.action == "itemchange") {
if (e.field == "MonthsOfSalary" || e.field == "Salary") {
var item = e.items[0];
item.trigger("change", { field: "NetSalary" })
}
}
},
transport: {
read: {
url: crudServiceBaseUrl + "/CarDetails/GetCarDetails",
dataType: "json",
type: "GET"
},
update: {
url: crudServiceBaseUrl + "/CarDetails/UpdateCarDetails",
dataType: "json",
contentType: "application/json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: function (data) {
return data.models;
}
},
destroy: {
url: crudServiceBaseUrl + "/CarDetails/DeleteCarDetails",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: function (data) {
return data.models;
}
},
create: {
url: crudServiceBaseUrl + "/CarDetails/AddCarDetails",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: function (data) {
return data.models;
}
},
parameterMap: function (data, operation) {
if (operation === "update" || operation === "create" || operation === "destroy") {
return JSON.stringify(data.models);
}
return data;
}
},
batch: true,
schema: {
model: {
id: "DetailId",
Total: function () {
return this.get("MonthsOfSalary") * this.get("Salary");
},
fields: {
"DetailId": { editable: false, type: "number", nullable: false, validation: { required: true } },
"CarsId": { editable: false, type: "number", nullable: false, defaultValue: 1, validation: { required: true } },
"FirstName": { type: "string", nullable: false, validation: { required: true, required: { message: "Enter a First Name" } }, defaultValue: "First" },
"LastName": { type: "string", nullable: false, validation: { required: true, required: { message: "Enter a Last Name" } }, defaultValue: "Last" },
"PhoneNumber": { type: "number", nullable: false, validation: { required: true, min: 1000000000, max: 9999999999, required: { message: "Entera ten digit number" } }, defaultValue: 1111111111 },
"Email": { type: "string", nullable: false, validation: { email: true, email: { message: "Enter Email in a#a.com Format" }, required: true, required: { message: "Enter an Email" } }, defaultValue: "e#mail.com" },
"MonthsOfSalary": { type: "number", nullable: false, validation: { required: true, min: 1, max: 48, required: { message: "Enter a number between 1 & 48" } }, defaultValue: 1 },
"Salary": { type: "number", nullable: false, validation: { required: true, min: 1, max: 10000000, required: { message: "Enter a number between 1 & 1,00,00,000" } }, defaultValue: 1 },
"NetSalary": { editable: false, type: "number", nullable: false, validation: { required: true, min: 1, max: 480000000, required: { message: "Enter a number between 1 & 48,00,00,000" } }, defaultValue: 1 },
"CarName": { editable: true, type: "string", nullable: false, validation: { required: true }, defaultValue: "Ford" },
"CarColor": { editable: false, type: "string", nullable: false, validation: { required: true }, defaultValue: "Red" },
"BirthDate": { type: "date", nullable: false, validation: { required: true, required: { message: "Enter a Date" }, min: new Date(1989, 01, 01), max: new Date(), date: { message: "Enter a Valid Date" } }, defaultValue: new Date() },
"Car": { nullable: false },
}
}
}
});
$(function () {
var cars = [];
$.get(crudServiceBaseUrl + "/Cars/GetCars", function (data, status) {
cars = data;
});
$("#grid").kendoGrid({
dataSource: dataSource,
excel: {
fileName: "Kendo UI Grid Export.xlsx",
filterable: true
},
navigatable: true,
pageable: false,
height: 550,
navigatable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: false,
resizable: true,
sortable: true,
toolbar: ["create", "save", "cancel", "excel"],
columns: [
{
field: "CarName", title: "Car",
editor: function (container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
dataSource: {
data: cars
},
dataValueField: "Color",
dataTextField: "Name",
autobind: true,
});
}
},
{ title: "First Name", field: "FirstName" },
{ title: "Last Name", field: "LastName" },
{ title: "Phone Number", field: "PhoneNumber" },
{ title: "Email", field: "Email" },
{ title: "Months", field: "MonthsOfSalary" },
{ title: "Salary", field: "Salary" },
{ title: "Net Salary", field: "NetSalary", template: "#=Total() #"},
{ title: "Joining Date", field: "BirthDate", format: "{0:dd MMM yyyy}" },
{
title: "Select",
template: "<input type='checkbox' />"
},
{ command: [{ name: "destroy", text: "" }] }
],
editable: {
editable: true,
confirmation: true
},
});
});
});
</script>
<%-- End of Scripts --%>
I added the links in <head> tag and the code is in <body> tag, I removed some extra code for brevity.
From the official telerik website
Kendo widgets provide a WAI-ARIA support, which means that some
ARIA-specific attributes are added to the HTML element. When a widget
tries to add an ARIA attribute using jQuery's attr method, which in
turn calls the Element.setAttribute method, the Internet Explorer in
Compatibility mode will raise a JavaScript error with the following
message:
SCRIPT3: Member not found (in Internet Explorer 10+ in Compatibility
Mode) The problem is reported to Microsoft on
https://connect.microsoft.com/IE/feedback/details/774078. Also there
is a jQuery bug report where more information can be found.
Solution:
Option 1 - Force the Internet Explorer to use the Edge mode:add this below line in the head section so it makes the browser to use the latest version of internet explorer Edge Mode
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Option 2 - Path jQuery. The bug link is here Bug Link
For more information visit here Official Telerik
I am very new to Kendo and am having some difficulties.
I am having trouble creating a kendo grid where I can use the grid selection feature (http://demos.telerik.com/kendo-ui/grid/selection 2nd example) to do batch inline editing (http://demos.telerik.com/kendo-ui/grid/editing).
Essentially, I want to be able to select multiple CELLS (not rows - so the second example in the link above), and start typing to edit all of the selected cells.
The closest I've gotten so far is creating something where I can select multiple cells and press a button to generate a predetermined value, but this is not what I want.
$(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 } }
}
}
}
});
$("#cellSelection").kendoGrid({
dataSource: dataSource,
selectable: "multiple cell",
pageable: {
buttonCount: 5
},
scrollable: false,
navigatable: true,
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
});
});
Thanks for any help
I am trying to implement a custom editor for a column on a grid. The editor uses a DropdownList control.
I am able to get the Dropdown to show upon add/edit, however after making a selection and posting the json that is sent contains the default value, not the value that was selected.
My implementation is below it is an excerpt from a Razor page.
Can you help me figure out what I've done wrong here?
<div id="divGrid"></div>
<script>
$(document).ready(function () {
var dsGroupForm = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GroupForm_Read", "Settings")',
dataType: "json"
},
update: {
url: '#Url.Action("GroupForm_Update", "Settings")',
dataType: "json"
},
destroy: {
url: '#Url.Action("GroupForm_Destroy", "Settings")',
dataType: "json"
},
create: {
url: '#Url.Action("GroupForm_Create", "Settings")',
dataType: "json"
}
},
batch: false,
pageSize: 5,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "GroupFormId",
fields: {
GroupFormId: { editable: false, nullable: false },
AdGroupId: { required: false },
AdGroupDisplayName: { validation: { required: true } },
FormKey: { validation: { required: true } },
Ordinal: { validation: { required: true } },
FormType: { validation: { required: false } },
FormTypeDisplay: { defaultValue: { FormTypeName: "Form1", FormTypeId: "1" } },
FormProjectionId: { validation: { required: false } }
}
}
}
});
$("#divGrid").kendoGrid({
autobind: true,
dataSource: dsGroupForm,
pageable: true,
height: 430,
toolbar: [{ name: "create", text: "Add"}],
columns: [
{field: "AdGroupDisplayName", title: "Group" },
{ field: "FormKey", title: "Key" },
{ field: "Ordinal", title: "Ordinal", format: "{0:d}", width: "100px" },
{ field: "FormTypeDisplay", title: "Type", width: "150px", editor: formTypeDropDownEditor, template: "#=FormTypeDisplay.FormTypeName#" },
{ field: "FormProjectionId", title: "ProjectionId" },
{ command: [{ name: "edit", text: "Edit" }, { name: "destroy", text: "Remove" }], title: " ", width: "172px" }
],
editable: "inline"
});
});
var formTypeData = new kendo.data.DataSource({
data: [
{ FormTypeName: "Form1", FormTypeId: "1" },
{ FormTypeName: "Form2", FormTypeId: "2" },
{ FormTypeName: "Form3", FormTypeId: "3" }
]
});
function formTypeDropDownEditor(container, options) {
$('<input name="FormTypeDisplay" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "FormTypeName",
dataValueField: "FormTypeId",
dataSource: formTypeData
});
}
</script>
I was able to get it working using a MVC wrapper and by following this post:
http://www.sitereq.com/post/kendo-mvc-dropdown-lists-inside-inline-kendo-mvc-grids
The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.
I tried implementing the same logic using the javascript implementation but could not get it working.
Try this
function formTypeDropDownEditor(container, options) {
$('<input name="' + options.field + '" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "FormTypeName",
dataValueField: "FormTypeId",
dataSource: formTypeData
});
}