New to Kendo UI for jQueryStart a free 30-day trial

Save

methods

Saves the currently edited ListView item. Triggers the save event. If the save event is not prevented and validation succeeds the ListView will call the DataSource sync method.

 <script type="text/x-kendo-tmpl" id="template">
 <div>
   <dl>
     <dt>Name</dt> <dd>#:name#</dd>
     <dt>Age</dt> <dd>#:age#</dd>
  </dl>
   <div>
       <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
  </div>
  </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-cancel-button" href="\\#">
      	<span class="k-icon k-i-cancel"></span>
  		</a>
  </div>
  </div>
</script>
<button class="k-button" id="saveBtn">Save</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" }
          }
        }
      }
    }
  });
  $("#saveBtn").click(function(){
    $("#listView").data("kendoListView").save();
  });
</script>
Not finding the help you need?
Contact Support