I know this question has been asked many times but I was unable to find an answer, please help.
1. I need to update a value of the column "ProductName" that is not editable. I need to do it when I change (select) value in the dropdown Category
2. Keep the grid row in edit mode because I will change other fields in the row
3. And then click Update button to update the grid row. Or cancel - to restore the original values in the row
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script>
</head>
<body>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: false,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true }, editable: false },
Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
function categoryDropDownEditor(container, options) {
$('<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: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
},
select: function() {
var grid = $("#grid").data("kendoGrid"),
model = grid.dataItem(this.element.closest("tr"));
model.ProductName = "changed";
}
});
}
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
Thank you for the example.
Please have in mind that setting editable false to the mode will not allow any changes to the model value.
In this scenario, I can suggest setting editable false to the Grid column. Still, note that this will change the value only after the update button is clicked and the row is re-rendered:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editable
I made an example demonstrating this:
http://dojo.telerik.com/EmeHel
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
thank you for reply.
I have found a perfect solution which is working to me.
Review: In edit mode I don't want to have a field CostCentreTitle to be editable and on dropdown CostCentre change event to be able to update a non editable value CostCentreTitle
1. Made a field CostCentreTitle editable
2.On the grid edit Edit event find CostCentreTitle and make it disabled plus change a background of the text box applying my "not-editable" class . I need it because I highlight a selected row.
.not-editable {
background-color: transparent;
border: 0px;
}
Grid edit event:
edit: function (e) {
//highlight edit row
gridElement.data("kendoGrid").select(".k-grid-edit-row");
var model = e.model,
container = e.container;
var CostCentreTitle = $('input[name *= "CostCentreTitle"]');
CostCentreTitle.attr('class', 'not-editable');
CostCentreTitle.attr("disabled", true);
},
and the change event of the dropdownCostCentre will update a value of my model
field: "CostCentre", title: "Cost Centre", width: "120px", filterable: true, template: "#= CostCentre #",
editor: function costCentreDropDownEditor(container, options) {
$('<input required id="CostCentre" name="' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
placeholder: "Select...",
dataTextField: "CostCentre",
dataValueField: "CostCentre",
change: function (e) {
// prevent adding castom values
var widget = e.sender;
if (widget.value() && widget.select() === -1) {
widget.value("");
}
var costCentre = this.value();
if (costCentre != "") {
data = this.dataSource.data();
var selectedItem = $.grep(data, function (e) { return e.CostCentre === costCentre });
var grid = gridElement.data("kendoGrid"),
model = grid.dataItem(this.element.closest("tr"));
model.set("CostCentreTitle", selectedItem[0].CostCentreTitle);
}
},