Auto-Resize Editor inside Grid Editor Template
Environment
Product | Progress® Kendo UI® Grid for jQuery | Progress® Kendo UI® Editor for jQuery |
Operating System | All | |
Browser | All | |
Preferred Language | JavaScript |
Description
How can I render an auto-resizing Kendo UI Editor in a Kendo UI Grid editor template?
Solution
- In the columns editor function of the Grid, initialize the Editor.
- In the
edit
event handler, add a custom class to the Editor. - Add styles to the custom class so that the Editor has a 100% width and height.
<div id="grid"></div>
<script>
var crudServiceBaseUrl = "https://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 } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
edit: function (e) {
$("#ProductName").data("kendoEditor").wrapper.width("").height("").addClass("expandEditor");
},
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name", editor: customEditor },
{ command: ["edit", "destroy"], title: " ", width: "160px" }],
editable: {
mode: "popup",
window: {
resizable: true
}
}
});
function customEditor(container, options) {
var element = $("<textarea/>");
element.attr("name", options.field);
element.attr("id", options.field);
element.appendTo(container);
element.kendoEditor({
});
}
</script>
<style>
html {
font: 12px sans-serif;
overflow: auto;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#ProductName {
display: block;
width: 100%;
height: 100%;
border: 0;
padding: 0;
}
table.expandEditor {
border-width: 0;
width: 100%;
height: 100%;
}
html body div.k-edit-form-container {
width: auto;
min-width: 400px;
max-width: 1800px;
height: 100%;
box-sizing: border-box;
padding-bottom: 40px;
display: flex;
flex-direction: row;
}
html body .k-popup-edit-form .k-edit-field > .k-textbox,
html body .k-popup-edit-form .k-edit-field > .k-widget {
width: 100%;
}
html body .k-edit-field {
flex: 1 1 auto;
}
html body .k-edit-form-container .k-edit-buttons {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>