JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Dynamic columns (Blazor)
Tagged: datagrid dynamic columns
- This topic has 11 replies, 3 voices, and was last updated 2 years, 11 months ago by Yavor Dashev.
-
AuthorPosts
-
November 4, 2021 at 4:50 pm #102498TurricanDEParticipant
In the Blazor example “Grid Dynamic columns” ( GridDynamicColumnsPage.razor) the cells for a newly added column e.g. “Id” are empty. But the values for the corresponding field are already in data source before adding the column.
How can you force to show the values without reading the data source again?
November 4, 2021 at 5:30 pm #102500adminKeymasterHi,
I suppose you are using an old version of Smart.Blazor or an old version of the demo as in the online example, there is no ‘Id’ column and it is not part of the list of columns, too. Could you please, check that on your side?
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/November 5, 2021 at 8:53 am #102501TurricanDEParticipantI used the example from the GitHub repository (I’ve updated the Smart.Blazor NuGet to the current version 10.2.2)
GitHub – HTMLElements/smart-blazor: Blazor UI Components & Examples
(GridDynamicColumnsPage.razor)
There is a Id column.
Could you check this example please?
November 5, 2021 at 10:27 am #102504adminKeymasterHi,
I meant the online demo on our website’s blazor page. The demo on Github is not the latest one.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/November 5, 2021 at 10:31 am #102505TurricanDEParticipantAnother question from the example I mentioned above (GridDynamicColumsPage)
I didn’t understand the line in
private void AddColumn()
{…..
grid.Columns = new List<GridColumn>() { }; //TODO: remove
….
}When you comment out the line, now column will be added, but it should because of parameter binding.
<Grid @ref=”grid” DataSource=”dataRecords” Columns=”@columns”></Grid>
With this workaround you also lost some settings
e.g.
<Grid @ref=”grid” DataSource=”dataRecords” Columns=”@columns” Sorting=”@sorting”></Grid>
GridSorting sorting = new GridSorting { Enabled = true };
private void AddColumn()
{GridColumn newColumn = new GridColumn(){ Label = columnsList[i], DataField = columnsList[i], SortOrder = GridColumnSortOrder.Desc };
columns.Add(newColumn);grid.Columns = new List<GridColumn>() { }; //TODO: remove
}
This will add the column, but the sort order get lost.
November 5, 2021 at 10:46 am #102508TurricanDEParticipantYou refer to this one, I guess:
https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-grid?id=dynamic-columns
But in this demo you are showing all the columns and than you can remove columns or add. What if you set the grid without the column field e.g. “GDP_Total” first and then add this column later. All the cells for this added column are empty (but the data is already loaded in the data source)
And as I mentioned above there is also this strange line : grid.Columns = new List<GridColumn>() { }; //TODO: remove
November 8, 2021 at 1:30 pm #102516Yavor DashevParticipantHi TurricanDE,
I have found the source of the issue and also modified the code example so that it shows the cells populated with data.
In your razor file:<Example Name="Grid"> <p> Grid Column CRUD example.Grid Columns can be added, updated or deleted the same way you work with basic Javascript Arrays. Here, we demonstrate how to use the Smart Grid API to update, remove the first or last column and add a new column, </p> @if (dataRecords == null) { <p><em>Loading...</em></p> } else { <Grid DataSourceSettings="DataSettings" @ref="grid" DataSource="dataRecords" Columns="@columns"></Grid> <div class="options"> <div class="caption">Settings</div> <div class="option"> <Button Disabled="@addColumnBtnDisabled" OnClick="AddColumn">Add Column</Button> </div> <div class="option"> <Button Disabled="@removeLastColumnBtnDisabled" OnClick="RemoveLastColumn">Remove Last Column</Button> </div> <div class="option"> <Button Disabled="@removeFirstColumnBtnDisabled" OnClick="RemoveFirstColumn">Remove First Column</Button> </div> <div class="option"> <Button Disabled="@updateFirstColumnBtnDisabled" OnClick="UpdateFirstColumn">Update First Column Header</Button> </div> </div> } </Example> @code { Grid grid; GridDataSourceSettings DataSettings = new GridDataSourceSettings() { DataFields = new List<GridDataSourceSettingsDataField>() { new GridDataSourceSettingsDataField() { Name = "Id", DataType = GridDataSourceSettingsDataFieldDataType.Number }, new GridDataSourceSettingsDataField() { Name = "Area", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "Population_Urban", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "Population_Rural", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "Population_Total", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "GDP_Agriculture", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "GDP_Industry", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "GDP_Services", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "GDP_Total", DataType = GridDataSourceSettingsDataFieldDataType.String } } }; bool addColumnBtnDisabled; bool removeLastColumnBtnDisabled; bool removeFirstColumnBtnDisabled; bool updateFirstColumnBtnDisabled; List<GridColumn> columns = new List<GridColumn>() { new GridColumn() { DataField = "Country", Label = "Country", }, new GridColumn() { DataField = "Area", Label = "Area" }, new GridColumn() { DataField = "Population_Rural", Label = "Population_Rural" }, new GridColumn() { DataField = "Population_Total", Label = "Population_Total" }, new GridColumn() { DataField = "GDP_Total", Label = "GDP_Total" } }; private List<CountryRecord> dataRecords; protected override void OnInitialized() { base.OnInitialized(); dataRecords = dataService.GenerateCountriesData(); } private string[] columnsList = new string[] { "Id", "Country", "Area", "Population_Urban", "Population_Rural", "Population_Total", "GDP_Agriculture", "GDP_Industry", "GDP_Services", "GDP_Total" }; private void AddColumn() { for (int i = 3; i < columnsList.Length; i++) { bool alreadyAdded = false; for (int j = 0; j < columns.Count; j++) { if (columns[j].Label == columnsList[i]) { alreadyAdded = true; break; } } if (alreadyAdded) { continue; } GridColumn newColumn = new GridColumn(){ Label = columnsList[i], DataField = "GDP_Services" }; columns.Add(newColumn); grid.Columns = new List<GridColumn>() { }; //TODO: remove grid.Refresh(); break; } UpdateButtonsDisabledState(); }
The issue was caused because when you don’t set the DataFields for the Grid by default the DataFields are set by the Grid itself and are loaded only the DataFields which are initially loaded.That is why you need to define all the DataFields which are going to be add in order the cells to be populated with the corresponding data.
Let me know what you think!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor DashevSmart UI Team
https://www.htmlelements.com/November 8, 2021 at 3:53 pm #102520TurricanDEParticipantThanks for the example it works in my use case. Now the new added columns show the data. Great!
There is one issue left, could you investigate why this line is necessary:
grid.Columns = new List<GridColumn>() { }; //TODO: remove
Without this line, the columns never change. But we bind the columns property
<Grid DataSourceSettings=”DataSettings” @ref=”grid” DataSource=”dataRecords” Columns=”@columns”></Grid>
So this should actually trigger to set the new columns when the property changed?
I do not understand this (you commented it as removal, may this is a workaround)
grid.Columns = new List<GridColumn>() { }; //TODO: remove
It has side effects.
The columns are changed but you lost the symbols in the header (Sort, Filter etc.)
For example:
<Grid @ref=”grid” DataSource=”dataRecords” Columns=”@columns” Sorting=”@sorting”></Grid>
GridSorting sorting = new GridSorting { Enabled = true };
private void AddColumn()
{GridColumn newColumn = new GridColumn(){ Label = columnsList[i], DataField = columnsList[i], SortOrder = GridColumnSortOrder.Desc };
columns.Add(newColumn);grid.Columns = new List<GridColumn>() { }; //TODO: remove
}
The sort order symbols get lost here (also sort symbols on existing columns)
- This reply was modified 2 years, 11 months ago by TurricanDE.
November 8, 2021 at 4:07 pm #102522TurricanDEParticipantFor a better illustration use this:
GridSorting sorting = new GridSorting { Enabled = true, Mode = GridSortingMode.Many};
November 9, 2021 at 2:52 pm #102526Yavor DashevParticipantHi TurricanDE,
When you set
GridColumn newColumn = new GridColumn(){ Label = columnsList[i], DataField = columnsList[i], SortOrder = GridColumnSortOrder.Desc };
it only sorts the cells intially when they are loaded, however if you want to have the Sorting and Filtering functionalities I have modified the code example from my previous reply:<Grid DataSourceSettings="DataSettings" @ref="grid" DataSource="dataRecords" Columns="@columns" Sorting="@sorting" Filtering="@filtering"></Grid> <div class="options"> <div class="caption">Settings</div> <div class="option"> <Button Disabled="@addColumnBtnDisabled" OnClick="AddColumn">Add Column</Button> </div> <div class="option"> <Button Disabled="@removeLastColumnBtnDisabled" OnClick="RemoveLastColumn">Remove Last Column</Button> </div> <div class="option"> <Button Disabled="@removeFirstColumnBtnDisabled" OnClick="RemoveFirstColumn">Remove First Column</Button> </div> <div class="option"> <Button Disabled="@updateFirstColumnBtnDisabled" OnClick="UpdateFirstColumn">Update First Column Header</Button> </div> </div> } </Example> @code { Grid grid; GridSorting sorting = new GridSorting() { Enabled = true, Mode = GridSortingMode.Many }; GridFiltering filtering = new GridFiltering() { Enabled = true, }; GridDataSourceSettings DataSettings = new GridDataSourceSettings() { DataFields = new List<GridDataSourceSettingsDataField>() { new GridDataSourceSettingsDataField() { Name = "Id", DataType = GridDataSourceSettingsDataFieldDataType.Number }, new GridDataSourceSettingsDataField() { Name = "Area", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "Population_Urban", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "Population_Rural", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "Population_Total", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "GDP_Agriculture", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "GDP_Industry", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "GDP_Services", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "GDP_Total", DataType = GridDataSourceSettingsDataFieldDataType.String } } }; bool addColumnBtnDisabled; bool removeLastColumnBtnDisabled; bool removeFirstColumnBtnDisabled; bool updateFirstColumnBtnDisabled; List<GridColumn> columns = new List<GridColumn>() { new GridColumn() { DataField = "Country", Label = "Country", }, new GridColumn() { DataField = "Area", Label = "Area" }, new GridColumn() { DataField = "Population_Rural", Label = "Population_Rural" }, new GridColumn() { DataField = "Population_Total", Label = "Population_Total" }, new GridColumn() { DataField = "GDP_Total", Label = "GDP_Total" } }; private List<CountryRecord> dataRecords; protected override void OnInitialized() { base.OnInitialized(); dataRecords = dataService.GenerateCountriesData(); } private string[] columnsList = new string[] { "Id", "Country", "Area", "Population_Urban", "Population_Rural", "Population_Total", "GDP_Agriculture", "GDP_Industry", "GDP_Services", "GDP_Total" };
For your other question I will further investigate this behavior.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor DashevSmart UI Team
https://www.htmlelements.com/November 11, 2021 at 2:09 pm #102537TurricanDEParticipantHi there,
Do you have found something about it? Setting the sorting and filter features works fine, but as I mentioned adding/removing new columns
with forcing it with
grid.Columns = new List<GridColumn>() { }
results in loosing sort and filter symbols
November 11, 2021 at 5:41 pm #102539Yavor DashevParticipantHi TurricanDe,
Yes, I confirm this behavior and it happens because when you add the new column the Smart.Blazor.Grid ‘refreshes’ the columns layout in order to add the new columns, although the sorting and filtering functionalities are kept, the icons are removed.
I will add a work item for this case to be evaluated/resolved.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor DashevSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.