We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Selected row position

Is it possible to block header selection and keep the selected line within the grid data?

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.
This has a bad effect and users get lost ... because they no longer know which record is selected.


Thank you!
Marcelo

Attachment: grid1_c3a5a71c.zip

3 Replies

PS Pavithra Subramaniyam Syncfusion Team November 27, 2019 10:39 AM UTC

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 { GridPluginPage } from "@syncfusion/ej2-vue-grids"; 
import { data } from "./datasource"; 
 
Vue.use(GridPlugin); 
 
export default Vue.extend({ 
  data: () => { 
    return { 
      data: data.slice(015) 
    }; 
  }, 
  methods: { 
    created: function(args) { 
      this.$refs.grid.ej2Instances.element.addEventListener( 
        "keydown", 
        this.keyDownHandler 
      ); 
    }, 
    keyDownHandlerfunction(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. 



MR Marcelo Ribeiro November 27, 2019 11:51 AM UTC

Hello Pavithra,

Thank you so much for the correct answer.

Problem solved!

Thank you
Marcelo


PS Pavithra Subramaniyam Syncfusion Team November 28, 2019 06:55 AM UTC

Hi Marcelo,  

Thanks for your update. 

We are glad to hear that your issue has been resolved. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon