Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

入门指南

$(document).ready(function() {$("#listView").kendoListView({selectable: true,navigatable: true,editable: true,template: "<li>${FirstName}</li>",editTemplate: '<li><input type="text" data-bind="value:FirstName" name="FirstName" required="required"/></li>'});});

高级配置

<script type="text/x-kendo-tmpl" id="editTemplate"><div class="product-view k-widget"><div class="edit-buttons"><a class="k-button k-button-icontext k-update-button" href="\#"><span class="k-icon k-update"></span></a><a class="k-button k-button-icontext k-cancel-button" href="\#"><span class="k-icon k-cancel"></span></a></div><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></script>$(document).ready(function(){$("#listView").kendoListView({selectable: true,navigatable: true,template: kendo.template($("#template").html()),editTemplate: kendo.template($("#editTemplate").html())});});

ListView项的新添加记录功能由用户发起的click事件触发，并通过jQuery中的.click()连接。

$(".k-add-button").click(function(e) {listView.add();e.preventDefault();});