edit

Fires when the ListView enters edit mode.

The event handler function context (available via the this keyword) will be set to the widget instance.

Example

<script type="text/x-kendo-tmpl" id="template">
        <div> #:name#
      <div>
            <button class="edit k-edit-button k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button" type="button">
        <span class="k-icon k-svg-icon k-svg-i-pencil k-button-icon" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</script>

<script type="text/x-kendo-tmpl" id="editTemplate">

<input type="text" data-bind="value:name" name="name" required="required" />
<button class="update k-update-button" type="button"></button>
      <button class="cancel k-cancel-button" type="button"></button>
    </div>
  </div>
</script>

<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" }
          }
        }
      }
    },
    dataBound: function() {
      kendo.ui.icon($(".k-svg-i-pencil"), { icon: 'pencil' });
    }
  });

  var listView = $("#listView").data("kendoListView");
  // bind to the edit event
  listView.bind("edit", function(e) {
    $(".update").kendoButton({
      icon: "check"
    });

    $(".cancel").kendoButton({
      icon: "cancel",
      click: function() {
        setTimeout(function() {
          kendo.ui.icon($(".k-svg-i-pencil"), { icon: 'pencil' });
        });
      }
    });
    /* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Editing of item with id " + e.model.id);
  });
</script>

To set after initialization

<script type="text/x-kendo-tmpl" id="template">
        <div> #:name#
    <div>
        <button class="edit k-edit-button k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button" type="button">
     <span class="k-icon k-svg-icon k-svg-i-pencil k-button-icon" aria-hidden="true"></span>
  </button>
  </div>
  </div>
</script>

<script type="text/x-kendo-tmpl" id="editTemplate">

<input type="text" data-bind="value:name" name="name" required="required" />
<button class="update k-update-button" type="button"></button>
    <button class="cancel k-cancel-button" type="button"></button>
  </div>
  </div>
</script>

<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" }
          }
        }
      }
    },
    dataBound: function() {
      kendo.ui.icon($(".k-svg-i-pencil"), { icon: 'pencil' });
    }
  });

  var listView = $("#listView").data("kendoListView");
  // bind to the edit event
  listView.bind("edit", function(e) {
    $(".update").kendoButton({
      icon: "check"
    });

    $(".cancel").kendoButton({
      icon: "cancel",
      click: function() {
        setTimeout(function() {
          kendo.ui.icon($(".k-svg-i-pencil"), { icon: 'pencil' });
        });
      }
    });
    /* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Editing of item with id " + e.model.id);
  });
</script>

Event Data

e.item jQuery

The jQuery element to be edited.

e.model kendo.data.Model

The model to be edited.