mleibman / SlickGrid

A lightning fast JavaScript grid/spreadsheet
http://wiki.github.com/mleibman/SlickGrid
MIT License
6.81k stars 1.98k forks source link

How to validate value without focus-out in slickgrid cell #1117

Open kmKrishna1 opened 8 years ago

kmKrishna1 commented 8 years ago

Hi, I need to validate a slickgrid cell value , after entering 2 digits I need to move focus to next cell. can anyone help me ?

6pac commented 8 years ago

Check out the source of https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example3-editing.html

It contains this validation code, just tweak it.

  function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
      return {valid: false, msg: "This is a required field"};
    } else {
      return {valid: true, msg: null};
    }
  }

then add the validator to the column:

  var grid;
  var data = [];
  var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
    {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.LongText},
    {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
    {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
    {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
  ];

As for moving to the next row, you need to use onCellChange which occurs after the editor commits data

 grid.onCellChange.subscribe(function (e, args) {
    ...
  });

if you look in the slickgrid.js code you can find the parameters:

                 trigger(self.onCellChange, {
                    row: activeRow,
                    cell: activeCell,
                    item: item,
                    grid: self
                  });

and you could set the active cell to the next using this:

   function setActiveCell(row, cell) {
kmKrishna1 commented 8 years ago

How to validate while entering the data.

6pac commented 8 years ago

that's a bit trickier, you're going to have to trap the keypress events, then validate the entered data. If valid then commit it and move cells. You're on your own there, there's nothing pre-made to do that.

kmKrishna1 commented 8 years ago

thanks Ben.

On Wed, May 25, 2016 at 11:53 AM, Ben McIntyre notifications@github.com wrote:

that's a bit trickier, you're going to have to trap the keypress events, then validate the entered data. If valid then commit it and move cells. You're on your own there, there's nothing pre-made to do that.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/mleibman/SlickGrid/issues/1117#issuecomment-221483852

Thanks & Regards K.Murali Krishna.

Vasista Enterprise Solutions Pvt Ltd, 2nd Floor, Sri Rasi Silica Plot No. 1-98/K/19/T Krithika Layout (Opp. Image Garden Function Hall) Madhapur, Hyderabad - 500 081 Contact Numbers: Land Line - 040-64545565

kmKrishna1 commented 8 years ago

By using String.fromCharCode(e.which) I obtained the value of keypressed.