Kendo UI(listView) - 向ul添加新项目

时间:2015-12-29 06:02:11

标签: kendo-ui kendo-listview

我正在使用Kendo UI ListView。

我想在点击<li>链接时向现有<ul>添加新的+ add项。但它必须打开 Kendo Popup ,使用可编辑的文本字段为&#34;项目文字&#34;和选择框为项目选项提供选项如Option 01, Option 02....等。

请帮助我,因为我是jQuery和Kendo的新手:(

  

Online Demo

&#13;
&#13;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
  
<a href="#" id="addNewItem">+ Add</a>
  
<ul id ="listView"></ul>
  
<script>
var dataSource = new kendo.data.DataSource({
  data: [ { itemText: "Default item 1", itemOption: "Option 01" }, { itemText: "Default item 2", itemOption: "Option 02" }]
});
$("#listView").kendoListView({
     dataSource: dataSource,
     template: "<li>#:itemText# : #:itemOption#</li>",
 });
dataSource.read();
</script>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

一种解决方案可能是这样的:Dojo example