Edit this page

save

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.

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>
       <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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy