1. Home
  2. Forum
  3. Vue
  4. Disable column from tabbing

Disable column from tabbing

Can i somehow to disable specific column in the grid from selecting it using "Tab"?

For example we have 3 columns in the grid:

Expected behavior:
1. Click on first cell of the first row 
2. "Tab" -> second cell of the first row selected
3.  "Tab" -> first cell of the second row selected

Actual behavior:
1. Click on first cell of the first row 
2. "Tab" -> second cell of the first row selected
3.  "Tab" -> third cell of the first row selected

12 Replies 1 reply marked as answer
SM Shalini Maragathavel Syncfusion Team November 4, 2020 12:20 PM UTC

Hi Andrew, 

Greetings from Syncfusion support.

We are not able to clearly understand your requirement from the provided information. Do you wish to disable specific columns in the Grid from selecting it using the tab in edit mode or normal traversing in the Grid? If not can you please elaborate on it with a pictorial representation(if possible) in order to better understand it so that we can check and provide the solution based on that. 

Let us know if you have any concerns. 

Regards, 
Shalini M. 


AM Andrew Mandruk November 4, 2020 04:31 PM UTC

Hi, I need to disable specific columns in the Grid from selecting it using the tab in normal traversing.

SM Shalini Maragathavel Syncfusion Team November 11, 2020 02:59 AM UTC

Hi Andrew, 

Sorry for the delay in providing the response.

By default when we press the tab key it traverse through the every cells of the Grid. Based on your query we understood that you want to disable specific columns in the Grid from selecting it using the tab. So, we have provided a custom solution for your requirement by overriding the default focus method of Grid as demonstrated in the below code snippet,  
App.vue 
 
 
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      :editSettings="editSettings" 
      :created="created" 
      : recordClick=” recordClick” 
      height="273px" 
    > 
      <e-columns> 
      ... 
    </ejs-grid> 
  </div> 
</template> 
<script> 
 
 
Vue.use(GridPlugin); 
let isskipe = false; 
 
