Xamarin.Android | ComponentOne
Controls / FlexGrid / Features / Custom Cells
In This Topic
    Custom Cells
    In This Topic

    FlexGrid gives you complete control over the contents of the cells. You can customize each column by modifying the cell contents using UIView class and GridCellType enumeration, allowing you to customize cell content entirely in code.

    The following image shows how the FlexGrid appears on setting C1Gauge as a cell template to represent performance.

    The following code example demonstrates how to add custom cell content in the FlexGrid control. The example uses the class, Customer, created in the Quick Start section.

    C#
    Copy Code
    public class MainActivity : Activity
    {
        int count = 1;
    
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
    
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
    
            var grid = FindViewById<FlexGrid>(Resource.Id.Grid);
    
            grid.AutoGenerateColumns = false;
            grid.Columns.Add(new GridColumn() { Binding = "FirstName", Width = GridLength.Star });
            grid.Columns.Add(new GridColumn() { Binding = "LastName", Width = GridLength.Star });
            grid.Columns.Add(new GridBulletGraphColumn() { Binding = "OrderTotal", Header = "Order Total", Width = GridLength.Star });
    
            var data = Customer.GetCustomerList(100);
            grid.ItemsSource = data;
    
        }
    }
    
    public class GridBulletGraphColumn : GridColumn
    {
        protected override object GetCellContentType(GridCellType cellType)
        {
            if (cellType == GridCellType.Cell)
            {
                return typeof(C1BulletGraph);
            }
            else
            {
                return base.GetCellContentType(cellType);
            }
        }
    
        protected override View CreateCellContent(GridCellType cellType, object cellContentType)
        {
            if (cellType == GridCellType.Cell)
            {
                var gauge = new C1BulletGraph(Grid.Context);
                gauge.Max = 10000;
                gauge.Target = 7000;
                gauge.Bad = 1000;
                gauge.Good = 6000;
                gauge.IsReadOnly = true;
                return gauge;
            }
            else
            {
                return base.CreateCellContent(cellType, cellContentType);
            }
        }
    
        protected override void BindCellContent(View cellContent, GridCellType cellType, GridRow row)
        {
            if (cellType == GridCellType.Cell)
            {
                var gauge = cellContent as C1BulletGraph;
                gauge.Value = (double)GetCellValue(cellType, row);
            }
            else
            {
                base.BindCellContent(cellContent, cellType, row);
            }
        }
    }