Hi i am evaluating the grid for a development.
One of the requirements i have is to have a multi row selection and inline edit. (will be going into cell inline mode on double click)
I found this great article of yours
https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/grid-edit-cell-on-double-click.md
where it looked it was exactly what i was looking for but it looks like that when there is a numeric editor it doesnt work. I double click the cell, the editor appears and immediately hides, i have updated one of your grid examples (the editing-custom.html) and attached it.
Would be great to have some feedback on it, to have a proper evaluation as this is a must have.
As i cant attach neither hmtl nor txt files (being blocked by the page)
################################################################################
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Editing custom editor</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jszip.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
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: "destroy", title: " ", width: "150px" }],
// editable: false,
selectable: "multiple"
});
$("#grid tbody").on("dblclick", "td", function(e) {
var cellElement = this;
var cell = $(cellElement);
var grid = $("#grid").getKendoGrid();
grid.editCell(cell);
});
$("#grid tbody").on("blur", "td", function(e) {
var cellElement = this;
var cell = $(cellElement);
var grid = $("#grid").getKendoGrid();
grid.closeCell(cell);
});
});
function categoryDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
Hi Shyam,
I have replied to the support ticket you have submitted. Nevertheless, I will post the answer here as well in case anyone else is looking to implement similar functionality.
In order to avoid the numeric editor from closing the cell I suggest adding an additional condition before calling closeCell. With that said, if you would like to have multi row selection enabled in the Grid as well I recommend using checkbox selection. This way the selection and editing behavior would not interfere with one another.
Check out the updated sample below that illustrates the approach:
https://dojo.telerik.com/OBatESOq
Regards,
Viktor Tachev
Progress Telerik