JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Set the width and height of a grid
- This topic has 7 replies, 2 voices, and was last updated 1 year, 10 months ago by
svetoslav_borislavov.
-
AuthorPosts
-
November 1, 2022 at 12:16 pm #103938
AlexZaw
ParticipantHow can i change the witdh of the complete grid. On my page the grid is in the width smaller than my other HTML controls.
For example whenn I use boottrap
<div class=”border border-primary rounded p-2 my-auto bg-light”>
<Grid @ref=”grid”></Grid>
</div>
The grid is 20% smaller as my Border Width.
I found nothings in the doc how I can the width and height of a grid.
Thanks for helping
November 2, 2022 at 9:50 am #103940svetoslav_borislavov
ParticipantHi,
You can change the following CSS variable: –smart-grid-default-width. This will set the default width of the Grid or you can locally change the width to your grid:
<div class=”border border-primary rounded p-2 my-auto bg-light”>
<Grid id=”grid” @ref=”grid”></Grid>
</div>
<style>
#grid {
width: 100%;
}
</style>
@code {
Grid grid;
}I hope this helps! If not, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/-
This reply was modified 1 year, 10 months ago by
svetoslav_borislavov.
November 2, 2022 at 7:16 pm #103945AlexZaw
ParticipantHi
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
November 3, 2022 at 12:18 pm #103958svetoslav_borislavov
ParticipantHi,
Could you, please share your grid settings, so I can better represent your problem?
Here is a demo with dynamically added columns: https://easyupload.io/a4r86tBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/November 3, 2022 at 2:56 pm #103962AlexZaw
Participant<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 selectedprofil = 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;
}}
November 4, 2022 at 1:23 pm #103970svetoslav_borislavov
ParticipantHi,
The problem comes from the grid’s static width. It is overflowing from the wrapper container.
You can set the overflow to auto of the wrapper container this way: <div class=”border border-primary rounded p-2 my-auto bg-light overflow-auto”>I hope this helps!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/November 4, 2022 at 2:45 pm #103971AlexZaw
ParticipantSorry,
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 1 year, 10 months ago by
AlexZaw.
November 8, 2022 at 1:47 pm #103979svetoslav_borislavov
ParticipantHi,
I cannot see the images, can you send them here: support@jqwidgets.com
Also, can you send the demo project?
We are waiting for your reply
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ -
This reply was modified 1 year, 10 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.