feat: KsDataGrid - add explicit Enter key handling to all editable columns
- Implement onCellKeyDown callback for editable columns - Enter key now calls tabToNextCell() like Tab key - Addresses user request: 넥스트 셀을 네가 찾지말고 tab key와 같은 기능이 동작하면 됀다
This commit is contained in:
@@ -46,7 +46,8 @@ const emit = defineEmits<{ rowSelected: [row: unknown]; cellValueChanged: [event
|
|||||||
const props = withDefaults(defineProps<{ rows: unknown[]; columns: UiGridColumn[]; loading?: boolean; height?: string; rowSelection?: 'single' | 'multiple' | 'none'; showRowNumber?: boolean }>(), { loading: false, height: '32rem', rowSelection: 'single', showRowNumber: true })
|
const props = withDefaults(defineProps<{ rows: unknown[]; columns: UiGridColumn[]; loading?: boolean; height?: string; rowSelection?: 'single' | 'multiple' | 'none'; showRowNumber?: boolean }>(), { loading: false, height: '32rem', rowSelection: 'single', showRowNumber: true })
|
||||||
|
|
||||||
const columnDefs = computed<ColDef[]>(() => {
|
const columnDefs = computed<ColDef[]>(() => {
|
||||||
const mappedCols: ColDef[] = props.columns.map(column => ({
|
const mappedCols: ColDef[] = props.columns.map((column, idx) => {
|
||||||
|
const colDef: ColDef = {
|
||||||
field: column.field,
|
field: column.field,
|
||||||
headerName: column.header,
|
headerName: column.header,
|
||||||
width: column.width,
|
width: column.width,
|
||||||
@@ -58,8 +59,21 @@ const columnDefs = computed<ColDef[]>(() => {
|
|||||||
filter: column.filterable ?? false,
|
filter: column.filterable ?? false,
|
||||||
editable: column.editable ?? false,
|
editable: column.editable ?? false,
|
||||||
|
|
||||||
valueFormatter: column.formatter ? params => column.formatter?.(params.value, params.data) ?? '' : undefined
|
valueFormatter: column.formatter ? params => column.formatter?.(params.value, params.data) ?? '' : undefined,
|
||||||
}))
|
}
|
||||||
|
|
||||||
|
if (column.editable) {
|
||||||
|
colDef.onCellKeyDown = (event: any) => {
|
||||||
|
if (event.event.key === 'Enter') {
|
||||||
|
event.event.preventDefault()
|
||||||
|
event.api.stopEditing(false)
|
||||||
|
event.api.tabToNextCell(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return colDef
|
||||||
|
})
|
||||||
|
|
||||||
if (props.showRowNumber) {
|
if (props.showRowNumber) {
|
||||||
const rowNumCol: ColDef = {
|
const rowNumCol: ColDef = {
|
||||||
@@ -143,8 +157,8 @@ function focusRow(rowIndex: number, colKey?: string): void {
|
|||||||
const col = colKey || (props.columns[0]?.field ?? '')
|
const col = colKey || (props.columns[0]?.field ?? '')
|
||||||
|
|
||||||
gridApi.value.ensureIndexVisible(rowIndex)
|
gridApi.value.ensureIndexVisible(rowIndex)
|
||||||
if (col) {
|
|
||||||
gridApi.value.setFocusedCell(rowIndex, col)
|
gridApi.value.setFocusedCell(rowIndex, col)
|
||||||
|
if (col) {
|
||||||
gridApi.value.startEditingCell({ rowIndex, colKey: col })
|
gridApi.value.startEditingCell({ rowIndex, colKey: col })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user