Keyborad not work for SfNumericTextBox in a GridColumn Template

[Brice FROMENTIN]

Hello,

I try to simulate a one click field edition in the grid using a binding on ReadOnly or Enabled/Disabled. I works well for the ckeckboxes but for the SfNumericTextBox  only the spinner buttons works.

Here is my code sample :

@inherits WizardStepComponentBase

@inject ApplicationState application

@inject ActionBarState actionState;

@using System.Text.Json

@using Kairos.Models.Entities

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Inputs

<SfGrid @ref="grid" TValue="CollectiviteTypeOperation" datasource="@Model.CollectiviteTypeOperations" AllowResizing=true Width="100%" Height="100%">

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

    <GridEditSettings AllowEditing="@(!Parameters.Wizard.IsReadOnly)" AllowEditOnDblClick="true" />

    <GridColumns>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.Nature)" AllowEditing="false" Width="100px">

            <Template>

                @if (((CollectiviteTypeOperation)context).Nature == "D")

                {

                    <span>Dépenses</span>

                }

                else

                {

                    <span>Recettes</span>

                }

            </Template>

        </GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.Libelle)" AllowEditing="false" Width="100%"></GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.RevalorisationAutomatique)" Width="105px" TextAlign="@TextAlign.Center" DisplayAsCheckBox="true">

            <Template>

                <SfCheckBox Checked="((CollectiviteTypeOperation)context).RevalorisationAutomatique" Disabled="Parameters.Wizard.IsReadOnly" ValueChange="OnRevalorisationAutomatiqueChange" TChecked="bool" />

            </Template>

        </GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.PresenceTypeRevalorisation)" Width="150px" TextAlign="@TextAlign.Center" DisplayAsCheckBox="true">

            <Template>

                <SfCheckBox Checked="((CollectiviteTypeOperation)context).PresenceTypeRevalorisation" Disabled="Parameters.Wizard.IsReadOnly" ValueChange="OnPresenceTypeRevalorisationChange" TChecked="bool" />

            </Template>

        </GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.PourcentageMaxDepassement)" Width="150px" TextAlign="@TextAlign.Right" EditType="@EditType.NumericEdit">

            <Template>

                @{

                    var value = ((CollectiviteTypeOperation)context).PourcentageMaxDepassement;

                    <SfNumericTextBox TValue="decimal" Format="n2" Value="@value" Enabled="!Parameters.Wizard.IsReadOnly" ValueChanged="OnPourcentageMaxDepassementChange"></SfNumericTextBox>

                }

            </Template>

        </GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.MontantMaxDepassement)" Width="150px" TextAlign="@TextAlign.Right" EditType="@EditType.NumericEdit"></GridColumn>

    </GridColumns>

</SfGrid>

@code

{

    public override string Tache => "Collectivites";

    public override string Etape => "Revalorisations";

    public override string Champ => "";

    SfGrid<CollectiviteTypeOperation> grid;

    Collectivite Model;

    protected override void OnParametersSet()

    {

        base.OnParametersSet();

        Model = (Collectivite)Parameters.Wizard.Model;

        actionState.ReadOnlyChanged = ReadOnlyChanged;

        Console.WriteLine("Types = " + JsonSerializer.Serialize(Model.CollectiviteTypeOperations));

    }

    protected void ReadOnlyChanged(FullParameters parameters)

    {

        this.StateHasChanged();

    }

    protected void OnRevalorisationAutomatiqueChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)

    {

        var record = grid.GetSelectedRecords().Result[0];

        record.RevalorisationAutomatique = args.Checked;

    }

    protected void OnPresenceTypeRevalorisationChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)

    {

        var record = grid.GetSelectedRecords().Result[0];

        record.PresenceTypeRevalorisation = args.Checked;

    }

    protected void OnPourcentageMaxDepassementChange(decimal args)

    {

        var record = grid.GetSelectedRecords().Result[0];

        record.PourcentageMaxDepassement = args;

    }

}

[Rahul Narayanasamy]

Hi Brice, 

Greetings from Syncfusion. 

Query: Keyborad not work for SfNumericTextBox in a GridColumn Template 

We have  validated your query with the provided information. We suggest you to set @onkeydown:stopPropagation as true to the parent of the SfNumericTextBox to resolve the problem. Please find the changes for this in below code snippet. 

 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        . . . 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"> 

            <Template> 

                @{ 

                    Order po = context as Order; 

                    <div @onkeydown:stopPropagation="true"> 

                        <SfNumericTextBox TValue="double?" ShowSpinButton=false Placeholder="" Min="1" @bind-Value="@po.Freight" CssClass="e-outline e-small"> 

                        </SfNumericTextBox> 

                    </div> 

                } 

            </Template> 

 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

Sample: https://www.syncfusion.com/downloads/support/forum/159066/ze/Sample-1248483374  

If you are still facing the problem, then could you please share the below information. It will be helpful to validate and provide a better solution. 

• Video demonstration of the problem.
• Reproduce the problem in the provided sample.
• Share a simple reproduceable sample if possible.

Regards, 

Rahul 

[Brice FROMENTIN]

Thanks it works as expected. Do you plan to fix this issue ?

[Rahul Narayanasamy]

Hi Brice, 

Thanks for the update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. 

This was not an issue. Since we have bounded mouse click and keyboard events at the source level. So if any components are rendered in the templates then stopPropagation will prevent the propagation to the same events bounded in the source and it will allow the click actions for the components rendered in the templates. 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Brice FROMENTIN]

Thanks for the explanation.

[Rahul Narayanasamy]

Hi Brice, 

Thanks for the update. 

Please get back to us if you need further assistance. 

Regards, 

Rahul