DataGridNumericalColumn cannot set Minimum and Maximum Value

[Joshua]

In my grid data column I cannot set the minimum and maximum value. I thought it works like the RadNumericBox.

[Lance | Manager Technical Support]

Hi Joshua,

Each column type has an underlying editor, you can find out exactly which editor is used in the documentation by checking the column's documentation page (look on the left here to see all the column types).

As you suspected, the NumericalColumn does indeed use a RadNumericBox for it's editor. Therefore, you can just set the Minimum and Maximum properties for the RadNumericBox.

To access a column's editor, you use the CellEditorStyle and set the style's target type. Here is how to do it for a NumericalColumn and set the Minimum and Maximum value for the editor.

<grid:DataGridNumericalColumn PropertyName="Gpa" Header="GPA">
    <grid:DataGridNumericalColumn.CellEditorStyle>
                        <Style TargetType="input:RadNumericBox">
                            <Setter Property="Minimum"
                                    Value="0"/>
                            <Setter Property="Maximum"
                                    Value="4" />
                        </Style>
    </grid:DataGridNumericalColumn.CellEditorStyle>
</grid:DataGridNumericalColumn>

Please let us know if you have any further questions or concerns. Thank you for contacting Support and for choosing Telerik by Progress.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Joshua]

Thanks! It worked.

[Charlie]

I can't find the "RadNumericBox" value in my project. What am I doing wrong?

I've tried "input:RadNumericBox" as in your sample too.

 

This is a UWP app created in VS2019.

 

<Grid
     Grid.Row="1"
     Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" >
     <tg:RadDataGrid ColumnDataOperationsMode="Flyout" x:Name="grid" ItemsSource="{x:Bind Source, Mode=OneWay}" AutoGenerateColumns="False" UserEditMode="Inline" DoubleTapped="RadDataGrid_DoubleTapped" Tapped="RadDataGrid_Tapped">
         <tg:RadDataGrid.Columns>
             <tg:DataGridTextColumn PropertyName="Code" CanUserEdit="False" />
             <tg:DataGridTextColumn PropertyName="Description" CanUserEdit="False" />
             <tg:DataGridNumericalColumn PropertyName="DescriptionIndex" CellContentFormat=" {0:g0}" >
                 <tg:DataGridNumericalColumn.CellEditorStyle>
                     <Style TargetType="RadNumericBox">
                         <Setter Property="ValueFormat"
                             Value=" {0:g0}"/>
                     </Style>
                  </tg:DataGridNumericalColumn.CellEditorStyle>
             </tg:DataGridNumericalColumn>
             <tg:DataGridTextColumn PropertyName="Type" />
             <tg:DataGridTextColumn PropertyName="Generation" />
             <tg:DataGridTextColumn PropertyName="Year" />
         </tg:RadDataGrid.Columns>
     </tg:RadDataGrid>
 </Grid>

[Lance | Manager Technical Support]

Hello Charlie,

The RadNumericBox is in the Telerik.UI.Xaml.Controls.Input namespace, add the following to the top of your XAML file:

xmlns:input="using:Telerik.UI.Xaml.Controls.Input"

Here's what it looks like on a Page:

<Page
    x:Class="MyProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyProject"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tg="using:Telerik.UI.Xaml.Controls.Grid"
    xmlns:input="using:Telerik.UI.Xaml.Controls.Input"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid Grid.Row="1"
              Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" >
            <tg:RadDataGrid x:Name="grid" 
                            ItemsSource="{x:Bind Source, Mode=OneWay}" 
                            ColumnDataOperationsMode="Flyout" 
                            AutoGenerateColumns="False" 
                            UserEditMode="Inline" 
                            DoubleTapped="RadDataGrid_DoubleTapped" 
                            Tapped="RadDataGrid_Tapped">
                <tg:RadDataGrid.Columns>
                    <tg:DataGridTextColumn PropertyName="Code" CanUserEdit="False" />
                    <tg:DataGridTextColumn PropertyName="Description" CanUserEdit="False" />
                    <tg:DataGridNumericalColumn PropertyName="DescriptionIndex" CellContentFormat=" {0:g0}" >
                        <tg:DataGridNumericalColumn.CellEditorStyle>
                            <Style TargetType="input:RadNumericBox">
                                <Setter Property="ValueFormat"
                                        Value=" {0:g0}"/>
                            </Style>
                        </tg:DataGridNumericalColumn.CellEditorStyle>
                    </tg:DataGridNumericalColumn>
                    <tg:DataGridTextColumn PropertyName="Type" />
                    <tg:DataGridTextColumn PropertyName="Generation" />
                    <tg:DataGridTextColumn PropertyName="Year" />
                </tg:RadDataGrid.Columns>
            </tg:RadDataGrid>
        </Grid>
    </Grid>
</Page>

 

If your project is not resolving Telerik.UI.Xaml.Controls.Input, then you are missing an assembly reference or have the wrong package installed. Please visit the RadNumericInput Getting Started documentation.

Personally, I recommend that you use the single Telerik.UI.for.WindowsUniversalPlatform NuGet package, or use the Extension SDK, instead of individual DLL references.

Regards,
Lance | Manager Technical Support
Progress Telerik

[Charlie]

Progress! That helps Lance. I was missing `xmlns:input="using:Telerik.UI.Xaml.Controls.Input"`.

When I edit now I get the wrong int in the edit box. If my underlying data is `507539430` I get `100`. If It's negative (e.g. `-127860302` I get `0'.  What am I doing wrong w.r.t. my `ValueFormat` which is currently ` {0:0g}`?

[Lance | Manager Technical Support]

Hello Charlie,

After further investigation, the solution is to set the minimum and maximum values for the RadNumericBox style.

Since in your case the bound property is of type int (int64), we can switch to the N0 format specifier and set the min and max to the int.MinValue and int.MaxValue.

<tg:DataGridNumericalColumn PropertyName="DescriptionIndex" CellContentFormat=" {0:g0}"  >
    <tg:DataGridNumericalColumn.CellEditorStyle>
        <Style TargetType="input:RadNumericBox">
            <Setter Property="ValueFormat" Value="{}{0:N0}"/>
            <Setter Property="Minimum" Value="-2147483648"/>
            <Setter Property="Maximum" Value="2147483647"/>
        </Style>
    </tg:DataGridNumericalColumn.CellEditorStyle>
</tg:DataGridNumericalColumn>

Regards,

Lance | Manager Technical Support
Progress Telerik