This is a migrated thread and some comments may be shown as answers.

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

3 Answers 32 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nana
Top achievements
Rank 1
Nana asked on 08 Nov 2018, 09:46 AM

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");
    }
  }
});

 

 

3 Answers, 1 is accepted

Sort by
0
Nana
Top achievements
Rank 1
answered on 08 Nov 2018, 09:56 AM
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.
0
Alex Hajigeorgieva
Telerik team
answered on 12 Nov 2018, 08:12 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nana
Top achievements
Rank 1
answered on 12 Dec 2018, 09:44 AM

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();
}
Tags
Grid
Asked by
Nana
Top achievements
Rank 1
Answers by
Nana
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or