|
App.vue
<template>
<div class="col-lg-12 control-section">
<ejs-grid ref="grid" id="grid" :created="created" :dataSource="data" :allowPaging="true">
. . .
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource";
Vue.use(GridPlugin);
export default Vue.extend({
data: () => {
return {
data: data.slice(0, 15)
};
},
methods: {
created: function(args) {
this.$refs.grid.ej2Instances.element.addEventListener(
"keydown",
this.keyDownHandler
);
},
keyDownHandler: function(e) {
if (e.keyCode === 38 || e.key === "ArrowUp") {
var row = this.$refs.grid.ej2Instances.getRowInfo(e.target);
if (row && row.rowIndex === 0) {
this.$refs.grid.ej2Instances.selectRow(0); //if it is a first record, select the row again based on the condition
}
}
}
},
provide: {
grid: [Page]
}
});
</script>
|
|
<style>
.e-grid .e-rowcell.e-focused:not(.e-menu-item),
.e-grid .e-editedbatchcell {
box-shadow: none;
}
</style>
|
