Category / Section
How to load SfDataGrid inside a ViewPager?
You can load SfDataGrid inside a ViewPager by using Fragment in the ViewPager and by customizing the FragmentPageAdapter to create a new page for SfDataGrid.
Refer the below code example to load SfDataGrid in a Fragment and using FragmentPageAdapter for ViewPager.
MainPage.axml
<com.refractored.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="45dp" android:textColor="#000000" app:pstsTextColorSelected="#3F51B5" app:pstsUnderlineHeight="1dp" app:pstsUnderlineColor="#C5CAE9" app:pstsIndicatorHeight="5dp" app:pstsIndicatorColor="#3F51B5" app:pstsShouldExpand="true" android:background="#FFFFFF" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" />
axml page for Frament
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/dataGridStudents" android:layout_width="match_parent" android:layout_marginTop="5dp" android:layout_height="match_parent" />
public class GridHostView : Android.Support.V4.App.Fragment
{
SfDataGrid dataGrid;
Context context;
ViewModel viewModel;
public override void OnCreate(Bundle savedInstanceState)
{
this.context = Context;
base.OnCreate(savedInstanceState);
}
public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View dataGridView = inflater.Inflate(Resource.Layout.layout1, container, false);
RelativeLayout dataGridLayout = view.FindViewById<RelativeLayout>(Resource.Id.dataGridStudents);
dataGrid = new SfDataGrid(context);
dataGrid.AutoGenerateColumns = false;
dataGrid.HeaderRowHeight = 30;
viewModel = new ViewModel();
viewModel.SetRowstoGenerate(100);
dataGrid.ItemsSource = (viewModel.OrdersInfo);
GridTextColumn studentID = new GridTextColumn();
studentID.MappingName = "StudentID";
studentID.HeaderCellTextSize = 11;
studentID.CellTextSize = 10;
studentID.LineBreakMode = LineBreakMode.NoWrap;
GridTextColumn studentName = new GridTextColumn();
studentName.MappingName = "StudentName";
studentName.HeaderCellTextSize = 11;
studentName.CellTextSize = 10;
studentName.LineBreakMode = LineBreakMode.NoWrap;
GridTextColumn studentRegno = new GridTextColumn();
studentRegno.MappingName = "StudentRegno";
studentRegno.HeaderCellTextSize = 11;
studentRegno.CellTextSize = 10;
studentRegno.LineBreakMode = LineBreakMode.NoWrap;
dataGrid.SelectionMode = SelectionMode.SingleDeselect;
dataGrid.FrozenRowsCount = 1;
dataGrid.RowHeight = 20;
dataGrid.AllowSorting = true;
dataGrid.Columns.Add(studentID);
dataGrid.Columns.Add(studentName);
dataGrid.Columns.Add(studentRegno);
dataGridLayout.AddView(dataGrid);
return dataGridView;
}
}
public class MainActivity : Android.Support.V4.App.FragmentActivity
{
private PagerAdapter pageAdapter;
private ViewPager viewPager;
private PagerSlidingTabStrip tabs;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
string[] titles = new string[]
{
"Main/List",
" TextView "
};
viewPager = FindViewById<ViewPager>(Resource.Id.pager);
tabs = FindViewById<PagerSlidingTabStrip>(Resource.Id.tabs);
viewPager.CurrentItem = 0;
adapter = new PagerAdapter(SupportFragmentManager, titles);
viewPager.Adapter = pageAdapter;
viewPager.OffscreenPageLimit = titles.Length;
tabs.SetViewPager(viewPager);
}
}
Override the GetItem() method to set instance of Fragment class as a new page.
public class PagerAdapter : FragmentPagerAdapter
{
public string[] Titles;
public PagerAdapter(Android.Support.V4.App.FragmentManager fragmentManager, string[] titles)
: base(fragmentManager)
{
Titles = titles;
}
public override ICharSequence GetPageTitleFormatted(int position)
{
return new Java.Lang.String(Titles[position]);
}
public override int Count
{
get
{
return Titles.Length;
}
}
public override Android.Support.V4.App.Fragment GetItem(int position)
{
switch (position)
{
case 0:
return new GridHostView ();
case 1:
return new LabelFragment();
default:
return new GridHostView ();
}
}
}
On executing the above code example, the below output is obtained.

Sample Link
How to load SfDataGrid inside a ViewPager?