JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Cll editing on key press
Tagged: cell-edit
- This topic has 5 replies, 3 voices, and was last updated 1 year, 9 months ago by Steven Peterson.
-
AuthorPosts
-
March 3, 2023 at 10:38 am #104455PeterParticipant
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?
March 3, 2023 at 12:44 pm #104458MarkovKeymasterHi,
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.
March 3, 2023 at 1:34 pm #104462PeterParticipantHmm 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?
March 6, 2023 at 11:00 am #104480Steven PetersonParticipantHi,
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/WNgEQmzI hope this helps, if not, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/March 6, 2023 at 12:13 pm #104483PeterParticipantHi 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?
March 7, 2023 at 5:56 am #104486Steven PetersonParticipantHi,
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 PetersonSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.