Hi,
I modified example to show you a possible solution for my grid.
I need a button in the "text" non-editable field. This button will open a window with editor.
I need to display this button in the row always even user click on command "Edit".
So I did it.
Below are my questions:
1). I don't know how to find e reference to the row that opened this window inside close event to get a dataItem and update a model.
2). I am not sure if it is possible to change a text of the column after window close.
3). I don't know why style of my "show" button changed after user click a Cancel button
Thank you for you comments
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>editor button</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="https://kendo.cdn.telerik.com/2017.3.1026/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.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<div id="window">
<textarea id="editor" rows="10" cols="30" style="height:440px" aria-label="editor" data-bind="value: text"></textarea>
</div>
<script>
var dataItem;
$("#grid").kendoGrid({
editable: "inline",
resizable: true,
columns: [{
field: "name", width: "200px"
},
{
field: "text",
template: "<div class='contentDivs' style='white-space: nowrap; height: 25px; overflow: hidden; max-width:65%; float: left;'>#= text #</div><button class='editButtons' style='float:right'>show</button>",
width: "300px"
},
{
field: "age", width: "100px"
},
{ command: [{ name: "edit", text: { edit: "edit", update: "update", cancel: "cancel" } }]}
],
dataSource: {
schema: {
model: {
id: "id",
fields: {
id: {type: "number", editable:false},
name: { type: "string" },
text: { type: "string", editable: false},
age: { type: "number" }
}
}
},
data: [{
id: 1,
name: "Jane Doe",
text: "Lorem ipsum dolor lis in magna. In feugiat non ipsum a laoreet. Nulla facilisi.",
age: 30
},
{
id: 2,
name: "John Doe",
text: "Cras vitae nisl quis nulla accumsan porttitor a eget quam. Vestibulum tempor eu felis ac pulvinar. Morbi viverra odio sit ame. Pellentesque felis est, condimentum et pellentesque vel, luctus eget libero. Morbi non placerat diam, quis tincidunt ante.",
age: 33
}
]
},
dataBound: onDataBound
});
function onDataBound(e) {
$(".contentDivs").children().css("display", "table-cell");
$(".editButtons").kendoButton({
click: function(e) {
var grid = $("#grid").data("kendoGrid");
var editor = $("#editor").data("kendoEditor");
var window = $("#window").data("kendoWindow");
var row = e.sender.element.closest("tr");
var dataItem = grid.dataItem(row);
kendo.bind(editor.element, dataItem);
window.open().center();
}
});
};
$("#window").kendoWindow({
width: "600px",
visible: false,
modal: true,
close: function(e) {
e.sender.element.focus();
var grid = $("#grid").data("kendoGrid");
var editor = $("#editor").data("kendoEditor");
// how to get row?
var row;
var dataItem = grid.dataItem(row);
// update Model
//dataItem.text = editor.value();
console.log(dataItem);
// how to change the text in the field?
},
actions: [
"Maximize",
"Close"
],
});
$("#editor").kendoEditor();
</script>
</body>
</html>
2 Answers, 1 is accepted
Thank you for the example.
Regarding the questions:
1) This can be achieved with a similar to the used approach, the difference is that the row and the dataItem value have to be global in order to be available in the correct scope.
2) Yes, it is possible by changing the model value and refreshing the Grid.
3) This occurs after canceling the row is re-rendered but the dataBound event is not called which leads to not initializing the buttons. The same logic could be called on the cancel event.
I modified the example to demonstrate all of them:
http://dojo.telerik.com/IqAbU
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-cancel
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-refresh
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Your solution was very helpful. I got exactly what I needed.
I also added same code to restore button on grid "change" event as well (if user switch between rows)
Instead of closing a window and do refresh I did slightly different . I wanted to stay in edit mode.
So I came with this code:
close: function(e) {
e.sender.element.focus();
var grid = $("#grid").data("kendoGrid");
var editor = $("#editor").data("kendoEditor");
// update Model
var editorValue = editor.value();
dataItem.text = editorValue;
dataItem.dirtyFields["text"] = true;
dataItem.dirty = true;
}
And then when user click Update button, the model will be updated.
P.S. I will appreciate if you could answer on my last reply:
https://www.telerik.com/forums/how-to-trigger-validation-on-the-row-manually
Thank you again,
Vadim