When I click on a cell to edit it, and then press enter, nothing happens.

[Nana]

How can I make the grid save when the enter key is pressed? I have tried binding the keycode in the edit handler and that doesn't work.

I have added a kendoNumericTextBox editor for the cell and binded the change event and keydown event to the input. When I edit a cell and then press enter, the keydown event will been fired but the oldValue and newValue are always the same. It seems like the data source for the grid has been changed. 

My code as below:

grid.tbody.on("change", "input.txtTimeAllocation", function (e) {
  e.preventDefault();

  var row = $(e.target).closest("tr");
  var cell = $(e.target).closest("td");

  var colIndex = cell.index();

  var dataItem = grid.dataItem(row);

  var oldValue = dataItem.TimeAllocation[colIndex - 5].Hour;
  var newValue = Number(this.value);
  if (oldValue != newValue) {
    //save the change
    window.alert("Hours changed");
  }
}).on("keydown", "input.txtTimeAllocation", function (e) {
  if (e.keyCode === kendo.keys.ENTER) {
    e.preventDefault();

    var row = $(e.target).closest("tr");
    var cell = $(e.target).closest("td");

    var colIndex = cell.index();

    var dataItem = grid.dataItem(row);

    var oldValue = dataItem.TimeAllocation[colIndex - 5].Hour;
    var newValue = Number(this.value);
    if (oldValue != newValue) {
      //save the change
      window.alert("Hours changed");
    }
  }
});

 

 

[Nana]

But when I edit a cell and then click another cell or other places, the change event will been fired and the oldValue and newValue are different, therefore I can save the change.

[Alex Hajigeorgieva]

Hi, Nana,

Thank you for the shared code sample.

If I understand the current scenario, the Kendo UI Grid in the application has "incell" editing, please correct me if I am wrong. 

The enter key will update the data item and the save event will be triggered out of the box if you add "navigatable: true" to the configuration:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/navigatable

Here is our official demo with a save event handler added:

https://dojo.telerik.com/@bubblemaster/ITItiPiL

Let me know in case I have misunderstood the scenario so I may provide an alternative response.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Nana]

Hi, Alex Hajigeorgieva ,

Thank you for your reply.

Your reply is very useful and make sense to me.

I have modified my code and now it works very well. My code as below:

// place a button at the top of the grid
<a class="k-button" role="button" id="btnSaveChanges" onclick="grid_SaveChanges()" style="display: none"><i class="k-icon k-i-check"></i>Save Changes</a>

// global variable
var UnsavedChangeTimeoutID = null;
var HaveUnsavedChange = false;

// bind event to grid
grid.bind("save", function (e) {
  var values = Object.getOwnPropertyNames(e.values);
  var field = values[0];
  if (field.indexOf("TimeAllocation[") > -1) {
    var dataIndex = field.substring(field.indexOf("[") + 1, field.indexOf("]"));

    var newValue = e.values[field];
    var standardHour = e.model.TimeAllocation[dataIndex].StandardHour;
    var holidayHour = e.model.TimeAllocation[dataIndex].HolidayHour;
    if (newValue > (standardHour - holidayHour) * 2) {
      e.preventDefault();
      delete e.model.dirtyFields[field];
      return;
    }
    HaveUnsavedChange = true;
    $("#btnSaveChanges").show();
  }
});

grid.tbody.on("focus", "input.txtTimeAlloction", function (e) {
  window.clearTimeout(UnsavedChangeTimeoutID);
}).on("blur", "input.txtTimeAlloction", function (e) {
  window.clearTimeout(UnsavedChangeTimeoutID);

  UnsavedChangeTimeoutID = window.setTimeout(function () {
    if (HaveUnsavedChange === true) {
      grid_SaveChanges();
    }
  }, 1000);
}).on("keydown", "input.txtTimeAlloction", function (e) {
  if (e.keyCode === kendo.keys.ENTER) {
    e.preventDefault();
    grid_SaveChanges();
  }
});

// save change
function grid_SaveChanges() {
  HaveUnsavedChange = false;

  var dataSource = grid.dataSource.data();

  var postData = {
    ProjectID: $ProjectID,
    AllocationEditList: []
  };

  var dirtyFields = null;
  var dataIndex = 0;

  dataSource.forEach(function (dataItem, index) {
    if (dataItem.dirty && dataItem.dirtyFields) {
      dirtyFields = Object.getOwnPropertyNames(dataItem.dirtyFields);
      dirtyFields.forEach(function (field, idx) {
        if (field.indexOf("TimeAllocation[") > -1) {
          dataIndex = field.substring(field.indexOf("[") + 1, field.indexOf("]"));

          postData.AllocationEditList.push({
            ID: dataItem.ID,
            Year: dataItem.TimeAllocation[dataIndex].Year,
            Month: dataItem.TimeAllocation[dataIndex].Month,
            WorkWeek: dataItem.TimeAllocation[dataIndex].WorkWeek,
            NewValue: dataItem.TimeAllocation[dataIndex].Hour
          });
        }
      });
    }
  });

  if (postData.AllocationEditList.length > 0) {
    // code to save change
    // ...
  }
  $("#btnSaveChanges").hide();
}