Xamaring Forms SfDatagrid dynamic columns and rows

[Brian]

I am trying to create a sfdatagrid which shows a dynamic data dependent variable number of rows and columns - each cell being a text string with format - and is held as a list of (lists containing text + format info for each cell)

The format info defines text color, and cellar background color.

The heading of each column (and row) is also data dependent

I have tried unsuccessfully to implement all the dynamic column examples I can find and appreciate any help

I have attached an image of what I am trying to achieve

Thanks

Attachment: grid_9d4fe104.zip

[Vigneshkumar Ramasamy]

Hi Brian,  

 

Thanks for contacting Syncfusion Support.  

 

Your requirement to format the cells based on the cell value or column index or row index or mapping name, can be achieved by usingSfDataGrid.QueryCellStyle event. You can format the text color and the background color of the cell based on your condition using the QueryCellStyle event. You can also apply  format to the entire row based on the RowIndex or RowData by using the SfDataGrid.QueryRowStyle event. You can refer the below UG links for applying formatting to the cells.  

 

UG Link: 
https://help.syncfusion.com/xamarin/sfdatagrid/conditional-styles   

https://help.syncfusion.com/xamarin/sfdatagrid/conditional-styles#styling-cells-using-querycellstyle-event   

 

https://help.syncfusion.com/xamarin/sfdatagrid/conditional-styles#styling-cells-using-rowstyle-event   

 

If the data to be loaded in SfDataGrid will be known in run time, then you can use the SfDataGrid.GridUnboundColumn to add the columns dynamically to SfDataGrid. Please refer the below UG links to add UnboundColumn to SfDataGrid and populate data to it.  

 

UG Link: https://help.syncfusion.com/xamarin/sfdatagrid/unbound-column   

 

https://help.syncfusion.com/xamarin/sfdatagrid/unbound-column?cs-save-lang=1&cs-lang=xaml#populating-data-for-the-unbound-column   

 

Regards,  

Vigneshkumar R 

 

[Brian]

Thank you, that solved my problem

For anyone struggling with how to add dynamic (variable number of) rows and columns dependent on the underlying data, here is the test code I used and have attached a picture of the resulting grid

Xml

                    <syncfusion:SfDataGrid
                        x:Name="XmlDataGrid"
                        VerticalOptions="FillAndExpand"
                        HorizontalOptions="FillAndExpand"
                        AutoGenerateColumns="False"
                        GridTapped="TappedXmlGrid">
                    </syncfusion:SfDataGrid>

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Syncfusion.SfDataGrid.XForms;
using System.Collections.ObjectModel;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace sfDataGridDynamicColumns
{
 [XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class AsfDataGridPage : ContentPage
 {
  public AsfDataGridPage ()
  {
   InitializeComponent ();
            DisplayDataInSfGrid();
        }

        private void DisplayDataInSfGrid()
        {
            int iColCount = 30;
            int iRowCount = 50;

            #region CreateTheColumns
            XmlDataGrid.AutoGenerateColumns = false;

            // First column used ONLY as an index key for the number of rows in the data
            GridTextColumn rowIdColumn = new GridTextColumn();
            rowIdColumn.MappingName = "RowID";
            rowIdColumn.HeaderText = "Row";
            rowIdColumn.IsHidden = true;
            XmlDataGrid.Columns.Add(rowIdColumn);

            for (int iCol = 1; iCol <= iColCount; iCol++)
            {
                string sColName = iCol.ToString();
                string sColHeading = "Head "+iCol.ToString();

                GridUnboundColumn MyUnboundColumn = new GridUnboundColumn()
                {
                    MappingName = sColName,
                    HeaderText = sColHeading
                };
                XmlDataGrid.Columns.Add(MyUnboundColumn);
            }
            XmlDataGrid.FrozenColumnsCount = 2;
            #endregion

            #region CreateTheRows
            DataGridRowInfoRepository DataGridRows = new DataGridRowInfoRepository();
            XmlDataGrid.ItemsSource = DataGridRows.RowInfoCollection;
            for (int iRow = 0; iRow < iRowCount; iRow++)
            {
                DataGridRowInfo aDataGridRow = new DataGridRowInfo(iRow);
                DataGridRows.RowInfoCollection.Add(aDataGridRow);
            }

            #endregion

            //
            XmlDataGrid.QueryCellStyle += DataGrid_QueryCellStyle;
            XmlDataGrid.QueryUnboundColumnValue += DataGrid_QueryUnboundColumnValue;

        }

        #region DataModel
        public class DataGridRowInfo
        {
            public int RowID { get; set;  }
            public DataGridRowInfo(int iRow)
            {
                this.RowID = iRow;
            }
        }
        public class DataGridRowInfoRepository
        {
            private ObservableCollection<DataGridRowInfo> _RowInfo;
            public ObservableCollection<DataGridRowInfo> RowInfoCollection
            {
                get { return _RowInfo; }
                set { this._RowInfo = value; }
            }

            public DataGridRowInfoRepository()
            {
                _RowInfo = new ObservableCollection<DataGridRowInfo>();
            }
        }
        #endregion

        #region Grid Events
        private void DataGrid_QueryUnboundColumnValue(object sender, GridUnboundColumnEventArgs e)
        {
            if (e.UnboundAction == UnboundActions.QueryData)
            {
                string sColumn = e.Column.HeaderText;
                string sColumnName = e.Column.MappingName;
                var iRow = Convert.ToInt16(e.Record.GetType().GetProperty("RowID").GetValue(e.Record));
                string sRow = iRow.ToString();
                e.Value = sColumnName + " " + sRow;
            }
        }

        private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
        {
            if (e.ColumnIndex == 1)    
            {
                //style the left hand column as per the heading
                e.Style.BackgroundColor = Color.White;
            }
            else if (e.ColumnIndex == 4 && e.RowIndex % 3 == 1)
            {
                // give some cells a different background color (as a test)
                e.Style.BackgroundColor = Color.BlueViolet;
                e.Style.ForegroundColor = Color.White;
            }
            else
            {
                // default background color
                e.Style.BackgroundColor = Color.Silver;
            }
            e.Handled = true;
        }

        public void TappedXmlGrid(object sender, GridTappedEventArgs e)
        {
            //Process user tapping the grid
            var rowIndex = e.RowColumnIndex.RowIndex;
            var rowData = e.RowData;
            var columnIndex = e.RowColumnIndex.ColumnIndex;
            string sMessage = "You tapped Row " + rowIndex.ToString() + ", Column " + columnIndex.ToString();
            Application.Current.MainPage.DisplayAlert("Alert", sMessage, "OK");
        }
        #endregion

    }
}

Attachment: grid_261d72f3.zip

[Suhasini Suresh]

Hi Brian, 

 

Thanks for your update. 

 

We are happy that your requirement is achieved. 

 

Regards, 

Suhasini