JQuery UI component library Kendo UI tips sharing
Recharged 2020-11-26 20:32:07
Click on “ Learn more about ” obtain Kendo UI for jQuery R3 2020 SP1 Trial download

Kendo UI It's the latest offering Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React and Kendo UI Support for Vue Four controls .Kendo UI for jQuery To create a modern Web The most complete application UI library .

Add custom delete confirmation dialog

The following example shows how to ListView Widget add custom Delete Confirmation dialog .

<div id="example"><div class="demo-section k-content wide"><div id="confirmation"></div><a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a><div id="listView"></div><div id="pager" class="k-pager-wrap"></div></div><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 class="k-button k-edit-button" href="\\#">Edit<span class="k-icon k-i-edit"></span></a><a class="k-button k-delete-button" href="\\#">Built-in delete<span class="k-icon k-i-close"></span></a><a class="k-button k-custom-delete-button" href="\\#" onClick="deleteItem(event)">Custom delete<span class="k-icon k-i-close"></span></a></div></div></script><script type="text/x-kendo-template" id="confirmTemplate">Delete <strong>#= ProductName #</strong> ? </p>We have #= UnitsInStock # units in stock. </p><button class="k-button" id="yesButton">Yes</button><button class="k-button" id="noButton"> No</button></script><script type="text/x-kendo-tmpl" id="editTemplate"><div class="product-view k-widget"><dl><dt>Product Name</dt><dd><input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" /><span data-for="ProductName" class="k-invalid-msg"></span></dd><dt>Unit Price</dt><dd><input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" /><span data-for="UnitPrice" class="k-invalid-msg"></span></dd><dt>Units In Stock</dt><dd><input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" /><span data-for="UnitsInStock" class="k-invalid-msg"></span></dd><dt>Discontinued</dt><dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd></dl><div class="edit-buttons"><a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a><a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a></div></div></script><script>function deleteItem(e){var listView = $("#listView").getKendoListView();var productContainer = $(e.target).closest(".product-view");var product = listView.dataItem(productContainer);var confirmPopup = $("#confirmation").getKendoWindow();var confirmTemplate = kendo.template($("#confirmTemplate").html());confirmPopup.content(confirmTemplate(product)); //send the row data object to the template and render itconfirmPopup.center().open();$("#yesButton").click(function(){listView.dataSource.remove(product) //prepare a "destroy" requestlistView.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)confirmPopup.close();})$("#noButton").click(function(){confirmPopup.close();})}$(document).ready(function () {var crudServiceBaseUrl = "//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)};}}},pageSize: 4,schema: {model: {id: "ProductID",fields: {ProductID: { editable: false, nullable: true },ProductName: "ProductName",UnitPrice: { type: "number" },Discontinued: { type: "boolean" },UnitsInStock: { type: "number" }}}}});$("#pager").kendoPager({dataSource: dataSource});$("#confirmation").kendoWindow({title: "Are you sure?",visible: false,width: "250px",height: "120px",})$("#listView").kendoListView({remove: function(e) { if(!confirm("Do you want to delete " + e.model.get("ProductName") + "?")){e.preventDefault();}},dataSource: dataSource,template: kendo.template($("#template").html()),editTemplate: kendo.template($("#editTemplate").html())})$(".k-add-button").click(function(e) {listView.add();e.preventDefault();});});</script><style>.product-view{float: left;width: 50%;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,.product-view dd .k-textbox {font-size: 14px;}.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;}}</style></div>

Use the slider selection to filter

Your project may require you to base on Slider Select to filter ListView data source , The following example shows how to do this and show the filter functions that include or exclude .

<div id="rangeslider1" class="slider"><input /><input /></div><span> </span><div id="rangeslider2" class="slider"><input /><input /></div><div id="listView"></div><div id="pager" class="k-pager-wrap"></div><script type="text/x-kendo-tmpl" id="template"><div class="product"><img src="https://demos.telerik.com/kendo-ui/content/web/foods/${ProductID}.jpg" alt="${ProductName} image" /><h3>${ProductName}, $${UnitPrice}</h3><p>${kendo.toString(UnitPrice, "c")}</p></div></script><script>var slider1 = $("#rangeslider1").kendoRangeSlider({min: 1,max: 77,smallStep: 5,largeStep: 10,tickPlacement: "both",change: function (e) {var filters = [],filter;filters.push({field: "ProductID", operator: "gte", value: slider1.values()[0]});filters.push({field: "ProductID", operator: "lte", value: slider1.values()[1]});filters.push({field: "UnitPrice", operator: "gte", value: slider2.values()[0]});filters.push({field: "UnitPrice", operator: "lte", value: slider2.values()[1]});filter = {logic: "and",filters: filters};dataSource.filter(filter);}}).data("kendoRangeSlider");var slider2 = $("#rangeslider2").kendoRangeSlider({min: 1,max: 77,smallStep: 5,largeStep: 10,tickPlacement: "both",change: function (e) {var filters = [],filter;filters.push({field: "ProductID", operator: "gte", value: slider1.values()[0]});filters.push({field: "ProductID", operator: "lte", value: slider1.values()[1]});filters.push({field: "UnitPrice", operator: "gte", value: slider2.values()[0]});filters.push({field: "UnitPrice", operator: "lte", value: slider2.values()[1]});filter = {logic: "and",filters: filters};dataSource.filter(filter);}}).data("kendoRangeSlider");var dataSource = new kendo.data.DataSource({transport: {read: {url: "https://demos.telerik.com/kendo-ui/service/Products",dataType: "jsonp"}}});$("#pager").kendoPager({dataSource: dataSource});$("#listView").kendoListView({dataSource: dataSource,template: kendo.template($("#template").html())});</script></body>

