dynamically Grid with Blazor

[AlexZaw]

My table needs to be created dynamically on a blazor page.

When displaying the page, no table is displayed at first. After the user has selected a profile from a drop-down list and further controls have determined the period of the data, the corresponding profile with the measurement data is read from the database.

Only then is known how many columns and GroupColumns are necessary. The GroupColumns represent a measuring point with several difference values. Depending on the selected profile there are different measuring points and different difference values.

For example
For one profile the difference values dX, dY and dZ of all points defined in the profile should be displayed. In another profile the limit values dZ, dV, dE etc. should be displayed.

In a profile the difference values are stored in a two dimensional double array.

Because I have not found a binding possibility for a two dimensional double array, I work with a class where measured values of up to 10 points can be stored between for the grid. The Name of this class ist GridRowData

public class GridRowData
{
public DateTime Time { get; set; }

public int Pt1_rvector { get; set; } = 0;
public int Pt1_vector { get; set; } = 0;
public int Pt1_dY { get; set; } = 0;
public int Pt1_dX { get; set; } = 0;
public int Pt1_dZ { get; set; } = 0;
public int Pt1_dStation { get; set; } = 0;
public int Pt1_dQuer { get; set; } = 0;
public int Pt1_dHoch { get; set; } = 0;

public int Pt2_rvector { get; set; } = 0;
public int Pt2_vector { get; set; } = 0;
public int Pt2_dY { get; set; } = 0;
public int Pt2_dX { get; set; } = 0;
public int Pt2_dZ { get; set; } = 0;
public int Pt2_dStation { get; set; } = 0;
public int Pt2_dQuer { get; set; } = 0;
public int Pt2_dHoch { get; set; } = 0;

public int Pt3_rvector { get; set; } = 0;
public int Pt3_vector { get; set; } = 0;
public int Pt3_dY { get; set; } = 0;
public int Pt3_dX { get; set; } = 0;
public int Pt3_dZ { get; set; } = 0;
public int Pt3_dStation { get; set; } = 0;
public int Pt3_dQuer { get; set; } = 0;
public int Pt3_dHoch { get; set; } = 0;

public int Pt4_rvector { get; set; } = 0;
public int Pt4_vector { get; set; } = 0;
public int Pt4_dY { get; set; } = 0;
public int Pt4_dX { get; set; } = 0;
public int Pt4_dZ { get; set; } = 0;
public int Pt4_dStation { get; set; } = 0;
public int Pt4_dQuer { get; set; } = 0;
public int Pt4_dHoch { get; set; } = 0;

public int Pt5_rvector { get; set; } = 0;
public int Pt5_vector { get; set; } = 0;
public int Pt5_dY { get; set; } = 0;
public int Pt5_dX { get; set; } = 0;
public int Pt5_dZ { get; set; } = 0;
public int Pt5_dStation { get; set; } = 0;
public int Pt5_dQuer { get; set; } = 0;
public int Pt5_dHoch { get; set; } = 0;

public int Pt6_rvector { get; set; } = 0;
public int Pt6_vector { get; set; } = 0;
public int Pt6_dY { get; set; } = 0;
public int Pt6_dX { get; set; } = 0;
public int Pt6_dZ { get; set; } = 0;
public int Pt6_dStation { get; set; } = 0;
public int Pt6_dQuer { get; set; } = 0;
public int Pt6_dHoch { get; set; } = 0;

…

…

 

My Problem is the Grid show the first column with times correctly. The first Column has no GroupColumn. But all other columns show only “0” and not the Differenz values from my binded List<GridRowData>

What is the correct way to creat the grid dynamically and show the data from a multi dimensional array. Thanks for helping

 

Here my Code in the Blazor Page

<Grid @ref=”grid” DataSource=”@listMeasureData” ColumnGroups=”@_colGroups” Columns=”@_columns”> </Grid>

 

@code {

DefoPointsProfil? profil = null;
List<TimedMeasureData>? listMeasureData = new List<TimedMeasureData>();
List<GridRowData> listGridData = new List<GridRowData>();

Grid grid ;
GridDataSourceSettings _dataSourceSettings = new GridDataSourceSettings();
List<GridColumn> _columns = new List<GridColumn>();
List<GridColumnGroup> _colGroups = new List<GridColumnGroup>();

 

// Is call from a Button

private void Display()
{
if (selTimeRange == ETimeRange.none || selProfil == -1)
return; // Nichts ausgewählt

profil = profilService.GetProfil(selProfil);  // I read the selected Profil from Database
if(profil != null)
{

 

// Read Pointsname for Grid ColumnGroup and measuredata of profil from Database

List<string> listIdEx = new List<string>();
if(profilService.GetData(profil, selTimeRange, ref listMeasureData, ref listIdEx))
{
BuildGrid(profil, listMeasureData, listIdEx); // Create Grid
}

}
}

private void BuildGrid(DefoPointsProfil profil, List<TimedMeasureData>? data, List<string> listIdEx)
{
_colGroups.Clear();
_columns.Clear();

for(int i = 0; i < listIdEx.Count; i++)
{
GridColumnGroup grp = new GridColumnGroup()
{
Label = listIdEx[i],
Name = listIdEx[i],
Align = HorizontalAlignment.Center,
VerticalAlign = VerticalAlignment.Center
};

_colGroups.Add(grp);
}

List<IGridDataSourceSettingsDataField> listDataFields = new List<IGridDataSourceSettingsDataField>();
listDataFields.Add
(
new GridDataSourceSettingsDataField()
{
Name = “Time”,
DataType = GridDataSourceSettingsDataFieldDataType.Date
}
);

// First Column with Time of Measurement
GridColumn col = new GridColumn()
{
Label = “Zeit”,
DataType = “date”,
CellsFormat = “yyyy.MM.dd HH:mm”,
DataField = “Time”,
MinWidth = 150,
Align = HorizontalAlignment.Center
};
_columns.Add(col);

// All Measurements Values from all Points
for(int i = 0; i < listIdEx.Count; i++) // Points
{
for(int j = 0; j < profil.ListDiffValues.Count; j++) // All measured diff. Values of a Point
{

col = new GridColumn()
{
Label = DataHelper._DiffValueTitles[(int)profil.ListDiffValues[j]],
Align = HorizontalAlignment.Center,
DataType = “number”,
CellsFormat = “i”,
DataField = “pt” + (i + 1).ToString() + “_” + profil.ListDiffValues[j].ToString(), // for example pt1_dX
MinWidth = 100,
ColumnGroup = _colGroups[i].Name
};

_columns.Add(col);

listDataFields.Add
(
new GridDataSourceSettingsDataField()
{
Name = “pt” + (i + 1).ToString() + “_” + profil.ListDiffValues[j].ToString(),
DataType = GridDataSourceSettingsDataFieldDataType.Number
}
);
}
}

_dataSourceSettings.DataSourceType = GridDataSourceSettingsDataSourceType.Array;
_dataSourceSettings.DataFields = listDataFields;

// Daten npassen

listGridData.Clear();

foreach(TimedMeasureData mData in listMeasureData)
{
GridRowData rowData = new GridRowData();
rowData.Time = mData.From;
rowData.Pt1_dX = 10;   // Only Testdata
rowData.Pt1_dY = 11;
rowData.Pt1_dZ = -12;

//

// Here I write my measure data in List of enumerable Class GridRowData

//Type classType = typeof(GridRowData);
//for(int i = 0; i < listIdEx.Count; i++)
//{
// for(int j = 0; j < profil.ListDiffValues.Count; j++)
// {
// string prop = “Pt” + (i + 1).ToString() + “_” + profil.ListDiffValues[j].ToString();
// var property = classType.GetProperty(prop);
// double d = mData.MeasureData[i, j];
// property.SetValue(rowData, (int)d);
// }
//}

listGridData.Add(rowData);
}

grid.ColumnGroups = _colGroups;
grid.Columns = _columns;
grid.DataSource = listGridData;
grid.DataSourceSettings = _dataSourceSettings;
grid.Refresh();
}

 

[AlexZaw]

I found my error.

 

For the columns I write the name of the datafields with a first small letter and in my class the members have a big first letter. Sorry

[Author]

Posts