SfDataGrid scrolling issue. Value changed automatically every time scroll

[BAO YADONG]

Hello,

There is an issue with the datagrid scrolling event. Every time when i scroll up and down, the data for first row kept changing. Kindly see the attached image.

If i did not change my focus to other row, the issue will not surface. There is no special handle scrolling event too.

<sync:SfDataGrid x:Name="DgChasClaims"

                             Grid.Row="2"

                             Margin="15,10"

                             AllowDraggingColumns="False"

                             AutoExpandGroups="True"

                             AutoGenerateColumns="False"

                             AllowResizingColumns="True"

                             GridValidationMode="InEdit"

                             HeaderRowHeight="35"

                             ColumnSizer="Star"

                             AllowEditing="True"

                             CurrentCellBorderThickness="0"

                             ItemsSource="{Binding Model.ClaimList}"

                             NavigationMode="Cell"

                             ScrollViewer.HorizontalScrollBarVisibility="Disabled"

                             ScrollViewer.VerticalScrollBarVisibility="Auto"

                             SelectionMode="Single"

                             ShowColumnWhenGrouped="False"                            

                             ShowGroupDropArea="False"

                             ShowRowHeader="False"

                             EditTrigger="OnTap"

                             KeyDown="DgChasClaims_KeyDown"

                             RowStyle="{DynamicResource RowStyle}"

                             AlternatingRowStyle="{DynamicResource AlternatingRowStyle}"

                             AlternationCount="2">

                <sync:SfDataGrid.Resources>

                    <Style TargetType="sync:HeaderRowControl">

                        <Setter Property="Background" Value="#ffffff"/>

                        <Setter Property="BorderThickness" Value="0,0,0,2"/>

                        <Setter Property="BorderBrush" Value="#3fa0e0"/>

                    </Style>

                    <Style TargetType="sync:VirtualizingCellsControl" x:Key="AlternatingRowStyle">

                        <Setter Property="Background" Value="{DynamicResource GridAlternateBGBrush}" />

                    </Style>

                    <Style TargetType="sync:VirtualizingCellsControl" x:Key="RowStyle">

                        <Setter Property="Background" Value="White"/>

                    </Style>

                    <Style TargetType="sync:GridStackedHeaderCellControl">

                        <Setter Property="FontFamily" Value="Source Sans Pro" />

                        <Setter Property="FontWeight" Value="Bold" />

                        <Setter Property="FontSize" Value="14" />

                        <Setter Property="Padding" Value="0" />

                        <Setter Property="Foreground" Value="{DynamicResource ButtonDarkBlueBGBrush}" />

                        <Setter Property="BorderThickness" Value="0,0,1,0" />

                        <Setter Property="Margin" Value="0,0,-1,0"/>

                    </Style>

                    <Style  TargetType="sync:GridCell">

                        <Setter Property="BorderBrush" Value="{DynamicResource GridBorderBGBrush}" />   

                        <Setter Property="Padding" Value="4,0" />

                        <Style.Triggers>

                            <DataTrigger Binding="{Binding Path=IsConcurrencyConflict}" Value="true">

                                <Setter Property="Foreground" Value="Red" />

                            </DataTrigger>

                        </Style.Triggers>

                    </Style>

                    <Style TargetType="sync:GridHeaderCellControl">

                        <Setter Property="FontWeight" Value="Bold"/>

                        <Setter Property="FontSize" Value="14"/>

                        <Setter Property="FontFamily" Value="Source Sans Pro" />

                        <Setter Property="HorizontalAlignment" Value="Left" />

                        <Setter Property="Foreground" Value="#2d2d2d"/>

                        <Setter Property="BorderThickness" Value="0"/>

                        <Setter Property="Margin" Value="4,3,0,0"/>

                        <Setter Property="Padding" Value="0"/>

                    </Style>

                </sync:SfDataGrid.Resources>

                <sync:SfDataGrid.StackedHeaderRows>

                    <sync:StackedHeaderRow>

                        <sync:StackedHeaderRow.StackedColumns>

                            <sync:StackedColumn HeaderText="Invoice Details" ChildColumns="VisitDate,PatientName,InvoiceNo,InvoiceAmt"/>

                            <sync:StackedColumn HeaderText="Claim Details" ChildColumns="ClaimAmt,ApprovedAmt"/>

                            <sync:StackedColumn HeaderText="Payment Collection Details" ChildColumns="OutstandingAmt,VPaymentAmount,"/>

                        </sync:StackedHeaderRow.StackedColumns>

                    </sync:StackedHeaderRow>

                </sync:SfDataGrid.StackedHeaderRows>

Attachment: sfdatagrid_scrolling_5b487b89.zip

[Jai Ganesh S]

Hi BAO, 

 

We have prepared a sample based on your code and tried to reproduce your reported issue, but we are unable to reproduce the issue. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridDemo1965753969.zip 

 

Could you please compare the above simple sample with your application and let us know the below details ? 

1. Can you please share your ViewModel details to get the ItemsSource if it differ from the above sample
2. Share the details if you have did any customization in code behind

 

Also, if possible please replicate the issue in simple sample. This would be more helpful for us to proceed further. 

 

Regards, 

Jai Ganesh S 

[BAO YADONG]

Hello,

I'm only using CellTemplate with a CurrencyTextBox instead of both CellTemplate and EditTemplate. I have change my code to using both CellTemplate and EditTemplate to solve the scrolling issue.

After changing it, i notice that my tabbing is focusing directly into the textbox.

<sync:GridTemplateColumn.CellTemplate>

                            <DataTemplate>

                                <Border BorderBrush="#FF848484" Height="22" BorderThickness="1" Background="White">

                                    <TextBlock Text="{Binding Path=VPaymentAmount,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C2}"

                                               VerticalAlignment="Center" 

                                               Margin="0,0,3,0" 

                                               FontSize="13"

                                               HorizontalAlignment="Right"></TextBlock>

                                </Border>

                            </DataTemplate>

                        </sync:GridTemplateColumn.CellTemplate>

                        <sync:GridTemplateColumn.EditTemplate>

                            <DataTemplate>

                                <sync:CurrencyTextBox HorizontalAlignment="Stretch"

                                                      sync:FocusManagerHelper.FocusedElement="True"

                                                      TextAlignment="Right"

                                                      Width="113" Height="22" BorderBrush="#FF848484"

                                                      TextChanged="CurrencyTextBox_TextChanged"  

                                                      Margin="0"  BorderThickness="1" 

                                                      FontSize="14"

                                                      FocusedBorderBrush="#FF848484"                                                       

                                                      TextSelectionOnFocus="True" 

                                                      MaxValue="{Binding TobePaid}"  

                                                      Tag="{Binding Path=.}"   

                                                      Text="{Binding Path=VPaymentAmount, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C2}" 

                                                      Value="{Binding Path=VPaymentAmount, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 

                                                      IsScrollingOnCircle="False" />

                            </DataTemplate>

                        </sync:GridTemplateColumn.EditTemplate>

Attachment: TabKey_3330289d.zip

[Jai Ganesh S]

Hi BAO, 

 

We have changed the sample based on your code, but we are unable to reproduce the issue. While pressing the Tab key at the Reference Number textbox, the focus will be moved in SfDataGrid only. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridDemo-1221953893.zip 

 

Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Tabkey_issue-1391059436.zip 

 

Could you please let us know whether did any customization while pressing the Tab key in your application? or if possible please replicate the issue in above sample. This would be more helpful for us to proceed further. 

 

Regards, 

Jai Ganesh S 

[BAO YADONG]

Hi, Sorry about the typo from my previous post. 

After changing to CellTemplate and EditTemplate, i notice that my tabbing is not focusing directly into the currency textbox.

Only the last column (currency textbox) of my data grid is editable. when pressing tab, it should auto focus on the first row, last column of the grid right?

Attachment: 20180712_113122_5da4afe.zip

[Jai Ganesh S]

Hi BAO,  

 

When you are loading the CurrencyTextBox inside the CellTemplate, it acts like the separate control. Hence the focus will be moved to each CurrencyTextBox that loaded inside the CellTemplate. But this is not a recommended way to load the editor control inside the CellTemplate. However, we have now achieved the sample requirement to move the focus to the CurrencyTextBox when pressing the Tab key from Reference Number textbox by using the TextBoxLostFocus event like below, 

 

this.textBox.LostFocus += TextBox_LostFocus; 

 

private void TextBox_LostFocus(object sender, RoutedEventArgs e) 

{ 

    if (this.dataGrid.Columns[4].MappingName == "OrderID") 

    { 

        this.dataGrid.MoveCurrentCell(new RowColumnIndex(2, 4)); 

        this.dataGrid.SelectionController.CurrentCellManager.BeginEdit(); 

    } 

} 

 

If you want to continue the focus to the each row CurrencyTextBox when pressing the Tab key by customizing the GridSelectionController like below, 

 

this.dataGrid.SelectionController = new CustomSelectionController(dataGrid); 

 

public class CustomSelectionController : GridSelectionController 

{ 

    public CustomSelectionController(SfDataGrid dataGrid) 

        : base(dataGrid) 

    { 

    } 

 

    protected override void ProcessKeyDown(KeyEventArgs args) 

    { 

        // Get the CurrentCell column index 

        var currentColumnIndex = this.CurrentCellManager.CurrentRowColumnIndex.ColumnIndex; 

        // Get last column index of the SfDataGrid through the SelectionHelper 

        var lastIndex = SelectionHelper.GetLastColumnIndex(DataGrid); 

        base.ProcessKeyDown(args); 

 

        if (args.Key == Key.Tab && this.DataGrid.Columns[currentColumnIndex].MappingName== "OrderID") 

        { 

            var rowIndex = this.CurrentCellManager.CurrentRowColumnIndex.RowIndex; 

            this.MoveCurrentCell(new RowColumnIndex(rowIndex, 4)); 

            this.DataGrid.ScrollInView(this.CurrentCellManager.CurrentRowColumnIndex); 

            this.CurrentCellManager.BeginEdit(); 

        } 

    } 

} 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridDemo-376344557.zip 

 

In the above sample, the focus will be moved to the last column (OrderID) of the first row when pressing the tab key from the Reference Number textbox and also the focus will be continued to further row of the OrderID column when pressing the Tab key. If you don’t want this behavior (focus will be moved to next row of the same column when pressing tab key) then you can ignore the customization of SelectionController in sample. 

 

Regards, 

Jai Ganesh S