ListView Popup Editor
Environment
Product | Progress® Kendo UI® ListView for jQuery |
Description
I have seen the editing demo of the ListView, however I want to create a popup edit dialog similar to the one of the Kendo UI Grid.
How can I achieve this?
Solution
Use the Form and Window components to create a popup editing dialog.
<script type="text/x-kendo-tmpl" id="template">
<div class="product-view k-widget">
<dl>
<dt>Product Name</dt>
<dd>#:ProductName#</dd>
<dt>Unit Price</dt>
<dd>#:kendo.toString(UnitPrice, "c")#</dd>
<dt>Units In Stock</dt>
<dd>#:UnitsInStock#</dd>
<dt>Discontinued</dt>
<dd>#:Discontinued#</dd>
</dl>
<div class="edit-buttons">
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#"><span class="k-button-icon k-icon k-i-edit"></span></a>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#"><span class="k-button-icon k-icon k-i-close"></span></a>
</div>
</div>
</script>
<div id="listView"></div>
<!-- create a hidden container element for the Form editor -->
<div id="form-editor-container" style="display:none;">
<form id="form-editor">
</form>
</div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service"
var 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) };
}
}
},
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: "ProductName",
UnitPrice: { type: "number" },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number" }
}
}
}
});
// create the ListView
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html()),
editTemplate: kendo.template($("#template").html()),
// editTemplate: kendo.template($("#editTemplate").html()),
// selectable: true,
edit: function (e) {
e.preventDefault();
// get the selected item from the ListView
var selectedItem = this.dataItem(e.item);
// create the Form editor with the selected item's properties
var form = $("#form-editor").getKendoForm();
form.setOptions({
formData: {
ProductID: selectedItem.ProductID,
ProductName: selectedItem.ProductName,
UnitPrice: selectedItem.UnitPrice,
Discontinued: selectedItem.Discontinued,
UnitsInStock: selectedItem.UnitsInStock
}
});
// show the Form editor
formWindow.open();
formWindow.center();
}
});
$("#form-editor").kendoForm({
items: [
// { field: "ProductID", title: "ID", width: 100 },
{ field: "ProductName", title: "Name", width: 200 },
{ field: "UnitPrice", title: "Price", width: 100 },
{ field: "Discontinued", title: "Discontinued", width: 100 },
{ field: "UnitsInStock", title: "In Stock", width: 100 }
],
submit: function (e) {
e.preventDefault();
// update the item in the DataSource with the form data
var item = dataSource.get(e.model.ProductID);
item.set("ProductName", e.model.ProductName);
item.set("UnitPrice", e.model.UnitPrice);
item.set("Discontinued", e.model.Discontinued);
item.set("UnitsInStock", e.model.UnitsInStock);
dataSource.sync();
formWindow.close();
}
});
// create the Form editor as a Kendo Window
var formWindow = $("#form-editor-container").kendoWindow({
title: "Edit Item",
visible: false,
modal: true
}).data("kendoWindow");
});
</script>
<style>
#listView .k-listview-content {
display: flex;
width: 100%;
overflow: hidden;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.product-view {
display: flex;
width: 300px;
height: 300px;
box-sizing: border-box;
border-top: 0;
position: relative;
}
.product-view:nth-child(even) {
border-left-width: 0;
}
.product-view dl {
margin: 10px 10px 0;
padding: 0;
overflow: hidden;
}
.product-view dt,
dd {
margin: 0;
padding: 0;
width: 100%;
line-height: 24px;
font-size: 18px;
}
.product-view dt {
font-size: 11px;
height: 16px;
line-height: 16px;
text-transform: uppercase;
opacity: 0.5;
}
.product-view dd {
height: 46px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.product-view dd .k-widget {
font-size: 14px;
}
#example .k-listview {
border-width: 1px 0 0;
padding: 0;
overflow: hidden;
min-height: 298px;
}
.edit-buttons {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: right;
padding: 5px;
background-color: rgba(0, 0, 0, 0.1);
}
.k-pager-wrap {
border-top: 0;
}
span.k-invalid-msg {
position: absolute;
margin-left: 6px;
}
.k-add-button {
margin-bottom: 2em;
}
@media only screen and (max-width : 620px) {
.product-view {
width: 100%;
}
.product-view:nth-child(even) {
border-left-width: 1px;
}
}
.k-textbox,
.k-numerictextbox {
width: 12.4em;
}
</style>