We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to insert other controls inside a GridCell?

Platform: Xamarin.iOS |
Control: SfDataGrid

SfDataGrid displays the values of the binded data objects in the GridCells. It allows you to insert any type of data and also to customize the views inserted in the GridCell. To customize the views inserted in the Gridcell, you have to create a template column and use a custom GridCell derived from the GridCell in the template column.

You can refer the following user documentation link for more details regarding usage of TemplateColumn.


Refer the following code example which illustrates how to insert a Syncfusion Chart control in the GridCells by using the template column and custom GridCell.




public class LineChartCell : GridCell


   SFChart chart ;

   ChartLineDataSource dataModel;

   public LineChartCell ()


      chart = new SFChart ();


      //Initializing Primary Axis

      SFCategoryAxis primaryAxis = new SFCategoryAxis ();

      primaryAxis.PlotOffset = 5;

      chart.PrimaryAxis = primaryAxis;


      //Initializing Secondary Axis

      SFNumericalAxis secondaryAxis = new SFNumericalAxis ();

      chart.SecondaryAxis = secondaryAxis;


      //Setting data source to the chart

      dataModel = new ChartLineDataSource ();

      chart.DataSource = dataModel as SFChartDataSource;

      chart.PrimaryAxis.ShowMajorGridLines = false;

      chart.PrimaryAxis.Visible = false;

      chart.SecondaryAxis.Visible = false;

      chart.SecondaryAxis.ShowMajorGridLines = false;

      chart.Legend.Visible = false;

      this.AddSubview (chart);

      this.CanRenderUnLoad = false;


   protected override void UnLoad ()


      this.RemoveFromSuperview ();


   public override void LayoutSubviews ()


      chart.Frame = new CoreGraphics.CGRect (0, 0, 105, 50);

      var chartPoint1= new SFChartDataPoint (NSObject.FromObject("20"+(this.DataColumn.RowData as


      var chartPoint2= NSObject.FromObject((this.DataColumn.RowData as BankInfo).CustomerID.ToString());


      if((this.DataColumn.RowData as BankInfo).CustomerID <14)

           dataModel.DataPoints.ReplaceObject((nint)((this.DataColumn.RowData as BankInfo).CustomerID),



      chart.ReloadData ();

      base.LayoutSubviews ();


   public override void Draw (CoreGraphics.CGRect rect)


      base.Draw (rect);




public class ChartLineDataSource : SFChartDataSource


   public NSMutableArray DataPoints;

   public ChartLineDataSource ()


      DataPoints = new NSMutableArray ();

      AddDataPointsForChart("2010", 45);

      AddDataPointsForChart("2011", 86);

      AddDataPointsForChart("2012", 23);

      AddDataPointsForChart("2013", 43);

      AddDataPointsForChart("2014", 54);

      AddDataPointsForChart("2010", 48);

      AddDataPointsForChart("2011", 68);

      AddDataPointsForChart("2012", 20);

      AddDataPointsForChart("2013", 56);

      AddDataPointsForChart("2014", 53);

      AddDataPointsForChart("2010", 48);

      AddDataPointsForChart("2011", 61);

      AddDataPointsForChart("2012", 13);

      AddDataPointsForChart("2013", 76);

      AddDataPointsForChart("2014", 04);


   public void AddDataPointsForChart (String month, Double value)


      DataPoints.Add (new SFChartDataPoint (NSObject.FromObject (month),NSObject.FromObject(value)));


   public override nint NumberOfSeriesInChart (SFChart chart)


      return 1;


   public override SFSeries GetSeries (SFChart chart, nint index)


      SFLineSeries series                = new SFLineSeries ();

      series.DataMarker.ShowLabel= false;

      series.LineWidth = 1;

      return series;


   public override SFChartDataPoint GetDataPoint (SFChart chart, nint index, nint seriesIndex)


      //returns thedatapoint for each series.

      return DataPoints.GetItem<SFChartDataPoint> ((nuint)index);


   public override nint GetNumberOfDataPoints (SFChart chart, nint index)


      return (int)DataPoints.Count; //No of datapoints needed for each series.




The following screenshot shows the final outcome upon execution of the above code

You can find the working sample for this KB in the following link


2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile