How to load UpDown and set the different step in WPF DataGrid?
WPF DataGrid allows you to load different cell types with the help of GridTemplateColumn. You can load UpDown control by using GridTemplateColumn.EditTemplate property of that column as follows
XAML
<syncfusion:GridTemplateColumn HeaderText="Order Score"
MappingName="OrderScore.StepValue"
SetCellBoundValue="True"
syncfusion:FocusManagerHelper.WantsKeyInput="True">
<!--TextBlock is loaded as CellTemplate of GridTemplateColumn-->
<syncfusion:GridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="5" Text="{Binding Path=Value}" />
</DataTemplate>
</syncfusion:GridTemplateColumn.CellTemplate>
<!--UpDown editor is loaded as EditTemplate of GridTemplateColumn-->
<syncfusion:GridTemplateColumn.EditTemplate>
<DataTemplate>
<syncfusion:UpDown Name="updown"
PreviewKeyDown="updown_PreviewKeyDown"
PreviewMouseDown="updown_PreviewMouseDown"
Value="{Binding Path=Value}" />
</DataTemplate>
</syncfusion:GridTemplateColumn.EditTemplate>
</syncfusion:GridTemplateColumn>
In above code example, the TextBlock control is loaded in Display mode and UpDown control is loaded in edit mode as shown in the screenshot ,
By default, the Step value of UpDown control will be 1. You can customize these Step value and adjust it for each row of that corresponding column. By using the PreviewMouseDown and PreviewKeyDown event, you can adjust Step value while the mouse or Up and Down arrow key is used for adjusting the Step of UpDown control.
The following code sample shows the step value is set based on the certain condition when mouse is pressed,
C#
private void updown_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
UpDown updown = sender as UpDown;
var dc = ((updown.DataContext as DataContextHelper).Record as Model).OrderScore;
//Set the UpSize to Step if the UpDown value is greater than 5 otherwise DownSize value set as the Step value of UpDown
if (updown.Value > 5)
updown.Step = dc.UpSize;
else if (updown.Value == 1)
updown.Step = dc.DownSize;
}
You can refer the following code sample to achieve the same when Up and Down arrow key is pressed,
C#
private void updown_PreviewKeyDown(object sender, KeyEventArgs e)
{
UpDown updown = sender as UpDown;
var dc = ((updown.DataContext as DataContextHelper).Record as Model).OrderScore;
//The Step value is changed based on the key pressed.
if (updown.Value == 5)
{
if (e.Key == Key.Up)
updown.Step = dc.UpSize;
else if (e.Key == Key.Down)
updown.Step = dc.DownSize;
}
}
Refer to the sample for setting the different step value to each row of GridUpDownColumn in SfDataGrid,
Conclusion
I hope you enjoyed learning about how to load UpDown and set the different step in WPF DataGrid.
You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
