example.js

function(kendo, _, $, Cloner) {
  'use strict';

  /**
   * The component to make grid be able to edit inline
   * @module gridinlineedit
   */

  /**
   * @class GridInlineEdit
   * Make a grid to be able to edit items in inline mode
   * @param grid {kendo.ui.Grid} the grid to attach inline editing
   */
  return function(grid) {

    var rowIsNew;
    var isGroupGrid = false;

    function editSelectedItem(itemIsNew) {
      rowIsNew = itemIsNew;
      grid.editRow(grid.select());
    }

    function handleKey(e) {
      if (e.which == 27) {
        stopEdit();
      }
      rememberAsEdited(e.target);
    }

    var stopTimer = undefined;
    var editModel;

    function stopEdit() {
      unhookEditCtrls();
      stopExitTimer();
      grid.cancelRow();
      restoreEditModel();
      editModel = undefined;
    }

    // var editModel;
    var prevModel;

    function backUpEditModel() {
      prevModel = kendo.observable();
      cloner.copy(editModel, prevModel);
    }

    function restoreEditModel() {
      addModelBack();
      cloner.copy(prevModel, editModel);
    }

    function addModelBack() {
      if (editModel.isNew()) {
        grid.dataSource.add(editModel);
      }
    }

    function saveAndStopEdit() {
      backUpEditModel();
      stopEdit();
    }

    function startExitTimer() {
      stopExitTimer();
      stopTimer = setTimeout(saveAndStopEdit, 100);
    }

    function stopExitTimer() {
      if (stopTimer) {
        clearTimeout(stopTimer);
        stopTimer = undefined;
      }
    }

    function handleFocusIn() {
      stopExitTimer();
    }

    function handleFocusOut() {
      startExitTimer();
    }

    var eventHandlers = {
      'keydown': handleKey,
      'focusin': handleFocusIn,
      'focusout': handleFocusOut
    };
    var $editCtrls;

    var justEditedCtrl;

    function rememberAsEdited(ctrl) {
      justEditedCtrl = ctrl;
    }

    function ensureCommitInCtrls() {
      if (_.isObject(justEditedCtrl)) {
        $(justEditedCtrl).change();
      }
    }

    function hookEditCtrls($container) {
      $editCtrls = $('input, .k-dropdown', $container);
      $editCtrls.on(eventHandlers);
    }

    function editCtrlsView($container) {
      if (rowIsNew) {
        $editCtrls = $('input', $container);
        var currentGrid = grid.thead.parents('[data-role=grid]').attr('placeholder');
        if (currentGrid != null) {
          $editCtrls.attr('placeholder', currentGrid);
          $editCtrls.addClass("input-text-group-name");
          $editCtrls.select();
          isGroupGrid = true;
        }
      }

    }

    function unhookEditCtrls() {
      if ($editCtrls) {
        $editCtrls.off(eventHandlers);
        $editCtrls = undefined;
      }
    }

    function isEditMode() {
      return _.isObject(editModel);
    }

    function commitEdit(commitedProc) {
      commitedProc = _.isFunction(commitedProc) ? commitedProc : function() {};

      if (isEditMode()) {
        ensureCommitInCtrls();
        _.defer(function() {
          saveAndStopEdit();
          commitedProc();
        });
      } else {
        commitedProc();
      }
    }

    function onGridEdit(e) {
      hookEditCtrls(e.container);
      editCtrlsView(e.container);
      editModel = e.model;
      backUpEditModel();
    }

    grid.bind('edit', onGridEdit);

    var cloner = new Cloner(grid.dataSource);

    return {
      /**
       * Begin editing of the selected item
       */
      startEdit: editSelectedItem,
      /**
       * Checks if a row is in edit mode
       */
      isEditMode: isEditMode,
      /**
       * If a row in edit mode saves the changes and stops edit mode
       * Please note: the operation is async so if you need to continue working
       * whith the same object - please send such block of code
       * as commitedProc
       * @param {Function} [commitedProc] - the procedure to be called after the commit is done
       */
      commitEdit: commitEdit
    };
  };
});