add

Inserts an empty item as a first item in the ListView and puts it in edit mode.

Example

<script type="text/x-kendo-tmpl" id="template">
 <div>
   <dl>
     <dt>Name</dt> <dd>#:name#</dd>
     <dt>Age</dt> <dd>#:age#</dd>
  </dl>
  </div>
</script>

<script type="text/x-kendo-tmpl" id="editTemplate">
 <div>
   <dl>
     <dt>Name</dt>
     <dd><input type="text" data-bind="value:name" name="name" required="required" /></dd>
     <dt>Age</dt>
     <dd><input type="text" data-bind="value:age" data-role="numerictextbox" data-type="number" name="age" required="required" /></dd>
  </dl>
   <div>
      <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>
<button class="k-button" id="addBtn">Add New</button>
<div id="listView"></div>
<script>
  $("#listView").kendoListView({
    template: kendo.template($("#template").html()),
    editTemplate: kendo.template($("#editTemplate").html()),
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 47 },
        { id: 2, name: "John Doe", age: 50 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            id: { type: "number" },
            name: { type: "string" },
            age: { type: "number" }
          }
        }
      }
    }
  });
  $("#addBtn").click(function(){
    // get a reference to the ListView widget
    var listView = $("#listView").data("kendoListView");
    // add an item to the ListView
    listView.add();
  });
</script>