Selected row position

[Marcelo Ribeiro]

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

[Pavithra Subramaniyam]

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> 

 

 

Sample: https://codesandbox.io/s/149442-selection-customized-nxrei 

 

 

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> 

 

 

Sample: https://codesandbox.io/s/149442-selection-customized-nxrei  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Pavithra S. 

[Marcelo Ribeiro]

Hello Pavithra,

Thank you so much for the correct answer.

Problem solved!

Thank you

Marcelo

[Pavithra Subramaniyam]

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.