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

[Andrew Mandruk]

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]

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. 

<template> 

  <div id="app"> 

    <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]

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]

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 class=" rowtemp " > 

        <input type="text"  v-model="data.Freight"> 

        </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]

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]

Hi

Any thoughts?

[Vignesh Sivagnanam]

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]

Thank you for solution. Now everything work 

[Vignesh Sivagnanam]

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