How to insert other controls inside a GridCell in Xamarin.iOS DataGrid?
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.
http://help.syncfusion.com/xamarin/sfdatagrid/column-types-android-ios
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.
ViewController.cs
public partial class ViewController : UIViewController
{
SfDataGrid grid;
static bool UserInterfaceIdiomIsPhone
{
get
{
return UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone;
}
}
public ViewController ()
{
grid = new SfDataGrid ();
grid.AutoGenerateColumns = false;
grid.ItemsSource = new ViewModel ().BankInfo;
//Creation of template column
GridTextColumn chartcell = new GridTextColumn ();
chartcell.Width = 130;
chartcell.UserCellType = typeof(LineChartCell); //Loading a CustomCell into template column
chartcell.MappingName = "Transactions";
chartcell.HeaderText = "CHART";
//Adding template column to SfDataGrid’s columns collection
grid.Columns.Add (chartcell);
}
public override void ViewDidLayoutSubviews ()
{
this.grid.Frame = new CGRect(0,20,View.Frame.Width,View.Frame.Height-20);
base.ViewDidLayoutSubviews ();
}
}
CustomCell.Cs
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 BankInfo).CustomerID.ToString()) 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), chartPoint1,chartPoint2) ); 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
http://www.syncfusion.com/downloads/support/directtrac/general/ze/OtherControl2036443728
