In this article, you can learn about how to create equal-width tab items and enable horizontal scrolling to access items that exceed the visible area in the .NET MAUI Tab View. This can be achieved by customizing the HeaderItemTemplate in the Tab View. To create a Tab View with equal width for all tab items and enable horizontal scrolling, follow these steps: Define the Tab View: Start by defining the Tab View in your XAML. Set the HeaderItemTemplate: Use the HeaderItemTemplate to specify how each tab item should be displayed. This template will allow you to set a common width for all tab items and enable horizontal scrolling when the number of items exceeds the visible area. Here is an example of how to implement this: Model public class Model { public string? Name { get; set; } } ViewModel public class ViewModel : INotifyPropertyChanged { private ObservableCollection<Model>? tabHeaderCollection; public ObservableCollection<Model>? TabHeaderCollection { get { return tabHeaderCollection; } set { tabHeaderCollection = value; OnPropertyChanged(nameof(TabHeaderCollection)); } } ... public ViewModel() { TabHeaderCollection = new ObservableCollection<Model>() { new Model(){Name = "Call"}, new Model(){Name = "Favourite"}, new Model(){Name = "Contacts"}, new Model(){Name = "More"}, new Model(){Name = "Help"}, new Model(){Name = "Info" }, new Model(){Name = "About"}, new Model(){Name = "Settings"}, }; } } XAML <tabView:SfTabView x:Name="tabView" ItemsSource="{Binding TabHeaderCollection}"> <tabView:SfTabView.HeaderItemTemplate> <DataTemplate> <HorizontalStackLayout Spacing="2"> <Label FontAttributes="Bold" WidthRequest="70" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding Name}"/> </HorizontalStackLayout> </DataTemplate> </tabView:SfTabView.HeaderItemTemplate> <tabView:SfTabView.Items> <tabView:SfTabItem> <tabView:SfTabItem.Content> <!-- Content for the first tab --> </tabView:SfTabItem.Content> </tabView:SfTabItem> <!-- Additional tab items can be added here --> </tabView:SfTabView.Items> </tabView:SfTabView> By following the above steps, you can create a Syncfusion® Tab View with equal-width tab items and horizontal scrolling functionality. This enhances the user experience by allowing easy navigation through multiple tabs. Output Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to create equal-width tab items and enable horizontal scrolling in .NET MAUI Tab View. You can refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Tab View documentation to understand how to present and manipulate data. You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI ListView, you can detect the scrolling direction using the Scrolled event of the ScrollView. Steps to Detect Scrolling Direction Bind a ViewModel property to the SfListView.HeaderTemplate, to display the scroll direction. XAML <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:YourNamespace" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView" x:Class="YourNamespace.MainPage"> <syncfusion:SfListView x:Name="listView" ItemSize="60" IsStickyHeader="True" ItemsSource="{Binding ContactsInfo}"> <syncfusion:SfListView.Behaviors> <local:ListViewBehavior /> </syncfusion:SfListView.Behaviors> <syncfusion:SfListView.HeaderTemplate> <DataTemplate> <Label Text="{Binding ScrollDirection}" FontSize="Default" FontAttributes="Italic" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> </DataTemplate> </syncfusion:SfListView.HeaderTemplate> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </ContentPage> Use C# code to get the ListViewScrollView using the ListView.GetScrollView helper method. Then, update the ScrollDirection value based on the previous offset. C# using Syncfusion.Maui.ListView; using Microsoft.Maui.Controls; public class ListViewBehavior : Behavior<SfListView> { private ContactsViewModel viewModel; private ListViewScrollView scrollView; private double previousOffset; public SfListView ListView { get; private set; } protected override void OnAttachedTo(SfListView bindable) { base.OnAttachedTo(bindable); ListView = bindable; viewModel = new ContactsViewModel(); ListView.BindingContext = viewModel; scrollView = ListView.GetScrollView(); scrollView.Scrolled += ScrollView_Scrolled; } protected override void OnDetachingFrom(SfListView bindable) { base.OnDetachingFrom(bindable); if(scrollView != null) { scrollView.Scrolled -= ScrollView_Scrolled; } scrollView = null; ListView = null; viewModel = null; } private void ScrollView_Scrolled(object sender, ScrolledEventArgs e) { if (e.ScrollY == 0) return; viewModel.ScrollDirection = previousOffset >= e.ScrollY ? "Up Direction" : "Down Direction"; previousOffset = e.ScrollY; } } In this code, previousOffset stores the previous scroll position. The ScrollY property of the scrollView object provides the current scroll position. By comparing these values, the scroll direction (‘Up’ or ‘Down’) is determined. Download the complete sample from GitHub Conclusion I hope you enjoyed learning how to detect scroll direction in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView typically scrolls to the top when the ItemsSource is updated at runtime. However, you can maintain the current scroll position using the SfListView.CanMaintainScrollPosition property by setting it to true before updating the ItemsSource. This ensures that the scroll position remains unchanged. XAML Set CanMaintainScrollPosition to true to maintain the scroll position after updating the ItemsSource. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ListViewMaui.MainPage" xmlns:local="clr-namespace:ListViewMaui" xmlns:listview="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView" xmlns:datasource="clr-namespace:Syncfusion.Maui.DataSource;assembly=Syncfusion.Maui.DataSource"> <ContentPage.BindingContext> <local:ContactsViewModel/> </ContentPage.BindingContext> <ContentPage.Behaviors> <local:Behavior/> </ContentPage.Behaviors> <ContentPage.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button x:Name="updateButton" Text="Update ItemsSource" HeightRequest="50" Clicked="UpdateButton_Clicked"/> <listview:SfListView x:Name="listView" Grid.Row="1" CanMaintainScrollPosition="True" ItemSize="70" ItemsSource="{Binding ContactsInfo}"> <listview:SfListView.ItemTemplate> <DataTemplate> <StackLayout> <Grid x:Name="grid" RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" HeightRequest="50" WidthRequest="50" Margin="5" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Label Text="{Binding ContactName}" VerticalOptions="CenterAndExpand"/> <Label Grid.Row="1" Text="{Binding ContactNumber}" VerticalOptions="StartAndExpand"/> </Grid> </Grid> <BoxView HeightRequest="1" BackgroundColor="#EEEEEE"/> </StackLayout> </DataTemplate> </listview:SfListView.ItemTemplate> </listview:SfListView> </Grid> </ContentPage.Content> </ContentPage> C# internal class Behavior : Behavior<ContentPage> { #region Fields SfListView ListView; Button UpdateButton; ListViewScrollView ScrollView; #endregion #region Overrides protected override void OnAttachedTo(ContentPage bindable) { ListView = bindable.FindByName<sflistview>("listView"); UpdateButton = bindable.FindByName</sflistview></contentpage></button><button>("updateButton"); UpdateButton.Clicked += UpdateButton_Clicked; base.OnAttachedTo(bindable); } protected override void OnDetachingFrom(ContentPage bindable) { UpdateButton.Clicked -= UpdateButton_Clicked; UpdateButton = null; ListView = null; base.OnDetachingFrom(bindable); } #endregion #region Callback private void UpdateButton_Clicked(object sender, EventArgs e) { var viewModel = ListView.BindingContext as ContactsViewModel; viewModel.GenerateInfo(); ListView.ItemsSource = viewModel.ContactsInfo; } #endregion } Output Take a moment to peruse the documentation to learn more about scrolling in SfListView with a code example. Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to maintain scroll while updating the ItemsSource in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The auto-scrolling delta feature in the .NET MAUI Cartesian Chart ensures that a specified range of data is always visible. This allows you to view remaining data points by scrolling, with the most recent points displayed last. This guide shows how to implement this feature using the AutoScrollingDelta property for various axis types. Category axis To use the category axis, the AutoScrollingDelta property of ChartAxis can be used to customize the number of visible points displayed on the chart. [XAML] <chart:SfCartesianChart.XAxes> <chart:CategoryAxis AutoScrollingDelta="3"> </chart:CategoryAxis> </chart:SfCartesianChart.XAxes> [C#] CategoryAxis primaryAxis = new CategoryAxis(); primaryAxis.AutoScrollingDelta = 3; Numerical axis To use the numerical axis, the AutoScrollingDelta property of ChartAxis can be used to customize the visible range displayed on the chart. [XAML] <chart:SfCartesianChart.XAxes> <chart:NumericalAxis AutoScrollingDelta="50"> </chart:NumericalAxis></chart:SfCartesianChart.XAxes> [C#] NumericalAxis primaryAxis = new NumericalAxis(); primaryAxis.AutoScrollingDelta = 50; Date-Time axis To use date-time axes, the AutoScrollingDelta property of ChartAxis can be used to specify the visible range to be loaded, while the AutoScrollingDeltaType property of DateTimeAxis can be used to specify the date-time component for the AutoScrollingDelta value. These properties can be customized to meet your specific charting needs. [XAML] <chart:SfCartesianChart.XAxes> <chart:DateTimeAxis AutoScrollingDelta="3" AutoScrollingDeltaType="Months"> </chart:DateTimeAxis></chart:SfCartesianChart.XAxes> [C#] DateTimeAxis primaryAxis = new DateTimeAxis(); primaryAxis.AutoScrollingDelta = 3; primaryAxis.AutoScrollingDeltaType = DateTimeIntervalType.Months; Note: AutoScrollingDeltaMode property can be used to determine whether the axis should be scrolled from the start position or end position. The default value of AutoScrollingMode is End. Conclusion I hope you enjoyed learning to display a Fixed Number of Data Points in .NET MAUI Charts. You can refer to our .NET MAUI Charts feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Charts documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the Licence and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Charts and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Detect the scrolling direction in .NET MAUI ListView by using the Scrolled event of the ListViewScrollView.XAMLIn the SfListView.HeaderTemplate, bind the ViewModel property to show the scroll direction.<listView:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="120" IsStickyHeader="True"> <listView:SfListView.Behaviors> <local:Behavior/> </listView:SfListView.Behaviors> <listView:SfListView.HeaderTemplate> <DataTemplate> <StackLayout BackgroundColor="LightGray"> <Label Text="{Binding Path=BindingContext.ScrollDirection, Source={x:Reference listView}}" FontAttributes="Bold" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center"/> </StackLayout> </DataTemplate> </listView:SfListView.HeaderTemplate> </listView:SfListView> C# Get the ListViewScrollView by using the ListView.GetScrollView helper method and update the ScrollDirection value based on the previous offset. public class Behavior : Behavior<SfListView> { ListViewScrollView scrollview; double previousOffset; public SfListView listView; BooksViewModel viewModel; protected override void OnAttachedTo(SfListView bindable) { listView = bindable as SfListView; viewModel = new BooksViewModel(); listView.BindingContext = viewModel; scrollview = listView.GetScrollView(); scrollview.Scrolled += Scrollview_Scrolled; base.OnAttachedTo(bindable); } private void Scrollview_Scrolled(object sender, ScrolledEventArgs e) { if (e.ScrollY == 0) return; if (previousOffset >= e.ScrollY) { // Up direction viewModel.ScrollDirection = "Up Direction"; } else { //Down direction viewModel.ScrollDirection = "Down Direction"; } previousOffset = e.ScrollY; } }Output Download the complete sample on GitHubConclusion I hope you enjoyed learning how to detect the scrolling direction in .NET MAUI ListView.You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations. Explore our documentation to understand how to create and manipulate data.For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section below if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView (SfListView) allows you to identify when the end of the list is reached while scrolling. By using the Changed event of ScrollAxisBase in VisualContainer, you can determine if you have reached the last item in the list based on the LastBodyVisibleLineIndex property and underlying collection count. C# You can get the item elements held by a scrollable visual container using the GetVisualContainer helper method. public class ListViewBehavior : Behavior<SfListView> { SfListView ListView; VisualContainer VisualContainer; bool isAlertShown = false; int totalItems = 0; protected override void OnAttachedTo(SfListView bindable) { ListView = bindable; ListView.Loaded += ListView_Loaded; VisualContainer = ListView.GetVisualContainer(); VisualContainer.ScrollRows.Changed += ScrollRows_Changed; base.OnAttachedTo(bindable); } private void ListView_Loaded(object sender, EventArgs e) { //To include header if used var header = (ListView.HeaderTemplate != null && !ListView.IsStickyHeader) ? 1 : 0; //To include footer if used var footer = (ListView.FooterTemplate != null && !ListView.IsStickyFooter) ? 1 : 0; totalItems = ListView.DataSource.DisplayItems.Count + header + footer; } private void ScrollRows_Changed(object sender, ScrollChangedEventArgs e) { var lastIndex = VisualContainer.ScrollRows.LastBodyVisibleLineIndex; if (lastIndex != -1 && (lastIndex == totalItems - 1)) { if (!isAlertShown) { App.Current.MainPage.DisplayAlert("Alert", "End of list reached...", "Ok"); isAlertShown = true; } } else isAlertShown = false; } } Download the complete sample on GitHub.Conclusion I hope you enjoyed learning how to identify when the end of the list is reached on scrolling in the .NET MAUI ListView.You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can disable the SfListView’s scrolling by disabling the Native ScrollView’s scrolling. The use cases for disabling Listview scrolling are as follows: Using nested ScrollView is not recommended in Xamarin.Forms. When using nested ListView, you can disable the inner ListView scrolling. In Android, to improve the scrolling performance when using nested scrollable content. XAML Set the SfListView.IsScrollingEnabled to False to load all the items in the SfListView. By default, the SfListView uses the items recycling concept, in which it only creates the elements that are in view on initial loading and reuses the items on scroll. Also, it loads the SfListView inside the ScrollView to perform scrolling. <ScrollView> <StackLayout> <syncfusion:SfListView x:Name="listView" ItemSize="60" IsScrollingEnabled="False" ItemsSource="{Binding ContactsInfo}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <Grid x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </ScrollView> C# Define the dependency interface to disable the native scrolling of the ListView. public interface IDependencyServiceListView { void DisableScrolling(SfListView ListView); } C# In the native project, implement the IDependencyServiceListView and the DisableScrolling methods. Get the native ScrollView from the renderer and set the IsEnabled property to False. #if Android using Xamarin.Forms.Platform.Android; #elif __IOS__ using UIKit; using Xamarin.Forms.Platform.iOS; #else using Xamarin.Forms.Platform.UWP; using Windows.UI.Xaml.Controls; #endif using ListViewXamarin.Droid; using Syncfusion.ListView.XForms; using Syncfusion.ListView.XForms.Control.Helpers; using Xamarin.Forms; [assembly: Dependency(typeof(ListViewDependencyService))] namespace ListViewXamarin.Droid { public class ListViewDependencyService : IDependencyServiceListView { ExtendedScrollView ExtendedScrollView; public void DisableScrolling(SfListView ListView) { ExtendedScrollView = ListView.GetScrollView(); var extendedScrollViewRenderer = Platform.GetRenderer(ExtendedScrollView); #if __IOS__ (extendedScrollViewRenderer.NativeView as UIScrollView).ScrollEnabled = false; #elif Android (extendedScrollViewRenderer.Element as ExtendedScrollView).IsEnabled = false; #else var nativeView = extendedScrollViewRenderer.GetNativeElement(); extendedScrollViewRenderer.Element.IsTabStop = false; (nativeView as ScrollViewer).IsEnabled = false; #endif } } } C# In the SfListView.Loaded event, call the DisableScrolling method using the DependencyService. private void ListView_Loaded(object sender, ListViewLoadedEventArgs e) { DependencyService.Get<IDependencyServiceListView>().DisableScrolling(ListView); } Note:ListView’s AutoScrolling will be disabled when implementing this solution. Take a moment to peruse the documentation, to learn more about scrolling in SfListView with code examples. View sample in GitHub
In the Flutter 2.5 release, the mouse drag scrolling behavior in web and desktop platforms has been changed. The details of the drag scroll behavior are documented in this link. To enable the drag scrolling by mouse in Flutter DataGrid, wrap the SfDataGrid inside the ScrollConfiguration widget and set the behavior property. You need to set the ScrollConfiguration’s dragDevices property as PointerDeviceKind.touch and PointerDeviceKind.mouse. The default value of dragDevices is PointerDeviceKind.touch. late EmployeeDataGridSource _employeeDataGridSource; List<Employee> _employees = <Employee>[]; @override void initState() { super.initState(); _employees = getEmployeeData(); _employeeDataGridSource = EmployeeDataGridSource(employees: _employees); } @override Widget build(BuildContext context) { return Scaffold( body: ScrollConfiguration( behavior: ScrollConfiguration.of(context).copyWith(dragDevices: { PointerDeviceKind.touch, PointerDeviceKind.mouse, }), child: SfDataGrid(source: _employeeDataGridSource, columns: [ GridColumn( columnName: 'id', label: Container( padding: const EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: const Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'name', label: Container( padding: const EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: const Text( 'Name', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'designation', label: Container( padding: const EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: const Text( 'Designation', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'salary', label: Container( padding: const EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: const Text( 'Salary', overflow: TextOverflow.ellipsis, ))) ]))); } View the GitHub sample here. ConclusionI hope you enjoyed learning about how to perform vertical or horizontal scrolling in Flutter DataTable (SfDataGrid) by mouse dragging in web or desktop platforms.You can refer to our Flutter DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter DataGrid example 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!
The Flutter DataTable provides support to scroll to a particular row and column programmatically. Also, provides options to perform horizontal or vertical scroll programmatically. Scroll to row Scroll programmatically to a particular row by passing the required row index in the scrollToRow method. Also, decide where that row should be displayed after scrolling by using position argument. Enable the animation by passing true to the canAnimate argument in the scrollToRow method. final DataGridController controller = DataGridController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Datagrid Sample'), ), body: Column( children: [ TextButton( onPressed: () { controller.scrollToRow(13, position: DataGridScrollPosition.center, canAnimate: true, ); }, child: Text('Scroll To Row')), Expanded( child: SfDataGrid( controller: controller, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, source: stackedHeaderDataGridSource, columns: _getColumns(), ), ), ], ), ); } } Scroll to cell Scroll programmatically to a particular cell by passing the row and column index to the scrollToCell method. And enable the animation by passing true to the canAnimate argument in scrollToCell method. Also, decide where that cell should be displayed after scrolling DataGridScrollPosition to rowPosition and columnPosition arguments in scrollToCell. final DataGridController controller = DataGridController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Datagrid Sample'), ), body: Column( children: [ TextButton( onPressed: () { controller.scrollToCell(13, 2, columnPosition: DataGridScrollPosition.center, rowPosition: DataGridScrollPosition.center, canAnimate: true); }, child: Text('Scroll To Cell')), Expanded( child: SfDataGrid( controller: controller, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, source: stackedHeaderDataGridSource, columns: _getColumns(), ), ), ], ), ); } } Scroll to column Scroll programmatically to a particular column by passing the column index in the scrollToColumn method. Also, decide where that column should be displayed after scrolling by using position argument. Enable animation by passing true to the canAnimate argument in scrollToColumn method. final DataGridController controller = DataGridController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Datagrid Sample'), ), body: Column( children: [ TextButton( onPressed: () { controller.scrollToColumn(2, position: DataGridScrollPosition.center, canAnimate: true); }, child: Text('Scroll To Column')), Expanded( child: SfDataGrid( controller: controller, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, source: stackedHeaderDataGridSource, columns: _getColumns(), ), ), ], ), ); } } Vertical scroll Perform vertical scrolling by passing the required offset value to the scrollToVerticalOffset method. Also, enable the animation by passing true to the canAnimate argument in scrollToVerticalOffset method. final DataGridController controller = DataGridController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Datagrid Sample'), ), body: Column( children: [ TextButton( onPressed: () { controller.scrollToVerticalOffset(300, canAnimate: true); }, child: Text('Scroll To Vertical Offset')), Expanded( child: SfDataGrid( controller: controller, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, source: stackedHeaderDataGridSource, columns: _getColumns(), ), ), ], ), ); } Horizontal scroll Perform horizontal scrolling by passing the required offset value to the scrollToHorizontalOffset method. And enable the scrolling animation by passing true to the canAnimate argument in scrollToHorizontalOffset method. final DataGridController controller = DataGridController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Datagrid Sample'), ), body: Column( children: [ TextButton( onPressed: () { controller.scrollToHorizontalOffset(300, canAnimate: true); }, child: Text('Scroll To Horizontal Offset')), Expanded( child: SfDataGrid( controller: controller, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, source: stackedHeaderDataGridSource, columns: _getColumns(), ), ), ], ), ); } } Click this link to know more about programmatic scrolling feature. Conclusion I hope you enjoyed learning about how to scroll Flutter DataTable (SfDataGrid) programmatically.You can refer to our Flutter DataGrid featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter DataGrid example 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!
The soft keyboard can be hidden by scrolling the Xamarin.Forms SfListView. C# Define an interface to hide the soft keyboard. public interface IKeyboardHelper { void HideKeyboard(); } C# In a native Android project, create a class to hide the keyboard and register the dependency for the same. Hide the soft keyboard using HideSoftInputFromWindow method , and clear the focus using ClearFocus method. [assembly: Dependency(typeof(KeyboardHelper))] namespace ListViewXamarin.Droid { [Preserve(AllMembers = true)] public class KeyboardHelper : IKeyboardHelper { static Context _context; public KeyboardHelper() { } public static void Init(Context context) { _context = context; } public void HideKeyboard() { var context = Android.App.Application.Context; var inputMethodManager = context.GetSystemService(Context.InputMethodService) as InputMethodManager; if (inputMethodManager != null && context is Activity) { var activity = context as Activity; var token = activity.CurrentFocus?.WindowToken; inputMethodManager.HideSoftInputFromWindow(token, HideSoftInputFlags.None); activity.Window.DecorView.ClearFocus(); } } } } C# In native iOS project, register the Dependency for KeyBoardHelper class. Hide the soft keyboard using the EndEditing method. [assembly: Dependency(typeof(KeyboardHelper))] namespace ListViewXamarin.iOS { [Preserve(AllMembers = true)] public class KeyboardHelper : IKeyboardHelper { public KeyboardHelper() { } public void HideKeyboard() { UIApplication.SharedApplication.KeyWindow.EndEditing(true); } } } C# Trigger the ScrollStateChanged method to hide the keyboard. In the event call back, call the HideKeyBoard method using DependencyService when the ScrollState is not Idle. public class Behavior : Behavior<ContentPage> { SfListView ListView; protected override void OnAttachedTo(ContentPage bindable) { ListView = bindable.FindByName<SfListView>("listView"); ListView.ScrollStateChanged += ListView_ScrollStateChanged; base.OnAttachedTo(bindable); } private void ListView_ScrollStateChanged(object sender, ScrollStateChangedEventArgs e) { if (e.ScrollState != ScrollState.Idle) { DependencyService.Get<IKeyboardHelper>().HideKeyboard(); } } } View sample in GitHub ConclusionI hope you enjoyed learning about how to hide the keyboard when scrolling in Xamarin.Forms ListView.You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ListView 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!
SfCartesianChart has support to lazily load and display data. You can load a certain amount of data initially to the chart and then load more data lazily. When horizontal scrolling reaches the start or end of the chart, the loadMoreIndicatorBuilder is called. Using this, you can return any widget to be shown on the chart while loading more data. For more information, refer to this help document. The following steps explain how to add data points dynamically to the chart while dragging the chart towards the end. Step 1: Declare the series controller, data source, zoom pan behavior, global key, and other required variables as shown in the following code sample. ChartSeriesController? seriesController; late List<ChartSampleData> chartData late List<ChartSampleData> chartData late bool isLoadMoreView, isNeedToUpdateView, isDataUpdated; double? oldAxisVisibleMin, oldAxisVisibleMax; late ZoomPanBehavior _zoomPanBehavior; late GlobalKey<State> globalKey; Step 2: Define the _initializeVaraible method, which will be executed in the initState. Here, we have defined the initial data, Boolean variables, and zoom pan behavior of the chart. void _initializeVariables() { // Initial data source of the chart chartData = <ChartSampleData>[ ChartSampleData(xValue: 0, y: 326), ChartSampleData(xValue: 1, y: 416), ChartSampleData(xValue: 2, y: 290), ChartSampleData(xValue: 3, y: 70), ChartSampleData(xValue: 4, y: 500), ChartSampleData(xValue: 5, y: 416), ChartSampleData(xValue: 6, y: 290), ChartSampleData(xValue: 7, y: 120), ChartSampleData(xValue: 8, y: 500), ]; isLoadMoreView = false; isNeedToUpdateView = false; isDataUpdated = true; // Key which uses to access the chart state. globalKey = GlobalKey<State>(); // Enabling panning in the chart. _zoomPanBehavior = ZoomPanBehavior( enablePanning: true, ); } Step 3: In the onActualRangeChanged callback, set the visibleMinimum and visibleMaximum values with the old visible minimum and maximum values respectively to display the data with the old viewport even after the new data loaded to the chart until we swipe it manually. onActualRangeChanged: (ActualRangeChangedArgs args) { if (args.orientation == AxisOrientation.horizontal) { // Assigning the old visible min and max after loads the data. if (isLoadMoreView) { args.visibleMin = oldAxisVisibleMin; args.visibleMax = oldAxisVisibleMax; } // Asigning current visible min and max to old visible min and max. oldAxisVisibleMin = args.visibleMin; oldAxisVisibleMax = args.visibleMax; } isLoadMoreView = false; }, Step 4: Assign the buildloadMoreIndicatorView method to the loadMoreIndicatorBuilder in the chart. SfCartesianChart( loadMoreIndicatorBuilder: (BuildContext context, ChartSwipeDirection direction) => buildloadMoreIndicatorView (context, direction), ) Step 5: Define the buildloadMoreIndicatorView method as shown in the following code sample. Widget buildloadMoreIndicatorView( BuildContext context, ChartSwipeDirection direction) { // To know whether reaches the end of the chart if (direction == ChartSwipeDirection.end) { isNeedToUpdateView = true; globalKey = GlobalKey<State>(); return StatefulBuilder( key: globalKey, builder: (BuildContext context, StateSetter stateSetter) { Widget widget; // To add new data after reached the end and returns loading indicator until chart gets rendered if (isNeedToUpdateView) { // Assigning loading widget above the chart to display widget = getProgressIndicator(); // Redrawing the chart _updateView(); isDataUpdated = true; } else { widget = Container(); } return widget; }); } else { return SizedBox.fromSize(size: Size.zero); } } In this method, you can return the stateful builder with the CircularProgressIndicator until the data gets loaded and update the loaded data to the chart. Step 6: Define the _updateView method, which redraws the chart with refreshed data by calling the chart state and _updateData method, which updates the new data to the chart. //Adding new data to the chart. void _updateData() { for (int i = 0; i < 4; i++) { chartData.add(ChartSampleData( xValue: chartData[chartData.length - 1].xValue + 1, y: getRandomInt(0, 600))); } isLoadMoreView = true; seriesController?.updateDataSource(addedDataIndexes: getIndexes(4)); } // Redrawing the chart with updated data by calling the chart state. Future<void> _updateView() async { await Future<void>.delayed(const Duration(seconds: 1), () { isNeedToUpdateView = false; if (isDataUpdated) { _updateData(); isDataUpdated = false; } if (globalKey.currentState != null) { (globalKey.currentState as dynamic).setState(() {}); } }); } Thus, the infinite scrolling is achieved by dynamically adding the data while dragging the chart towards the end using the SfCartesianchart widget. View the Github Sample here. ConclusionI hope you enjoyed learning about how to lazily load more data to the chart.You can refer to our Flutter Cartesian Chart feature tour page to learn about its other groundbreaking feature representations,documentation and how to quickly get started for configuration specifications. You can also explore our Flutter Cartesian Chart example 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!
The Syncfusion® Flutter DataTable widget provides support to perform infinite scrolling by using loadMoreViewBuilder property. Infinite Scrolling is an approach that can be used to load more rows to the datagrid whenever the datagrid reaches the bottom. The following example demonstrates how to perform infinite scrolling by showing the circular progress indicator until the rows are loaded when the datagrid reaches the bottom, STEP 1: Create data source class extends with DataGridSource for mapping data to the SfDataGrid and override handleLoadMoreRows method to load more rows when performing infinite scrolling. class _EmployeeDataSource extends DataGridSource { _EmployeeDataSource( {required List<Employee> employeeData, required Function(List<Employee>, int) generateList}) { _employeeData = employeeData; _generateList = generateList; } late List<Employee> _employeeData; late Function(List<Employee>, int) _generateList; @override List<DataGridRow> get rows => _employeeData.map<DataGridRow>((e) { return DataGridRow(cells: [ DataGridCell(columnName: 'id', value: e.id), DataGridCell(columnName: 'name', value: e.name), DataGridCell(columnName: 'designation', value: e.designation), DataGridCell(columnName: 'salary', value: e.salary), ]); }).toList(growable: false); @override DataGridRowAdapter buildRow(DataGridRow row) { return DataGridRowAdapter(cells: [ Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( row.getCells()[0].value.toString(), overflow: TextOverflow.ellipsis, ), ), Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( row.getCells()[1].value, overflow: TextOverflow.ellipsis, ), ), Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( row.getCells()[2].value, overflow: TextOverflow.ellipsis, ), ), Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( row.getCells()[3].value.toString(), overflow: TextOverflow.ellipsis, ), ), ]); } @override Future<void> handleLoadMoreRows() async { await Future.delayed(Duration(seconds: 5)); _employeeData = _generateList(_employeeData, 15); notifyListeners(); } } STEP 2: Initialize the SfDataGrid with all the required properties and you can use the FutureBuilder widget to show the progress indicator in the loadMoreViewBuilder method. The handleLoadMoreRows can be called to load more rows from this builder by using the loadMoreRows function which is passed as a parameter to loadMoreViewBuilder. List<Employee> _generateList(List<Employee> employeeData, int count) { final Random random = Random(); final int startIndex = employeeData.isNotEmpty ? employeeData.length : 0, endIndex = startIndex + count; for (int i = startIndex; i < endIndex; i++) { employeeData.add(Employee( 1000 + i, names[i < names.length ? i : random.nextInt(names.length - 1)], designation[random.nextInt(designation.length - 1)], 10000 + random.nextInt(1000))); } return employeeData; } @override void initState() { _populateData(); employeeDataSource = _EmployeeDataSource( employeeData: employeeData, generateList: _generateList); super.initState(); } Widget _buildProgressIndicator() { return Container( height: 60.0, alignment: Alignment.center, width: double.infinity, decoration: BoxDecoration( border: BorderDirectional( top: BorderSide( width: 1.0, ))), child: Container( width: 40, height: 40, alignment: Alignment.center, child: Container( child: CircularProgressIndicator( backgroundColor: Colors.transparent, )))); } Widget _buildLoadMoreView(BuildContext context, LoadMoreRows loadMoreRows) { Future<String> loadRows() async { // Call the loadMoreRows function to call the // DataGridSource.handleLoadMoreRows method. So, additional // rows can be added from handleLoadMoreRows method. await loadMoreRows(); return Future<String>.value('Completed'); } return FutureBuilder<String>( initialData: 'Loading', future: loadRows(), builder: (context, snapShot) { return snapShot.data == 'Loading' ? _buildProgressIndicator() : SizedBox.fromSize(size: Size.zero); }, ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('DataGrid Sample'), ), body: SfDataGrid( source: employeeDataSource, loadMoreViewBuilder: _buildLoadMoreView, columns: [ GridTextColumn( columnName: 'id', columnWidthMode: ColumnWidthMode.fill, label: Container( padding: EdgeInsets.all(8), alignment: Alignment.centerRight, child: Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridTextColumn( columnName: 'name', label: Container( padding: EdgeInsets.all(8), alignment: Alignment.centerLeft, child: Text( 'Name', overflow: TextOverflow.ellipsis, ))), GridTextColumn( columnName: 'designation', columnWidthMode: ColumnWidthMode.fill, label: Container( padding: EdgeInsets.all(8), alignment: Alignment.centerLeft, child: Text( 'Designation', overflow: TextOverflow.ellipsis, ))), GridTextColumn( columnName: 'salary', label: Container( padding: EdgeInsets.all(8), alignment: Alignment.centerRight, child: Text( 'Salary', overflow: TextOverflow.ellipsis, ))) ])); } View the GitHub sample here. ConclusionI hope you enjoyed learning about how to do infinite scrolling in Flutter DataTable.You can refer to our Flutter Datagrid feature tour page to know about its other groundbreaking feature representations and Flutter DataGrid documentation. You can also explore our Flutter DataGrid example to understand how to create and manipulate data.For current customers, you can check out our File Formats from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our all platforms.If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can select the records of the Master-DetailsView programmatically on initial loading by setting the corresponding child grid row index to the SfDataGrid.SelectedIndex property. This can be achieved by passing the row index of both the parent and child grids. Before setting the SelectedIndex to child grid, you need to check whether the corresponding parent record is in the expanded or collapsed state. When it is expanded, you can directly select the records of the child grid; otherwise, you need to expand it manually by using the SfDataGrid.ExpandDetailsViewAt helper method. You can also bring the corresponding DetailsView grid into the view by using the DetailsViewManager.BringToView helper method. This is demonstrated in the following code example. <syncfusion:SfDataGrid x:Name="dataGrid" ColumnSizer="Auto" AutoGenerateColumns="True" AutoGenerateRelations="True" ItemsSource="{Binding Employees}" Loaded="On_DataGrid_Loaded" AutoGeneratingRelations="On_DataGrid_AutoGeneratingRelations"> private void On_DataGrid_AutoGeneratingRelations(object sender, AutoGeneratingRelationsArgs e) { e.GridViewDefinition.DataGrid.AutoGenerateRelations = true; } private void On_DataGrid_Loaded(object sender, RoutedEventArgs e) { DoSelection(); } private void DoSelection() { var empToSelect = ((ViewModel)this.DataContext).Employees.FirstOrDefault(emp => emp.EmployeeID == 17); if (empToSelect != null) { this.dataGrid.SelectedItem = empToSelect; var employeeRowIndex = this.dataGrid.ResolveToRowIndex(this.dataGrid.SelectedIndex); this.ExpandAndSelectDetailsView(this.dataGrid, employeeRowIndex, 22, "Orders"); dataGrid.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => { var orderGrid = dataGrid.GetDetailsViewGrid(this.dataGrid.ResolveToRecordIndex(employeeRowIndex), "Orders"); if (orderGrid != null) { var ordersRowindex = orderGrid.ResolveToRowIndex(orderGrid.SelectedIndex); this.ExpandAndSelectDetailsView(orderGrid, ordersRowindex, 2, "Sales"); dataGrid.SelectionController.GetType().GetMethod("ScrollToRowIndex", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic).Invoke(dataGrid.SelectionController, new object[] { dataGrid.SelectionController.CurrentCellManager.CurrentRowColumnIndex.RowIndex }); } }); } } private void ExpandAndSelectDetailsView(SfDataGrid dataGrid, int parentRowIndex, int childRowIndex, string relationalColumn) { //Checks whether the given index is parent row index or not. bool IsDetailsViewIndex = dataGrid.IsInDetailsViewIndex(parentRowIndex); if (IsDetailsViewIndex == true) return; //Gets the record of the parent row index. var record = dataGrid.View.Records[dataGrid.ResolveToRecordIndex(parentRowIndex)]; //Gets the DetailsViewManager by using Reflection. var propertyInfo = dataGrid.GetType().GetField("DetailsViewManager", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic); DetailsViewManager detailsViewManager = propertyInfo.GetValue(dataGrid) as DetailsViewManager; // Checks whether the parent record has the child grid or not by getting the child source and its count. var childSource = detailsViewManager.GetChildSource(record.Data, relationalColumn); var GetChildSourceCount = detailsViewManager.GetType().GetMethod("GetChildSourceCount", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Static); var ChildSourceCount = GetChildSourceCount.Invoke(detailsViewManager, new object[] { childSource }); if ((int)ChildSourceCount == 0) return; //Checks whether the record is Expanded or Collapsed. //When it is in the collapsed state, you need to expand the particular DetailsView based on the index. if (!record.IsExpanded) dataGrid.ExpandDetailsViewAt(dataGrid.ResolveToRecordIndex(parentRowIndex)); //Gets the index of the DetailsView. int index = 0; foreach (var def in dataGrid.DetailsViewDefinition) { if (def.RelationalColumn == relationalColumn) { index = dataGrid.DetailsViewDefinition.IndexOf(def); index = parentRowIndex + index + 1; } } //Brings the parent row in the view. var rowcolumnIndex = new RowColumnIndex(index, 1); dataGrid.ScrollInView(rowcolumnIndex); //Gets the DetailsViewDataGrid by passing the corresponding rowindex and relation name. var detailsViewDataGrid = dataGrid.GetDetailsViewGrid(dataGrid.ResolveToRecordIndex(parentRowIndex), relationalColumn); //Checks whether the given index is currently in view or not. //When the specified index is not currently in view, you can bring that row in to the view by using the SfDataGrid.ScrollInView method. var firstline = dataGrid.GetVisualContainer().ScrollRows.GetVisibleLines().FirstOrDefault(line => line.Region == ScrollAxisRegion.Body); var lastline = dataGrid.GetVisualContainer().ScrollRows.GetVisibleLines().LastOrDefault(line => line.Region == ScrollAxisRegion.Body); if (firstline.LineIndex >= index || lastline.LineIndex <= index) { //Brings the details view grid in to the view and sets the child grid's SelectedIndex as the ChildRowIndex. if (record != null && record.IsExpanded) { if (detailsViewDataGrid == null) { detailsViewManager.BringIntoView(index); detailsViewDataGrid = dataGrid.GetDetailsViewGrid(dataGrid.ResolveToRecordIndex(parentRowIndex), relationalColumn); } } } if (detailsViewDataGrid != null) detailsViewDataGrid.SelectedIndex = childRowIndex; } View Sample in GitHub
You can select the records of the Master-DetailsView programmatically on initial loading by setting the corresponding child grid row index to the SfDataGrid.SelectedIndex property in WPF DataGrid (SfDataGrid). This can be achieved by passing the row index of both the parent and child grids. Before setting the SelectedIndex to child grid, you need to check whether the corresponding parent record is in the expanded or collapsed state. When it is expanded, you can directly select the records of the child grid; otherwise, you need to expand it manually by using the SfDataGrid.ExpandDetailsViewAt helper method. You can also bring the corresponding DetailsView grid into the view by using the DetailsViewManager.BringToViewhelper method. This is demonstrated in the following code example. <syncfusion:SfDataGrid x:Name="dataGrid" ColumnSizer="Auto" AutoGenerateColumns="True" AutoGenerateRelations="True" ItemsSource="{Binding Employees}" Loaded="On_DataGrid_Loaded" AutoGeneratingRelations="On_DataGrid_AutoGeneratingRelations"> private void On_DataGrid_AutoGeneratingRelations(object sender, AutoGeneratingRelationsArgs e) { e.GridViewDefinition.DataGrid.AutoGenerateRelations = true; } private void On_DataGrid_Loaded(object sender, RoutedEventArgs e) { DoSelection(); } private void DoSelection() { var empToSelect = ((ViewModel)this.DataContext).Employees.FirstOrDefault(emp => emp.EmployeeID == 17); if (empToSelect != null) { this.dataGrid.SelectedItem = empToSelect; var employeeRowIndex = this.dataGrid.ResolveToRowIndex(this.dataGrid.SelectedIndex); this.ExpandAndSelectDetailsView(this.dataGrid, employeeRowIndex, 22, "Orders"); dataGrid.Dispatcher.BeginInvoke(System.Windows.Threading.DispatcherPriority.Background, new Action(() => { var orderGrid = dataGrid.GetDetailsViewGrid(this.dataGrid.ResolveToRecordIndex(employeeRowIndex), "Orders"); if (orderGrid != null) { var ordersRowindex = orderGrid.ResolveToRowIndex(orderGrid.SelectedIndex); this.ExpandAndSelectDetailsView(orderGrid, ordersRowindex, 2, "Sales"); dataGrid.SelectionController.GetType().GetMethod("ScrollToRowIndex", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic).Invoke(dataGrid.SelectionController, new object[] { dataGrid.SelectionController.CurrentCellManager.CurrentRowColumnIndex.RowIndex }); } })); } } private void ExpandAndSelectDetailsView(SfDataGrid dataGrid, int parentRowIndex, int childRowIndex, string relationalColumn) { //Checks whether the given index is parent row index or not. bool IsDetailsViewIndex = dataGrid.IsInDetailsViewIndex(parentRowIndex); if (IsDetailsViewIndex == true) return; //Gets the record of the parent row index. var record = dataGrid.View.Records[dataGrid.ResolveToRecordIndex(parentRowIndex)]; //Gets the DetailsViewManager by using Reflection. var propertyInfo = dataGrid.GetType().GetField("DetailsViewManager", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic); DetailsViewManager detailsViewManager = propertyInfo.GetValue(dataGrid) as DetailsViewManager; // Checks whether the parent record has the child grid or not by getting the child source and its count. var childSource = detailsViewManager.GetChildSource(record.Data, relationalColumn); var GetChildSourceCount = detailsViewManager.GetType().GetMethod("GetChildSourceCount", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Static); var ChildSourceCount = GetChildSourceCount.Invoke(detailsViewManager, new object[] { childSource }); if ((int)ChildSourceCount == 0) return; //Checks whether the record is Expanded or Collapsed. //When it is in the collapsed state, you need to expand the particular DetailsView based on the index. if (!record.IsExpanded) dataGrid.ExpandDetailsViewAt(dataGrid.ResolveToRecordIndex(parentRowIndex)); //Gets the index of the DetailsView. int index = 0; foreach (var def in dataGrid.DetailsViewDefinition) { if (def.RelationalColumn == relationalColumn) { index = dataGrid.DetailsViewDefinition.IndexOf(def); index = parentRowIndex + index + 1; } } //Brings the parent row in the view. var rowcolumnIndex = new RowColumnIndex(index, 1); dataGrid.ScrollInView(rowcolumnIndex); //Gets the DetailsViewDataGrid by passing the corresponding rowindex and relation name. var detailsViewDataGrid = dataGrid.GetDetailsViewGrid(dataGrid.ResolveToRecordIndex(parentRowIndex), relationalColumn); //Checks whether the given index is currently in view or not. //When the specified index is not currently in view, you can bring that row in to the view by using the SfDataGrid.ScrollInView method. var firstline = dataGrid.GetVisualContainer().ScrollRows.GetVisibleLines().FirstOrDefault(line => line.Region == ScrollAxisRegion.Body); var lastline = dataGrid.GetVisualContainer().ScrollRows.GetVisibleLines().LastOrDefault(line => line.Region == ScrollAxisRegion.Body); if (firstline.LineIndex >= index || lastline.LineIndex <= index) { //Brings the details view grid in to the view and sets the child grid's SelectedIndex as the ChildRowIndex. if (record != null && record.IsExpanded) { if (detailsViewDataGrid == null) { detailsViewManager.BringIntoView(index); detailsViewDataGrid = dataGrid.GetDetailsViewGrid(dataGrid.ResolveToRecordIndex(parentRowIndex), relationalColumn); } } } if (detailsViewDataGrid != null) detailsViewDataGrid.SelectedIndex = childRowIndex; } View Sample in GitHubConclusion Hope you enjoyed learning about how to programmatically scroll and select the records of the multi-level DetailsView on initial loading in WPF DataGrid (SfDataGrid).You can refer to our WPF DataGrid feature tour page to learn about its other groundbreaking feature representations. You can explore our WPF DataGrid documentation to understand how to present and manipulate data.For current customers, you can check out our Angular 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 Angular Diagram and other Angular components.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!
By default, in SfDataGrid you can scroll only one item while doing MouseWheel. But you can scroll multiple items while doing MouseWheel by handling the MouseWheel event in SfDataGrid.TableControl. You can achieve scroll multiple items while doing MouseWheel by increase and decrease the current position of the scroll box on the scrollbar control based on the delta value. sfDataGrid1.TableControl.MouseWheel += OnTableControl_MouseWheel;private void OnTableControl_MouseWheel(object sender, MouseEventArgs e){ if (e.Delta == 0) return; var smallChange = sfDataGrid1.TableControl.ScrollRows.ScrollBar.SmallChange; if (e.Delta > 0) sfDataGrid1.TableControl.ScrollRows.ScrollBar.Value -= (4 * smallChange); else sfDataGrid1.TableControl.ScrollRows.ScrollBar.Value += (4 * smallChange); this.sfDataGrid1.TableControl.UpdateScrollBars(); this.sfDataGrid1.TableControl.Invalidate(); } View Sample in GitHub
The Xamarin.Forms SfListView allows you to change the stack height based on scroll using SfListView.ExtendedScrollView scrolled event. Based on the minimum and maximum value of the scroll offset, you can change the height for the StackLayout. XAML StackLayout is used as a header of the ListView. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}"> <ContentPage.BindingContext> <local:ContactsViewModel/> </ContentPage.BindingContext> <ContentPage.Behaviors> <local:Behavior/> </ContentPage.Behaviors> <ContentPage.Content> <StackLayout > <StackLayout x:Name="headerStack" BackgroundColor="Teal" HeightRequest="100"> <Label Text="Header" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> </StackLayout> <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <Grid x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </ContentPage.Content> </ContentPage> C# You can get the ExtendedScrollView by using the SfListView.GetScrollView method and trigger the Scrolled event. using Syncfusion.ListView.XForms.Control.Helpers; namespace ListViewXamarin { public class Behavior : Behavior<ContentPage> { SfListView ListView; StackLayout Header; double minHeight = 50; double maxHeight = 100; protected override void OnAttachedTo(ContentPage bindable) { ListView = bindable.FindByName<SfListView>("listView"); Header = bindable.FindByName<StackLayout>("headerStack"); var scrollView = ListView.GetScrollView(); scrollView.Scrolled += ScrollView_Scrolled; base.OnAttachedTo(bindable); } private void ScrollView_Scrolled(object sender, ScrolledEventArgs e) { if (e.ScrollY > 10 && Header.HeightRequest > minHeight) { Header.HeightRequest = minHeight; } else if (e.ScrollY < 10 && Header.HeightRequest < maxHeight) { Header.HeightRequest = maxHeight; } } } } Output View sample in GitHub ConclusionI hope you enjoyed learning how to update header height on scrolling in Xamarin.Forms ListView.You can refer to our Xamarin ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin ListView example 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!
The WPF DataGrid (SfDataGrid) cannot maintain the scrollbar position when ItemsSource changed. But you can achieve this by get and set the scrollbar position using SfDataGrid.ItemsSourceChanged event. this.dataGrid.ItemsSourceChanged += DataGrid_ItemsSourceChanged; private void DataGrid_ItemsSourceChanged(object sender, GridItemsSourceChangedEventArgs e) { if (columnName.Count > 0) { foreach (var col in columnName) { this.dataGrid.GroupColumnDescriptions.Add(new GroupColumnDescription() { ColumnName = col }); } foreach (Group group in dataGrid.View.Groups) { var isExpandGroup = group; var key = expandedGroups.FirstOrDefault(colu => colu.Key.ToString() == isExpandGroup.Key.ToString()); do { if (key != null) dataGrid.ExpandGroup(isExpandGroup); if (isExpandGroup.Groups != null) { isExpandGroup = isExpandGroup.Groups[0]; key = expandedGroups.FirstOrDefault(col => col.Groups[0].Key.ToString() == group.Groups[0].Key.ToString()); } else isExpandGroup = null; } while (isExpandGroup != null); } } VisualContainer container = this.dataGrid.GetVisualContainer(); container.ScrollRows.ScrollBar.Value = this.Scrollbarvalue; container.InvalidateMeasureInfo(); } private void Button_Click_1(object sender, RoutedEventArgs e) { var groups = dataGrid.View.Groups; foreach (Group group in groups) { if (group.IsExpanded) expandedGroups.Add(group); } foreach (GroupColumnDescription groupColumnDescriptions in dataGrid.GroupColumnDescriptions) columnName.Add(groupColumnDescriptions.ColumnName); VisualContainer container = this.dataGrid.GetVisualContainer(); double scrollValue = container.ScrollRows.ScrollBar.Value; this.Scrollbarvalue = scrollValue; //change Items source this.dataGrid.ItemsSource = viewModel.Ordersnew; } View Sample in GitHub.
You can find the scrolling direction in Xamarin.Forms SfListView by using the Scrolled event of the ScollView. XAML In the SfListView.HeaderTemplate, bind the ViewModel property to show the scroll direction. <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"> <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ContactsInfo}" IsStickyHeader="True" ItemSize="70"> <syncfusion:SfListView.Behaviors> <local:Behavior/> </syncfusion:SfListView.Behaviors> <syncfusion:SfListView.HeaderTemplate> <DataTemplate> <Label Text="{Binding ScrollDirection}" /> </DataTemplate> </syncfusion:SfListView.HeaderTemplate> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid> <Image Source="{Binding ContactImage}" Aspect="AspectFill"/> <Label LineBreakMode="NoWrap" Text="{Binding ContactName}"/> <Label LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> <Label LineBreakMode="NoWrap" Text="{Binding ContactType}"/> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </ContentPage> C# You can get the ExtendedScrollView using the ListView.GetScrollView helper method and update the ScrollDirection value based on the previous offset. public class Behavior : Behavior <SfListView> { ExtendedScrollView scrollview; double previousOffset; public SfListView listview { get; private set; } protected override void OnAttachedTo(SfListView bindable) { base.OnAttachedTo(bindable); listview = bindable as SfListView; scrollview = listview.GetScrollView(); scrollview.Scrolled += Scrollview_Scrolled; } private void Scrollview_Scrolled(object sender, ScrolledEventArgs e) { if (e.ScrollY == 0) return; if (previousOffset >= e.ScrollY) { // Up direction viewModel.ScrollDirection = "Up Direction"; } else { //Down direction viewModel.ScrollDirection = "Down Direction"; } previousOffset = e.ScrollY; } } View sample in GitHub
You can add jump list using Xamarin.Forms ListView by tapping on the indexed letter (group key) and scrolling to the respective group (GroupHeaderItem) by passing group key index in the ScrollToIndexmethod aslike contact list. This article explains you how to create jump list with group key and scroll to the tapped item. Creates panel to shows the group key as indexed vertically. <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" > <ContentPage.Content> <Grid > <syncfusion:SfListView x:Name="listView" Grid.Row="0"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid> <Image Source="{Binding ContactImage}" Grid.Column="0"/> <StackLayout Orientation="Vertical" Grid.Column="1"> <Label Text="{Binding ContactName}"/> <Label Text="{Binding ContactNumber}"/> </StackLayout> </Grid> <StackLayout HeightRequest="1" BackgroundColor="LightGray"/> </ViewCell> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> <Grid x:Name="IndexPanelGrid" Grid.Row="0" VerticalOptions="CenterAndExpand" HorizontalOptions="End" /> </Grid> </ContentPage.Content> </ContentPage> Creates and populates the index panel with index labeled from the Group key. ListView.Loaded += ListView_Loaded; private void ListView_Loaded(object sender, ListViewLoadedEventArgs e) { var groupcount = this.ListView.DataSource.Groups.Count; for (int i = 0; i < groupcount; i++) { label = new Label(); GroupResult group = ListView.DataSource.Groups[i]; label.Text = group.Key.ToString(); indexPanelGrid.Children.Add(label, 0, i); var labelTapped = new TapGestureRecognizer() { Command = new Command<object>(OnTapped), CommandParameter = label }; label.GestureRecognizers.Add(labelTapped); } } ByOn tapping the group key value loaded in the index panel, you can scroll the listview to the respective group by comparing all GroupHeader’s Key values as follows.like below. private void OnTapped(object obj) { if (previousLabel != null) { previousLabel.TextColor = Color.DimGray; } var label = obj as Label; var text = label.Text; label.TextColor = Color.Red; for (int i = 0; i < ListView.DataSource.Groups.Count; i++) { var group = ListView.DataSource.Groups[i]; if (group.Key == null) App.Current.MainPage.DisplayAlert("Message", "Group not available", "ok"); if ((group.Key != null && group.Key.Equals(text))) { ListView.LayoutManager.ScrollToRowIndex (ListView.DataSource.DisplayItems.IndexOf(group), true); } } previousLabel = label; } OutpPut Download the sample from GitHub. ConclusionI hope you enjoyed learning about how to add a jump list with Xamarin.Forms ListView.You can refer to our Xamarin.Forms ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.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!
This section explains how to provide scrolling support to any custom control using SfParallaxView. Create SfParallaxView sample with all necessary assemblies. Please refer the below link to create a simple SfParallaxView sample along with the ways to configure it. https://help.syncfusion.com/xamarin/sfparallaxview/gettingstarted Step 1: Bind any custom control (For example: In this section we have bounded a control which is derived from Xamarin.Forms ListView) to SfParallaxView source property.By default Xamarin.Forms ListView do not have any build-in support to get total scrollable content size and scrolling events. It is mandatory to extends custom control from IParallaxView interface to support parallax scrolling. C# : public class CustomListView : ListView , IParallaxView { private Size scrollHeight; public Size ScrollableContentSize { get { return this.scrollHeight; } set { this.scrollHeight = value; OnPropertyChanged("ScrollableContentSize"); } } public event EventHandler<ParallaxScrollingEventArgs> Scrolling; . . . } Xaml : <parallax:SfParallaxView Source="{x:Reference Name = listview}" x:Name="parallaxview" Orientation="Vertical" > . . . </parallax:SfParallaxView> <local:CustomListView x:Name="listview" ItemsSource="{Binding Items}" RowHeight="150" BackgroundColor="Transparent" > <local:CustomListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid> . . . </Grid> </ViewCell> </DataTemplate> </local:CustomListView.ItemTemplate> </local:CustomListView> Step 2: To enable the parallax scrolling, you need to calculate the scrollable content size of the custom control in all platform specific projects. Forms.Android : internal class ParallaxViewListViewRenderer : ListViewRenderer { . . . CustomListView listViewElement; private void GetListViewScrollableHeight(NativeAndroid.Widget.ListView listView) { . . . float scrollableHeight = height / density; (listViewElement as CustomListView).ScrollableContentSize = new Size(0, scrollableHeight); // since listview supports only vertical orientation, it is enough to calculate the total scrollable height. . . . } } Forms.iOS : internal class ParallaxViewListViewRenderer : ListViewRenderer { . . . CustomListView listViewElement; private void GetListViewScrollableHeight() { if (listViewElement != null) { . . . scrollableHeight = (float)Control.ContentSize.Height; listViewElement.ScrollableContentSize = new Size(0, scrollableHeight); . . . } } } Forms.UWP : internal class ParallaxViewListViewRenderer : ListViewRenderer { . . . CustomListView listViewElement; private void GetListViewScrollableHeight(Xaml.Controls.ListViewBase sender, Xaml.Controls.ContainerContentChangingEventArgs args) { if (scrollViewer != null) { . . . var scrollableHeight = (float)(_scrollViewer as WindowsScrollViewer).ExtentHeight; . . . listViewElement.ScrollableContentSize = new Size(0, scrollableHeight); } } } The calculated scrollable height value must be assigned to ScrollableContentSize of the custom control (CustomListView). Step 3: You need to calculate and bind the custom control scroll X and Y cordinates to Parallax View control. public class CustomListView : ListView , IParallaxView { . . . private void CustomListView_CustomListViewScrolling(object sender, ListViewScrollingEventArgs e) { OnScrollChanged(new ParallaxScrollingEventArgs(e.ScrollX, e.ScrollY, false)); } . . . } Screenshot: Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ParallaxSample-1422855791
ListView allows you scroll to the end using the ScrollToRowIndex or ScrollTo method when the items are added into the collection using the DisplayItemCollectionChanged event. If you have header or groupheader, then consider the index and give it to the ScrollToRowIndex method. C# Sample link: Scroll to the end of the listview when add an item at run time.
Scroll to a specific record in datagrid You can programmatically scroll to a specific record in DataGrid using the SfDataGrid.TableControl.ScrollRows.ScrollInView method. You can get the row index of any record using the SfDataGrid.TableControl.ResolveToRowIndex method. In the following example, data grid is scrolled to a record with OrderID value: 10680. C# var record = this.sfDataGrid.View.Records.FirstOrDefault(item => (item.Data as OrderInfo).OrderID == 10680); if (record != null) { this.sfDataGrid.TableControl.ScrollRows.ScrollInView(this.sfDataGrid.TableControl.ResolveToRowIndex(record)); this.sfDataGrid.TableControl.UpdateScrollBars(); } VB Dim record = Me.sfDataGrid.View.Records.FirstOrDefault(Function(item) (TryCast(item.Data, OrderInfo)).OrderID = 10680) If record IsNot Nothing Then Me.sfDataGrid.TableControl.ScrollRows.ScrollInView(Me.sfDataGrid.TableControl.ResolveToRowIndex(record)) Me.sfDataGrid.TableControl.UpdateScrollBars() End If Sample: How to scroll to a specific record programmatically in datagrid
The scroll position of the ListView can be maintained when items are filtered and cleared using the OnFilterTextChanged event of search bar. For example, the initial scroll position should be maintained when applying and clearing the filter of the items at runtime. C# Click here to download the sample.
User can add the ScrollBar to the Carousel Items. It can be achieved by adding the ScrollViewer control inside the ItemTemplate of Carousel control. The following code demonstrates the same. XAML <Window.DataContext> <local:ViewModel/> </Window.DataContext> <!-- Carousel control --> <syncfusion:Carousel Height="300" x:Name="carousel" ItemsSource="{Binding Collection}"> <!-- Set Height For Carousel Items --> <syncfusion:Carousel.ItemContainerStyle> <Style TargetType="syncfusion:CarouselItem"> <Setter Property="Height" Value="140" /> </Style> </syncfusion:Carousel.ItemContainerStyle> <!-- For Adding ScrollBar to Carousel Items --> <syncfusion:Carousel.ItemTemplate> <DataTemplate> <Grid > <!-- Add ScrollBar --> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" > <Border x:Name="border" > <Grid Width="150" Height="300"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBox TextWrapping="Wrap" Grid.Row="0" Background="Green" Foreground="White" Text="The Carousel is a circular conveyor used on which objects are displayed and rotated. The Carousel control provides a 3D interface for displaying objects with interactive navigation, Data Binding Path, Items Per Page, Scaling and Skewing."/> <Image Source="/Images1/dodsworth.png" Grid.Row="1" /> </Grid> </Border> </ScrollViewer> </Grid> </DataTemplate> </syncfusion:Carousel.ItemTemplate> C# public class Model { } public ObservableCollection<Model> Collection { get; set; } public ViewModel() { Collection = new ObservableCollection<Model>(); Collection.Add(new Model() ); Collection.Add(new Model() ); Collection.Add(new Model() ); Collection.Add(new Model() ); Collection.Add(new Model() ); } Screenshot Sample: CarouselSample
You can scroll to record programmatically using ScrollInView method by passing the row index of the record in WPF DataGrid (SfDataGrid). You can get the row index of the record by using ResolveToRowIndex extension method present in Syncfusion.UI.Xaml.Grid.Helpers. You can select the record programmatically by setting SelectedItem property or by calling MoveCurrentTo method of SfDataGrid.View. In the below code, data grid scrolled and selected in loaded event. using Syncfusion.UI.Xaml.Grid.Helpers; this.dataGrid.Loaded += DataGrid_Loaded; private void DataGrid_Loaded(object sender, RoutedEventArgs e) { var selectedItem = (this.DataContext as Viewmodel).SelectedItem; var rowindex = this.dataGrid.ResolveToRowIndex(selectedItem); var columnindex = this.dataGrid.ResolveToStartColumnIndex(); //Make the row in to available on the view. this.dataGrid.ScrollInView(new RowColumnIndex(rowindex, columnindex)); //to set the found row as current row this.dataGrid.View.MoveCurrentTo(selectedItem); } View sample in GitHub.