Keep row selection during data manipulation

The following example shows how to use the ListView Keep row selection during data operation in .

<div id="listview"></div><div id="pager"></div><script>$(function () {var dataSource = new kendo.data.DataSource({type: "odata",transport: {read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"},schema: {model: {id: "OrderID",fields: {OrderID: { type: "number" },Freight: { type: "number" },ShipName: { type: "string" },OrderDate: { type: "date" },ShipCity: { type: "string" }}}},pageSize: 10,serverPaging: true});var selectedOrders = [];var idField = "OrderID";$("#listview").kendoListView({dataSource: dataSource,height: 400,selectable: "multiple",pageable: true,template: "<div>#:ShipCity# || #:Freight# || #:kendo.toString(OrderDate, 'dd/MM/yyyy')#</div>",change: function (e, args) {var listview = e.sender;var items = listview.items();items.each(function (idx, row) {var idValue = listview.dataSource.getByUid(row.dataset.uid).get(idField);if (row.className.indexOf("k-state-selected") >= 0) {selectedOrders[idValue] = true;} else if (selectedOrders[idValue]) {delete selectedOrders[idValue];}});},dataBound: function (e) {var listview = e.sender;var items = listview.items();var itemsToSelect = [];items.each(function (idx, row) {var dataItem = listview.dataSource.getByUid(row.dataset.uid);if (selectedOrders[dataItem[idField]]) {itemsToSelect.push(row);}});listview.select(itemsToSelect);}});$("#pager").kendoPager({ dataSource: dataSource });});</script>

stay DataSource Item Update Update on ListView

ListView Content is not dynamically updated when model fields are updated , To re render the widget , Please manually trigger after model update dataSource Of change event , The following example shows how to do this .

<base href="https://demos.telerik.com/kendo-ui/listview/mvvm"><style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style><title></title><script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script><script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script><script src="../content/shared/js/console.js"></script><div id="example"><div class="demo-section k-content wide"><fieldset><dd>ProductName (first data item):</dd><dt><input data-bind="value: newProductName" /><button data-bind="click: updateValue">Set</button></dt></fieldset><div><h4>Update a record</h4><div data-role="listview"data-edit-template="edit-template"data-template="template"data-bind="source: products,visible: isVisible,events: {save: onSave}"style="height: 300px; overflow: auto"></div></div><div style="padding-top: 2em;"><h4>Console</h4><div class="console"></div></div></div><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 class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a><a class="k-button k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a></div></div></script><script type="text/x-kendo-tmpl" id="edit-template"><div class="product-view k-widget"><dl><dt>Product Name</dt><dd><input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" /><span data-for="ProductName" class="k-invalid-msg"></span></dd><dt>Unit Price</dt><dd><input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" /><span data-for="UnitPrice" class="k-invalid-msg"></span></dd><dt>Units In Stock</dt><dd><input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" /><span data-for="UnitsInStock" class="k-invalid-msg"></span></dd><dt>Discontinued</dt><dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd></dl><div class="edit-buttons"><a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a><a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a></div></div></script><div class="box wide"><div class="box-col"><h4>Configuration</h4><div><label><input type="checkbox" data-bind="checked: isVisible">Visible</label></div></div><div class="box-col"><h4>Information</h4>Kendo UI ListView supports the<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.</div></div><script>var viewModel = kendo.observable({newProductName: "test",updateValue: function() {this.products.at(0).set("ProductName", this.newProductName);this.products.trigger("change");},isVisible: true,onSave: function(e) {$(".console").append("<p>" + "event :: save(" + kendo.stringify(e.model, null, 4) + ")" + "</p>");},products: new kendo.data.DataSource({schema: {model: {id: "ProductID"}},batch: true,transport: {read: {url: "//demos.telerik.com/kendo-ui/service/products",dataType: "jsonp"},update: {url: "//demos.telerik.com/kendo-ui/service/products/update",dataType: "jsonp"},destroy: {url: "//demos.telerik.com/kendo-ui/service/products/create",dataType: "jsonp"},parameterMap: function(options, operation) {if (operation !== "read" && options.models) {return {models: kendo.stringify(options.models)};}}}})});kendo.bind($("#example"), viewModel);</script><style>.product-view{float: left;width: 50%;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,.product-view dd .k-textbox {font-size: 14px;}.k-listview{border-width: 1px 1px 1px 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);}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;}}</style></div>
版权声明
本文为[Recharged]所创,转载请带上原文链接,感谢
https://fheadline.com/2020/11/20201126203000173j.html
相似文章

2021-08-09