title: Kendo UI (listView) - Add new item to ul
body: <p>I am using Kendo UI ListView.</p>
  
  <p>I want to add new <code>&lt;li&gt;</code> item to existing <code>&lt;ul&gt;</code> on clicking of <code>+ add</code> link. But it has to open <strong>Kendo Popup</strong> with editable <strong>textfield</strong> for "Item Text", and <strong>Select box</strong> for Item Options with options as <code>Option 01, Option 02....</code> etc..</p>
  
  <p><strong>Please help as I am new to jQuery and Kendo :(</strong></p>
  
  <blockquote>
    <p><strong><a href="http://dojo.telerik.com/UFEna" rel="nofollow">Online Demo</a></strong></p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;Kendo UI Snippet&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"/&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"/&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css"/&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"/&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    
  &lt;a href="#" id="addNewItem"&gt;+ Add&lt;/a&gt;
    
  &lt;ul id ="listView"&gt;&lt;/ul&gt;
    
  &lt;script&gt;
  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: "&lt;li&gt;#:itemText# : #:itemOption#&lt;/li&gt;",
   });
  dataSource.read();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>