export default { 
  data() { 
    return { 
      data: data, 
       
    }; 
  }, 
  methods: { 
recordClick: function (args) { 
      if (isskipe) { 
        isskipe = false; 
      } 
    }, 
   created: function (args) { 
      
      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      grid.focusModule.focus = function (e) { 
      
         this.parent.notify("virtaul-cell-focus", e); 
      grid.focusModule.removeFocus(); 
      if ( 
        e && 
        e.key=== "Tab" && 
        grid.getColumnByIndex(parseInt(e.target.getAttribute("aria-colindex"),10)) 
          .field === "CustomerID" 
      ) { 
         isskipe = true; 
        var a = grid.focusModule.getContent().getFocusInfo().element 
          .nextElementSibling; 
if (a.getAttribute("aria-colindex") === "2") { 
            a = grid.focusModule.getContent().getFocusInfo().element 
              .nextElementSibling.nextElementSibling; 
          } 
        var newEle = { 
          element: a, 
          elementToFocus: a, 
          outline: true, 
          uid: a.parentElement.getAttribute("data-uid") 
        }; 
        grid.focusModule.addFocus(newEle, e); 
      } else if (isskipe) { 
        var a; 
        if(parseInt(e.target.getAttribute("index"),10)===0){ 
         a = grid.focusModule.getContent().getFocusInfo().element 
          .nextElementSibling; 
        }else{ 
          a = grid.focusModule.getContent().getFocusInfo().element; 
           
        } 
        if (a == null) { 
          a = grid.focusModule.getContent().getFocusInfo().element.parentElement 
            .nextElementSibling.firstElementChild; 
        } 
        var newEle = { 
          element: a, 
          elementToFocus: a, 
          outline: true, 
          uid: a.parentElement.getAttribute("data-uid") 
        }; 
        grid.focusModule.addFocus(newEle, e); 
      } else { 
        grid.focusModule.addFocus( 
          grid.focusModule.getContent().getFocusInfo(), 
          e 
        ); 
        } 
</script> 


In the above sample we have skipped the orderDate column from focusing.

Please find the  below sample for more information. 

Sample : https://codesandbox.io/s/vue-template-forked-s5kmc?file=/src/App.vue

Please get back to us if you need further assistance.

Regards,
Shalini M. 


Marked as answer
AM Andrew Mandruk November 11, 2020 11:44 AM UTC

Thank you for solution.
If I try to use this solution and want to skip the last column, it causes error on "Tab"
Example https://codesandbox.io/s/vue-template-forked-o58cq?file=/src/App.vue  

SM Shalini Maragathavel Syncfusion Team November 12, 2020 02:39 PM UTC

Hi Andrew, 

Sorry for the  inconvenience caused.

By default in EJ2 Grid when we press the tab key it traverse through the every cells of the Grid. Based on your query we understood that you want to disable last column in the Grid from selecting it using the tab. So, we have provided a custom solution for your requirement by overriding the default focus method of Grid as demonstrated in the below code snippet,  
App.vue 
 
 
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      :editSettings="editSettings" 
      :created="load" 
      : recordClick=” recordClick” 
      height="273px" 
    > 
      <e-columns> 
      ... 
    </ejs-grid> 
  </div> 
</template> 
<script> 
 
 
Vue.use(GridPlugin); 
let isskipe = false; 
 
export default { 
  data() { 
    return { 
      data: data, 
       
    }; 
  }, 
  methods: { 
recordClick: function (args) { 
      if (isskipe) { 
        isskipe = false; 
      } 
    }, 
    load: function (args) { 
      
      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      grid.focusModule.focus = function (e) { 
      
         this.parent.notify("virtaul-cell-focus", e); 
      grid.focusModule.removeFocus(); 
      if ( 
        e && 
        e.key=== "Tab" && 
        grid.getColumnByIndex(parseInt(e.target.getAttribute("aria-colindex"),10)) 
          .field === "CustomerID" 
      ) { 
         isskipe = true; 
        var a = grid.focusModule.getContent().getFocusInfo().element.parentElement. 
          .nextElementSibling.firstElementChild; 
        var newEle = { 
          element: a, 
          elementToFocus: a, 
          outline: true, 
          uid: a.parentElement.getAttribute("data-uid") 
        }; 
        grid.focusModule.addFocus(newEle, e); 
      } else if (isskipe) { 
        var a; 
        if(parseInt(e.target.getAttribute("index"),10)===0){ 
         a = grid.focusModule.getContent().getFocusInfo().element 
          .nextElementSibling; 
        }else{ 
          a = grid.focusModule.getContent().getFocusInfo().element; 
           
        } 
        if (a == null) { 
          a = grid.focusModule.getContent().getFocusInfo().element.parentElement 
            .nextElementSibling.firstElementChild; 
        } 
        var newEle = { 
          element: a, 
          elementToFocus: a, 
          outline: true, 
          uid: a.parentElement.getAttribute("data-uid") 
        }; 
        grid.focusModule.addFocus(newEle, e); 
      } else { 
        grid.focusModule.addFocus( 
          grid.focusModule.getContent().getFocusInfo(), 
          e 
        ); 
        } 
</script> 



Please find the  below sample for more information. 

Please get back to us if you need further assistance.

Regards,
Shalini M. 




AM Andrew Mandruk November 12, 2020 02:42 PM UTC

Thank you, works perfectly!


PK Prasanna Kumar Viswanathan Syncfusion Team November 16, 2020 05:26 AM UTC

Hi Andrew, 
 
We are happy to hear that the provided solution has been working fine at your end. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


RO Ronit March 25, 2022 09:32 AM UTC

My requirement is same but in angular but i want global solution for any tables having actionable columns that is if column having hyperlink or delete functionality. For example, a table with name having hyperlink then mobile no, dob which are non actionable columns then the last action column with delete particular row. In this i want tabbing only on actionable columns and prevent tabbing on non actionable columns. 


PS Pavithra Subramaniyam Syncfusion Team March 29, 2022 12:50 PM UTC

Hi Ronit,


We have prepared a simple sample to skip the focus on a particular column in the Angular Grid. Please refer to the below sample in which e have skipped the focus while tabbing for the “OrderDate” column.


https://stackblitz.com/edit/angular-yvpvg5?file=app.component.ts


Please get back to us if you need further assistance on this.


Regards,

Pavithra S


RO Rocky April 13, 2022 11:44 AM UTC

Hi , hi am looking exactly in angular ejs grid ,I want skip non editable multiple cells , Ex:  I have 5 columns 1st column cell is hyperlink/actionable  rest 3 non actionable I want skip non actionable 3 cells  , and 4th and 5the  columns are actionable I want focus on actionable/ hyperlink ,  I want to apply this for multiple ejs grid for different screen so I need global solution for this


RR Rajapandi Ravi Syncfusion Team April 15, 2022 09:15 AM UTC

Hi Rocky,


Currently we are working on this query with your shared information, and we will update you the details on 18th APR 2022. Until then we appreciate your patience.


Regards,

Rajapandi R


PS Pavithra Subramaniyam Syncfusion Team April 19, 2022 02:33 PM UTC

Hi Rocky,


Thanks for your patience.


We have prepared a simple Angular Grid sample in which we have used service to reuse the created event for multiple Grids. Please refer to the below sample for more information.


https://stackblitz.com/edit/angular-yknppm-bmstmt?file=async-grid.component.ts


Regards,

Pavithra S


Loader.
Up arrow icon