Articles in this section
Category / Section

How to set different SmallChange value in WinRT DataGrid?

2 mins read

The SfDataGrid allows you to display numeric values by using the GridUpDownColumn. The SfNumericUpDown control is loaded in the edit mode of the GridUpDownColumn and the SmallChange property specifies the UpDownValue.

The following code example illustrates the GridUpDownColumn in the WinRT platform.

XAML

<syncfusion:GridUpDownColumn HeaderText="OrderScore"
                                                       MappingName="OrderScore.StepValue"
                                                       MaxValue="500"
                                                       MinValue="0" />

 

The following screenshot shows the default appearance of the GridUpDownColumn in the WinRT platform.

GridUpDown Column default appearance

 

You can set different SmallChange values to each row by deriving a new class from the GridCellUpDownRenderer class. Hook the Tapped and KeyUp events of the SfNumericUpDown in the OnWireEditUIElement virtual method as shown in the following code example.

C#

public class GridCellUpDownRendererExt : GridCellUpDownRenderer
{
    public override void OnWireEditUIElement(SfNumericUpDown uiElement)
    {
        base.OnWireEditUIElement(uiElement); 
        //Wires KeyUp event.
        uiElement.KeyUp += UiElement_KeyUp; 
        //Wires Tapped event.
        uiElement.Tapped += UiElement_Tapped;            
    }
}

 

With the help of the Tapped and KeyUp events of the SfNumericUpDown, you can set different SmallChange values when the mouse Up or Down arrow key is pressed.

C#

//Adjusts SmallChange value when mouse is pressed.
void UiElement_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
    var UpDown=(sender as SfNumericUpDown);
    var dc = (UpDown.DataContext as Model).OrderScore;
    //Sets the UpSize to Stepwhen the up down value is to be greater than 5; otherwise DownSize value sets to be SmallChange value of the SfNumericUpDown.
    if ((double)UpDown.Value > 5)
    {
        UpDown.SmallChange = dc.UpSize;
    }
    else if((double)UpDown.Value == 1)
    {
        UpDown.SmallChange = dc.DownSize;
    }
}
//Adjusts SmallChange value when Up and Down arrow keys are pressed.
void UiElement_KeyUp(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
{
    SfNumericUpDown updown = sender as SfNumericUpDown;
    var dc = (updown.DataContext as Model).OrderScore;
    //The SmallChange value changes based on the key pressed.  
    if ((double)updown.Value == 5)
    {
        if (e.Key == VirtualKey.Up)
            updown.SmallChange = dc.UpSize;
        else if (e.Key == VirtualKey.Down)
            updown.SmallChange = dc.DownSize;
    }
}  

 

Refer to the following code example to remove the default GridCellUpDownRenderer and add the customized GridCellUpDownRendererExt to the renderer’s collection in the SfDataGrid.

C#

public MainPage()
{
    this.InitializeComponent();
    // Removes Default UpDown renderer. 
    this.grid.CellRenderers.Remove("UpDown");
    //Adds Custom renderer.
    this.grid.CellRenderers.Add("UpDown", new GridCellUpDownRendererExt());
}   

 

Sample Links:

 

UWP

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied