Grid column with width="0" and Tabbing to this column causes "maximum call stack size exceeded"

Question

Example: https://codesandbox.io/s/grid-with-template-l0z4e?file=/src/App.vue

Click to the first cell and press "Tab" 2 times (Column, between the second and the last columns - has width="0")

Expected behavior:

The last column cell is active.

Actual behavior:

After second "Tab" press, "maximum call stack size exceeded" error shown in console.

Manivel Sellamuthu · Accepted Answer

Hi Andrew,

Greetings from Syncfusion support.

From your query we can understand that you want to hide the “Freight” column, for that you have provided width as “0” for that column. In grid width property is used to define the width of the particular column cells.

So while setting the width as 0, this will applies to the particular column cells value, which leads to focus issues. So we suggest you set visible property as false to hide a particular column. Please refer the below code example and sample for more information.

<ejs-grid

>

<e-columns>

<e-column

field="Freight"

headerText="Freight"

textAlign="Right"

editType="numericedit"

format="C2"

width="120"

:visible="false"

></e-column>

</e-columns>

</ejs-grid>

</div>

</template>

</script>

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

Please let us know, if you need further assistance.

Regards,

Manivel

Andrew Mandruk · Answer

Hello, thank you for the solution.

Can I, somehow, reach the same behavior (as in your example), but with custom row template used?

In the example, table heading is hidden and tab works well on it, but i cannot get the same behavior in the row cells.

Example with rowTemplate:

https://codesandbox.io/s/grid-with-template-and-hidden-column-k1w3f

Vignesh Sivagnanam · Answer

Hi Andrew

Thanks for the update,

Based on your query we can understand that you want to hide the “Freight” column in the row template. The row template has options to display the custom <tr> element, so the visible property is only applied to the grid’s column.

For row template we want to hide the row element by using the CSS display property. Please refer the below Code snippet for your reference,

Code Example:

</td>

…………

………..

<style>

.rowtemp {

display: none;

}

</style>

Please refer the modified sample for your reference,

Sample : https://codesandbox.io/s/grid-with-template-and-hidden-column-forked-mw9m5

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

Regards,

Vignesh Sivagnanam

Andrew Mandruk · Answer

Hello.

Yes, it hides the columns, but the main goal is not reached: navigating through the cells using "Tab" key (without getting 'maximum call stack' error).

So, as i understand, i can use only this solution for my case?:

https://www.syncfusion.com/forums/159385/disable-column-from-tabbing

Andrew Mandruk · Answer

HiAny thoughts?

Vignesh Sivagnanam · Answer

Hi Andrew 

Sorry for the late reply 

Based on your query you need to skip the column based on column visibility in the grid while pressing the tab key. We have prepared a sample based on your query to skip the hided columns while tabbing in the load event.  

Please refer the below Code Example for your reference, 

Code Example: 




load: function () { 
      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      grid.keyConfigs.tab = ""; // default key action prevented 

      grid.element.addEventListener( 
        "keydown", 
        function (e) { 
          // navigation rowcell when pressing tab key 
          if (e.code == "Tab") { 
            if (e.target.classList.contains("e-rowcell")) { 
              e.preventDefault(); 
              e.target.setAttribute("tabindex", "-1"); 

              var targEle = e.target.nextElementSibling 
                ? e.target.nextElementSibling 
                : e.target.parentElement.nextElementSibling 
                ? e.target.parentElement.nextElementSibling.firstElementChild 
                : grid.element; 
              if (targEle.classList.contains("e-rowcell")) { 
                // next cell focused when target element is hide 
                if (targEle.classList.contains("e-hide")) { 
                  targEle = targEle.nextElementSibling 
                    ? targEle.nextElementSibling 
                    : targEle.parentElement.nextElementSibling; 
                } 
                targEle.setAttribute("tabindex", "0"); 
                document.activeElement.blur(); 
                e.target.classList.remove("e-focused", "e-focus"); 
                targEle.focus(); 
                targEle.classList.add("e-focused", "e-focus"); 
              } else { 
                targEle.focus(); 
              } 
            } else { 
              var ele = grid.element.querySelector(".e-focused"); 
              if (ele) { 
                ele.classList.remove("e-focused", "e-focus"); 
              } 
            } 
          } 
        }.bind(this) 
      ); 

Please refer the below Sample and Documentation for your reference 

Sample: https://codesandbox.io/s/grid-with-template-and-hidden-column-forked-2cghg 

Documentation : https://ej2.syncfusion.com/vue/documentation/api/grid/#load 

Please get back to us if you need further assistance. 
 
Regards, 
Vignesh Sivagnanam

Andrew Mandruk · Answer

Thank you for solution. Now everything work

Vignesh Sivagnanam · Answer

Hi Andrew 

We are happy to hear that the provided solution works fine at your end. 

Please get back to us if you need any further assistance. 

Regards, 
Vignesh Sivagnanam