How to load UpDown in SfDataGrid and set the different step value to each row of UpDown ?

1 min read

SfDataGrid 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,

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,

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,

WPF: http://www.syncfusion.com/downloads/support/directtrac/138668/ze/WPF-213278894

Did you find this information helpful?

Yes

Comments (0)