Cll editing on key press

[Peter]

Hi,

I’m new to this grid as I have previously been using Dhtmlx grid.

I’m experiencing an odd behavior when trying to start editing a cell.
The grid selects the cells (fills cell with blue color) without stating edit mode, which is a nice behavior and when I start to type, the cell goes into edit mode, which I just how I would like it – but, the first key press is lost.

It’s like the first key press activates the cell editor, but is not also used as input for the cell.

Example: I’m currently on a cell (a date field), it’s filled with blue color and the editor hasn’t yet been activated. Then I want to type the number 12 and then they “1” activates the editor and the “2” is inserted into the editor as the first entry.

How do I fix this?

[Markov]

Hi,

I tried this, but the editing is correct. The presed keys go into the edited cell so may be you can share a link to an example and provide steps to reproduce this.

[Peter]

Hmm apparently it seems that it has to do with how fast I type the value.

Ok, so let’s say that this works as intended, how do I act on what was typed in, and potentially change the value?

One thing could be to complete a date if the user types like “2” and then leaves the cell – I want to finis the value adding e.g. “02-02-2023”.
Also if the user types “0202” I want to change it to “02-02-2023” and for “02022023” -> “02-02-2023”.

Where is the correct place to catch this event and perform the action?

[Steven Peterson]

Hi,

You can use the endEdit in combination with the setCellValue method.
Here is an example of modifying after committing the edit: https://codepen.io/Steevee222/pen/WNgEQmz

I hope this helps, if not, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Peter]

Hi svetoslav,

Thank you for your response.

I have tried using this event and it triggers as expected, however the value that i returned at this point is a JavaScript Date object, not a text value, so it seems that if I’m to change what the user typed in the field, I need to catch the value before this point in time.

How/where should I be doing this?

[Steven Peterson]

Hi,

To do this, you should either use a plain string column, not a date column or have a custom date editor with which you will manage the returned value.
For a custom editor visit this demo: https://www.htmlelements.com/demos/grid/editing-cascading/

The editor property custom object with ‘template’ property which defines the editor type, ‘settings’ property which defines the custom editor’s properties, ‘onInit(int row, string column, object editor, object rowData): void’, ‘onRender(int row, string column, object editor, object rowData): void’, ‘setValue(object value): void’ and ‘getValue(object value): any’ callback functions.

Alternatively, you can use a column with a type of date and have cellsFormat.
For example: { label: ‘Order Date’, cellsFormat: ‘MM/dd/yyyy’, dataField: ‘date’ }

Best Regards,
Steven Peterson

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts