Hi There,
I'm trying to get the ProductName from 'edit' from on click event and I want to take that pass it as a parameter to my controller, however,
it looks like the drop-down editor function is being executed first before the 'edit' click event. So if you try and run the code below, it will not pick up any value when edit command is clicked. Basically, I want to do a query using the ProductName before populating my drop-down list.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
var cat = '';
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
{ command: "edit", title: " ", width: "150px" }],
editable: "inline",
edit: function(e) {
var model = e.model; //reference to the model that is about the be edited
cat = model.ProductName;
alert(cat);
cat = model.ProductName;
var container = e.container; //reference to the editor container
var categoryDropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList"); //find widget element and then get the widget instance
// if DropDownListwidget is found
if (categoryDropDownList) {
//use DropDownList API based on the model values to accomplish your bussiness requirement.
//link: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist
console.log("DropDownList", categoryDropDownList);
}
var priceNumericTextBox = container.find("[data-role=numerictextbox]").data("kendoNumericTextBox"); //find widget element and then the widget instance
if (priceNumericTextBox) {
//use NumericTextBox API
//link: http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox
console.log("NumericTextBox", priceNumericTextBox);
}
}
});
});
function categoryDropDownEditor(container, options) {
alert(cat);
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
//url: "@Html.Raw(Url.Action("MyAction", "MyController", new {Id = Model, Cat = Cat }))",
}
}
});
}
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
Based on the provided information I assume that the requirement is to access a certain field of the currently edited record. Please correct me if I am wrong.
The options parameter of the editor function contains a reference to the edited model, therefore you can access all fields of the record through the options.model property:
function categoryDropDownEditor(container, options) { var catergory = options.model.ProductName; $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ autoBind: false, dataSource: { type: "odata", transport: { } } });}Below you will find a modified version of the provided code:
Please try out the above approach and let me know how it works for you.
I look forward to your reply.
Regards,
Georgi
Progress Telerik
Rank 1