Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #103938
    AlexZaw
    Participant

    How 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

     

    #103940

    Hi,

    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 Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #103945
    AlexZaw
    Participant

    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

    #103958

    Hi,

    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/a4r86t

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #103962
    AlexZaw
    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 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;
    }

    }

    #103970

    Hi,

    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 Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #103971
    AlexZaw
    Participant

    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 page 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.
    #103979

    Hi,

    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 Borislavov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.