Questions about cell editing

[aconley]

I have a few questions regarding cell editing:

1. If I edit a cell and then hit the TAB key to move to the next field, that next field isn’t set to be in edit mode. I can start typing on text fields, but for fields that use other controls, like drop down lists, it would be nice if tabbing to that field triggered edit mode. Is there a built-in way to accomplish this?
2. I’m trying to get cell values to wrap once the user finishes editing the cell. I set the layout option as follows:layout: GridLayout = {rowHeight: 'auto', allowCellsWrap: true};
   When I edit a field with a really long value, and then leave the field to finish editing, I can see the text is wrapping, but the row height isn’t adjusted to show the full text in the cell. Is that the expected behavior, or am I missing something?
   If I resize any column, it triggers the row height auto-adjustment for all rows that need it, so I know it is possible to get this working. Do I have to set up an event handler after cell editing is finished to somehow refresh the grid display or something?

Also, I found that the Typescript typings (and the documentation) for GridEditingAction are incorrect. The values allowed in the type file include 'dblClick', but the code is actually expecting 'doubleClick'. Hopefully that gets corrected in the next release.
Thanks for any help you can provide!

[YavorDashev]

Hi aconley,
I would like to answer your questions in a convenient way:
1. You can set the column properties like in the following code snippet so that when Tab key is pressed the editing of the cell is initialized and when typing a value it will open the dropdown list.
Code:

	columns: GridColumn[] =
	[
	  { label: 'Beverage Type', dataField: 'type', width: 250,
        editor: {
            template: 'autoComplete',
            dropDownButtonPosition: 'right',
            autoOpen: true
            }
        },
	  { label: 'Calories', dataField: 'calories', width: 180 },
	  { label: 'Total Fat', dataField: 'totalfat', width: 'auto', allowResize: false},
	  { label: 'Protein', dataField: 'protein' }
	]

2. For this scenario I have added a work item for it, because this is not expected behavior.
For your last inquiry regarding the typing I wasn’t able to reproduce it and I was able to set the ‘dblClick’ value like so:

	editAction:GridEditingAction = "dblClick";
	sorting = {
		enabled: true,
        action: this.editAction
	}

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[aconley]

Hi Yavor,
On #1, I’ll have to get back to that, because I don’t think what you suggested actually works. I may have a work around, though.
On #2, thank you. Any idea if that will be included in the next release?
On the extra thing about the typings, I might not have made it clear. I agree, the typing allows the incorrect value “dblClick”, but the code is expecting ‘doubleClick’.
If you have a look at this Stackblitz, you’ll see that I set the editing.action to ‘dblClick’. However, the cell is editable only with a single click, so that value doesn’t really work, and if you look in the console, you’ll see this message:

Invalid 'editing_action' property value! Actual value: ''dblClick'', Expected value: ''none', 'click','doubleClick''!

If you change that editing.action value to ‘doubleClick’, you’ll see the editor doesn’t like it (red squiggly line under it), but now you can only edit the cell with a double click. I’m just saying the typing doesn’t match the actual code. And just to make it more confusing, if you enable cell selection, the editing.action is completely ignored and editing is only triggered with a double click.

[aconley]

I’ve confirmed that the funny typing problem, as well as #2 above, have been resolved in smart-webcomponents-angular v10.0.41. Thanks!
I’m still trying to figure out #1 (staying in edit mode while tabbing through fields), so I’ll post here when I have an update.

[Author]

Posts