How to load SfDataGrid inside a ViewPager?

1 min read

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.

$C:\Users\pavithra.sivakumar\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Screenshot_2017-02-01-10-40-36.png$