Products

[AlexZaw]

Sorry,

overflow-auto have no effect.

When I insert your grid without container.Only

 

<Grid id=”grid” @ref=”grid” DataSource=”@listGridData” ColumnGroups=”_colGroups” Columns=”@_columns” Paging=”@paging” Pager=”@pager”></Grid>

I have the same problem. After loading the page the Grid width is 100%, but when I inserts later columns in the grid the grid width is greater as the page width.

 

Maybe it is also because the first time I run my BuildGrid function, no data is displayed. The columns are there but no rows are displayed, whereas my list listGridData contains data. If I press the “Anzeigen” button a second time to run BuldGrid. The data is displayed and the width of the table is changed a bit. You can see on the page how the width of the table slowly gets smaller. But in the end it is still wider than the web page.

Here some images.

Image 1 when the page is loaded.

After selection Profil and Timerange and press “Anzeigen” (Show)

 

After I press the Button Aniegen a second time without changes.

I hope the images help you to understand my problem.

 

The editor of the forum show the images, but the images not displayed on the page with the articles!

Alexander

 

• This reply was modified 2 years ago by AlexZaw.

[AlexZaw]

<div class=”border border-primary rounded p-2 my-auto bg-light”>
<Grid id=”grid” @ref=”grid” DataSource=”@listGridData” ColumnGroups=”_colGroups” Columns=”@_columns” Paging=”@paging” Pager=”@pager”></Grid>
</div>

<style>
#grid {
width: 1200px;
height: 600px;
}
</style>

 

@code {

// This for a form where the user select a profil and time range

List<DefoPointsProfil> listProfils = new List<DefoPointsProfil>();
List<SelectListItem> listTimes = new List<SelectListItem>();

ETimeRange selTimeRange = ETimeRange.none;
int selProfil = -1;

DefoPointsProfil? profil = null;

// Here the data from the database is stored
List<TimedMeasureData>? listMeasureData = new List<TimedMeasureData>();

// For the grid I copy the data from database in a List of class GridRowData
List<GridRowData> listGridData = new List<GridRowData>();

Grid? grid;
GridDataSourceSettings _dataSourceSettings = new GridDataSourceSettings();
List<GridColumn> _columns = new List<GridColumn>();
List<GridColumnGroup> _colGroups = new List<GridColumnGroup>();
GridPaging paging = new GridPaging()
{
Enabled = true,
PageSize = 100,
PageIndex = 0
};
GridPager pager = new GridPager() { Visible = true };

protected override void OnInitialized()
{
base.OnInitialized();
listProfils = profilService.GetAllProfils();
listTimes = profilService.TimeRangesList();
}

private void OnSelectProfil(ChangeEventArgs e)
{
selProfil = Convert.ToInt32(e.Value);
}

private void OnSelectTime(ChangeEventArgs e)
{
selTimeRange = (ETimeRange)Enum.Parse(typeof(ETimeRange), e.Value.ToString());
}

private void Display() // Is a event of a Buttom
{

if (selTimeRange == ETimeRange.none || selProfil == -1)
return; // No profil or time range selected

profil = profilService.GetProfil(selProfil);
if(profil != null)
{

List<string> listIdEx = new List<string>();

// Read data from Database
if(profilService.GetData(profil, selTimeRange, ref listMeasureData, ref listIdEx))
{
BuildGrid(profil, listMeasureData, listIdEx);
}

}
}

private void BuildGrid(DefoPointsProfil profil, List<TimedMeasureData>? data, List<string> listIdEx)
{
_colGroups = new List<GridColumnGroup>();
_columns = new List<GridColumn>();

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);

}
}

// Transfer data to List of GridRowData

listGridData = new List<GridRowData>();

foreach(TimedMeasureData mData in listMeasureData)
{
GridRowData rowData = new GridRowData();
rowData.Time = mData.From;

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);
}

paging = new GridPaging()
{
Enabled = true,
PageSize = 100,
PageIndex = 0
};
grid.BeginUpdate();
grid.ColumnGroups = _colGroups;
grid.Columns = _columns;
grid.Paging = paging;
grid.EndUpdate();

}

}

 

 

// Here a Part of my class GridRowData

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

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

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

…

…

public double Pt10_rvector { get; set; } = 0;
public double Pt10_vector { get; set; } = 0;
public double Pt10_dY { get; set; } = 0;
public double Pt10_dX { get; set; } = 0;
public double Pt10_dZ { get; set; } = 0;
public double Pt10_dStation { get; set; } = 0;
public double Pt10_dQuer { get; set; } = 0;
public double Pt10_dHoch { get; set; } = 0;

public GridRowData()
{
Time = DateTime.Now;
}

public GridRowData(double x, double y, double z)
{
Time = DateTime.Now;
Pt1_dX = x;
Pt1_dY = y;
Pt1_dZ = z;
}

}

[AlexZaw]

Hi

Thanks for helping. but it don’t working correctly.

When the page is laoding and the grid is empty than it has a correct width.

After I push a button on the page for loading my grid data from database. I build the gridc olumns dynamically depend of the loaded database data.

The table does not keep its width but grows until all columns in the table are visible.
But the table should keep its predefined width and a horizontal scrollbar should be displayed if not all columns are visible.

 

The div Tag fit to the page width but the grid not with new inserted columns.

Here the code:

<div class=”border border-primary rounded p-2 my-auto bg-light”>
<Grid id=”grid” @ref=”grid” DataSource=”@listGridData” ColumnGroups=”_colGroups” Columns=”@_columns” Paging=”@paging” Pager=”@pager”></Grid>
</div>

<style>
#grid {
width: 100%;
height: 500px;
}
</style>

@code{…}

 

Thanks

 

Alexander

[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