1. Home
  2. Forum
  3. Blazor
  4. Tab Key Problem in SfGrid Edit Mode

Tab Key Problem in SfGrid Edit Mode

Hi,


1- How can we turn off the tabindex of the Grid Headers. I want to turn off the navigation in the Grid Headers with the Tab key.


 2- After entering the edit mode with one click on the grid and changing the relevant column, I want it to enter edit mode with the "tab" in the adjacent column, but I am having a problem focusing on a different place. Details are attached.


I am using Batch Mode as Edit Mode.


Thanks in advance.


Attachment: SfGrid_Edit_Tab_Key_Problem_bb40f24c.zip

5 Replies
MS Monisha Saravanan Syncfusion Team August 14, 2023 01:54 PM UTC


Hi Mustafa,


Greetings from Syncfusion support


We would like to inform that by default on pressing Tab key will navigate to the adjacent cell. But we could not able to replicate the reported issue at our end. We suspect that you have done some customization at Grid ( using Template/EditTemplate). So before proceeding further with your requirement. Kindly share the below mentioned details from your end.


  1. Share us the entire Grid code snippet.
  2. Share us the Nuget version used at your end.
  3. If possible kindly share us a simple issue replicating sample from your end.


The above requested details would be very helpful for us to validate the reported issue at our end.


Regards,

Monisha


MK Mustafa Kuyucu August 17, 2023 09:17 AM UTC

Hi Monisha,


We use as version 20.4.0.54


We created the problem in a simple way.


We are waiting for your help. 


Attachment: GridTabProblems_32e57303.zip

MS Monisha Saravanan Syncfusion Team August 18, 2023 12:21 PM UTC


Hi Mustafa,


Thanks for the information.


We have reviewed your shared sample and before proceeding further we would like to inform that we have fixed some issues related to keyboard navigation feature in our latest version (22.2.9). So kinldy upgrade to our latest version and check the reported issue at your end. Please find the latest Nuget package from below.


Nuget : https://www.nuget.org/packages/Syncfusion.Blazor.Grid


We would like to inform that setting tabindex to -1 will not perform edit/ focus. Also we have faced some script error in the shared sample. We have resolved the error and attached the modified sample. Kindly refer the attached sample and if you still face difficulties then kindly share us the video demonstration of the issue along with the expected behavior/result.


Please let us know if you have any concerns.



Attachment: GridTabProblemsmaster_191cb4cf.zip

MK Mustafa Kuyucu August 23, 2023 08:36 AM UTC

Hi Monisha,


In the example you gave, there is a focus problem in the last column.


While navigating with Tab Key, we are having a problem in the columns with edit templates and not focusing on the edit.


We customized the example a little more.

Attached is the Screen Video and sample.


Thanks in advance.


Attachment: BlazorApp_1d7e54c9.zip

MS Monisha Saravanan Syncfusion Team August 24, 2023 08:55 AM UTC


Hi Mustafa,


We could able to reproduce the reported behavior at our end in the shared sample. We would like to inform that when using EditTemplate feature of DataGrid it is suggested to use ID property for the editor component to provide the proper mapping value between the GridColumn and EditTemplate. Kindly refer the attached code snippet and modified sample for your reference.


Note : The ID property should be same as the corresponding GridColumn field name.


 

<SfGrid ID="KalemGrid" @ref="SfKalemGrid" DataSource="@KalemModels" TValue="KalemModel" AllowTextWrap="true" EnableStickyHeader="true" EnableAdaptiveUI="true" Width="100%">

    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings>

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch" ShowConfirmDialog="false" NewRowPosition="NewRowPosition.Bottom"></GridEditSettings>

    <GridEvents  CellSelected="KalemCellSelectHandler" CellSaved="KalemCellSaveHandler" TValue="KalemModel"></GridEvents>

    <GridTextWrapSettings WrapMode="WrapMode.Header"></GridTextWrapSettings>

 

    <GridTemplates>

        <EmptyRecordTemplate Context="TemplateContext">

            <span></span>

        </EmptyRecordTemplate>

 

    </GridTemplates>

 

    <GridColumns>

        <GridColumn Context="BFContext" Field="@nameof(KalemModel.BirimFiyat)" HeaderText="Fiyat" Format="N2" TextAlign="TextAlign.Right" Width="120"

                    EditorSettings="@(new NumericEditCellParams(){Params=new NumericTextBoxModel<object>(){ShowSpinButton=false, Min=0, Decimals = 2, Format = "N2", ValidateDecimalOnType = true}})">

            <Template>

                @{

                    var value = (BFContext as KalemModel);

                    var BaskBF = "";

                    if (value.Miktar == 0)

                    {

                        value.BirimFiyat = 0;

                        BaskBF = value.BirimFiyat.Value.ToString();

                    }

                    else

                    {

                        value.BirimFiyat = (value.ListeFiyati / value.Miktar);

                        BaskBF = value.BirimFiyat.ToString();

                    }

                    <span>@BaskBF</span>

                }

            </Template>

 

            <EditTemplate>

                @{

                    var value = (BFContext as KalemModel);

                    <SfNumericTextBox Value="value.BirimFiyat" ShowSpinButton="false" Step="0" Min="0" TValue="double?" ID="BirimFiyat"></SfNumericTextBox>

                }

            </EditTemplate>

 

        </GridColumn>

 

 

        <GridColumn Context="TContext" Field="@nameof(KalemModel.Tutar)" HeaderText="Tutar" Format="N2" TextAlign="TextAlign.Right" Width="120"

                    EditorSettings="@(new NumericEditCellParams(){Params=new NumericTextBoxModel<object>(){ShowSpinButton=false, Min=0, Decimals = 2, Format = "N2", ValidateDecimalOnType = true}})">

            <Template>

                @{

                    var value = (TContext as KalemModel);

 

                    value.Tutar = (value.BirimFiyat * value.Miktar);

                            

                    <span>@value.Tutar</span>      

                }

            </Template>

 

            <EditTemplate>

                @{

                    var value = (TContext as KalemModel);

                    <SfNumericTextBox Value="value.Tutar" ShowSpinButton="false" Step="0" Min="0" TValue="double?" ID="Tutar"></SfNumericTextBox>

                }

            </EditTemplate>

 

        </GridColumn>

 

    </GridColumns>

 

</SfGrid>

 

 



Please let us know if you have any concerns.


Regards,

Monisha


Attachment: BlazorApp12master_5068768d.zip

Loader.
Up arrow icon