New to Telerik UI for .NET MAUI? Start a free 30-day trial
Hiding Large +- Button on DataGridNumericalColumn in UI for .NET MAUI
Updated on Mar 18, 2026
Environment
| Version | Product | Author |
|---|---|---|
| 13.0.1 | Telerik UI for .NET MAUI DataGrid | Dobrinka 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:
- Define a style for the
RadTemplatedButtonthat sets itsIsVisibleproperty toFalse. - Define a style for the
RadNumericInputthat applies the button style to itsIncreaseButtonStyleandDecreaseButtonStyleproperties. - Apply the
CellEditorStyleto theDataGridNumericalColumn.
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>