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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Selected row position

Thread ID:

Created:

Updated:

Platform:

Replies:

149442 Nov 26,2019 01:56 PM UTC Nov 28,2019 06:55 AM UTC Vue 3
loading
Tags: Data Grid
Marcelo Ribeiro
Asked On November 26, 2019 01:56 PM UTC

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 [Syncfusion]
Replied On 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. 


Marcelo Ribeiro
Replied On November 27, 2019 11:51 AM UTC

Hello Pavithra,

Thank you so much for the correct answer.

Problem solved!

Thank you
Marcelo

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon