fix: KsDataGrid - use correct cellKeyDown event handler from AgGridVue
- Remove invalid onCellKeyDown from colDef - Add onCellKeyDown handler to AgGridVue component - Enter key now properly triggers tabToNextCell for editable columns
This commit is contained in:
@@ -46,34 +46,20 @@ 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, idx) => {
|
const mappedCols: ColDef[] = props.columns.map(column => ({
|
||||||
const colDef: ColDef = {
|
field: column.field,
|
||||||
field: column.field,
|
headerName: column.header,
|
||||||
headerName: column.header,
|
width: column.width,
|
||||||
width: column.width,
|
minWidth: column.minWidth ?? 80,
|
||||||
minWidth: column.minWidth ?? 80,
|
maxWidth: column.maxWidth,
|
||||||
maxWidth: column.maxWidth,
|
flex: column.flex ?? (column.width ? undefined : 1),
|
||||||
flex: column.flex ?? (column.width ? undefined : 1),
|
|
||||||
|
|
||||||
sortable: column.sortable ?? true,
|
sortable: column.sortable ?? true,
|
||||||
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 = {
|
||||||
@@ -126,6 +112,14 @@ function onCellValueChanged(event: CellValueChangedEvent): void {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onCellKeyDown(event: any): void {
|
||||||
|
if (event.event.key === 'Enter' && event.colDef?.editable) {
|
||||||
|
event.event.preventDefault()
|
||||||
|
event.api.stopEditing(false)
|
||||||
|
event.api.tabToNextCell(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function onSortChanged(params: { api: { redrawRows: () => void; refreshCells: (options: { force: boolean }) => void } }): void {
|
function onSortChanged(params: { api: { redrawRows: () => void; refreshCells: (options: { force: boolean }) => void } }): void {
|
||||||
params.api.redrawRows()
|
params.api.redrawRows()
|
||||||
}
|
}
|
||||||
@@ -190,6 +184,7 @@ defineExpose({ focusRow, redrawRows, gridApi })
|
|||||||
@sort-changed="onSortChanged"
|
@sort-changed="onSortChanged"
|
||||||
@row-clicked="onRowClicked"
|
@row-clicked="onRowClicked"
|
||||||
@cell-value-changed="onCellValueChanged"
|
@cell-value-changed="onCellValueChanged"
|
||||||
|
@cell-key-down="onCellKeyDown"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user