New to Telerik UI for .NET MAUIStart a free 30-day trial

Hiding Large +- Button on DataGridNumericalColumn in UI for .NET MAUI

Updated on Mar 18, 2026

Environment

VersionProductAuthor
13.0.1Telerik UI for .NET MAUI DataGridDobrinka Yordanova

Description

The DataGridNumericalColumn in UI for .NET MAUI uses the NumericInput control for editing. By default, this control displays large "+" and "-" buttons for increasing or decreasing the value. These buttons can obstruct the view on mobile devices and make it difficult to read the actual value. I need a way to hide or disable these buttons.

This knowledge base article also answers the following questions:

  • How do I remove the large buttons from DataGridNumericalColumn?
  • How can I disable the "+" and "-" buttons in the NumericInput editor?
  • How do I customize the editing style in DataGridNumericalColumn?

Solution

To hide the large "+" and "-" buttons, customize the CellEditorStyle of the DataGridNumericalColumn. Use a style targeting the NumericInput control to set the visibility of the buttons to False. Follow these steps:

  1. Define a style for the RadTemplatedButton that sets its IsVisible property to False.
  2. Define a style for the RadNumericInput that applies the button style to its IncreaseButtonStyle and DecreaseButtonStyle properties.
  3. Apply the CellEditorStyle to the DataGridNumericalColumn.

The following XAML implements all three steps above:

xml
<ContentPage.Resources>
    <Style x:Key="ButtonStyle" TargetType="telerik:RadTemplatedButton">
        <Setter Property="IsVisible" Value="False" />
    </Style>

    <Style x:Key="MyNumericColumnStyle" TargetType="telerik:RadNumericInput">
        <Setter Property="IncreaseButtonStyle" Value="{StaticResource ButtonStyle}" />
        <Setter Property="DecreaseButtonStyle" Value="{StaticResource ButtonStyle}" />
    </Style>
</ContentPage.Resources>

<telerik:RadDataGrid ItemsSource="{Binding GridItems}" AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridNumericalColumn CellEditorStyle="{StaticResource MyNumericColumnStyle}" PropertyName="Value" HeaderText="Value" />
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

See Also