disable mouse wheel

[Walter Martin]

How can I disable the mouse  wheel in a numeric textbox when it's placed inside a DataGrid ?

The solution you proposed in another tiket works when the numeric taxtbox is alone in a page but it's not working when you have more then one inside a DataGrid like the one below

        <SfGrid @ref="GridBolleDet" ID="GridListini" Width="100%" TValue="BolleDetDTO" AllowSorting=true DataSource="Elencodetbolle" Query="@GetBolleQuery(bolle)" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

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

            <GridEvents RowSelected="RowSelectHandler" OnActionBegin="@ActionBeginDettagli" TValue="BolleDetDTO"></GridEvents>

            <GridSortSettings>

                    <GridSortColumns>

                        <GridSortColumn Field="Categoria" Direction="SortDirection.Ascending"></GridSortColumn>

                    </GridSortColumns>

            </GridSortSettings>

            <GridColumns>

                <GridColumn Field=@nameof(BolleDetDTO.BolleDetId) IsIdentity=true IsPrimaryKey=true Visible=false></GridColumn>

                <GridColumn Field=@nameof(BolleDetDTO.Articoloid) HeaderText="Cod.Articolo" Width="100" AllowEditing="false"></GridColumn>

                <GridColumn Field=@nameof(BolleDetDTO.Descrizione) HeaderText="Descrizione" AutoFit="true" AllowEditing="CanEditColumn"></GridColumn>

                <GridColumn Field=@nameof(BolleDetDTO.Qta) HeaderText="Qta" Width="180">

                    <EditTemplate Context="context1">

                            <SfNumericTextBox ID="numeric" CssClass="editcell" TValue="int" @bind-Value="@((context1 as BolleDetDTO).Qta)" ShowSpinButton="true" ShowClearButton="false">

                                    // <NumericTextBoxEvents TValue="int" Created='() => { onCreated("numeric"); }'></NumericTextBoxEvents>

                            </SfNumericTextBox>

                    </EditTemplate>

                </GridColumn>

                <GridColumn Field=@nameof(BolleDetDTO.Tipologia) HeaderText="Tipologia" AutoFit="true" AllowEditing=false></GridColumn>

                <GridColumn Field=@nameof(BolleDetDTO.Categoria) HeaderText="Categoria" AutoFit="true" AllowEditing="false"></GridColumn>

            </GridColumns>

        </SfGrid>

[Naveen Palanivel]

Hi Walter Martin,

We reviewed your query, and it seems that you want to disable the mouse wheel in a numeric textbox when it's placed inside a DataGrid. We have achieved this requirement using a JavaScript solution. Please refer to the provided code snippet and sample for more information.

 

    <GridColumn Field=@nameof(BolleDetDTO.Descrizione) HeaderText="Descrizione" AutoFit="true" AllowEditing="true"></GridColumn>

 

        <GridColumn Field=@nameof(BolleDetDTO.Qta) HeaderText="Qta" Width="180">

 

            <EditTemplate Context="context1">

 

                <SfNumericTextBox ID="numeric" TValue="int" @bind-Value="@((context1 as BolleDetDTO).Qta)" ShowSpinButton="true" ShowClearButton="false">

                    <NumericTextBoxEvents TValue="int" Created='()=>{onCreated("numeric");}'></NumericTextBoxEvents>

                    @*    <NumericTextBoxEvents TValue="int" Created='() => { onCreated("numeric"); }'></NumericTextBoxEvents> *@

 

                </SfNumericTextBox>

 

            </EditTemplate>

 

        </GridColumn>

 

        <GridColumn Field=@nameof(BolleDetDTO.Tipologia) HeaderText="Tipologia" AutoFit="true" AllowEditing=false></GridColumn>

 

        <GridColumn Field=@nameof(BolleDetDTO.Categoria) HeaderText="Categoria" AutoFit="true" AllowEditing="false"></GridColumn>

 

    </GridColumns>

 

</SfGrid>

 

@code

{

    public List<BolleDetDTO> Elencodetbolle { get; set; } = new List<BolleDetDTO>();

 

    [Inject]

    protected IJSRuntime JsRuntime { get; set; }

 

    public async Task onCreated(string id)

    {

        await JsRuntime.InvokeVoidAsync("onMouseWheel", id);

    }

 

    public class BolleDetDTO

    {

        public int BolleDetId { get; set; }

        public string Articoloid { get; set; }

        public string Descrizione { get; set; }

        public int Qta { get; set; }

        public string Tipologia { get; set; }

        public string Categoria { get; set; }

    }

JS

window.onMouseWheel = (id) => {

    document.getElementById(id).addEventListener("mousewheel", function (e) {

        e.stopImmediatePropagation();

    })

}

Please get back to us if you have any concerns.

Regards,

Naveen

Attachment: SupportTickets_3_a4104d00.7z