Hi Marcelo,
Thanks for contacting Syncfusion.
Query1: If you navigate with an up arrow, when it reaches the first line, it raises the selection to the header and deselects the last selected line. I need him to stop at the first line when he reaches the top of the grid, he can't raise the selection to the header.
By default while traversing through arrow keys from content to header the selection will be cleared. However you can override the behavior by Selecting the row again. Please find the below code example and sample for more information.
|
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>
|
Query:2: is it possible to disable outline:
Yes. It is just a visual feedback that indicates which cell is currently focused on the Grid. You can disable the outline using the below CSS. Please find the below style and sample for more information.
|
<style>
.e-grid .e-rowcell.e-focused:not(.e-menu-item),
.e-grid .e-editedbatchcell {
box-shadow: none;
}
</style>
|
Please get back to us, if you need further assistance.
Regards,
Pavithra S.
