Dynamic columns (Blazor)

[TurricanDE]

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?

 

 

 

 

[admin]

Hi,

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 Stoev

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

[TurricanDE]

I 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?

 

 

[admin]

Hi,

I meant the online demo on our website’s blazor page. The demo on Github is not the latest one.

Best regards,
Peter Stoev

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

 

Best regards,
Peter Stoev

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

[TurricanDE]

Another 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.

 

[TurricanDE]

You 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

[Yavor Dashev]

Hi 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 Dashev

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

[TurricanDE]

Thanks 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, 5 months ago by TurricanDE.

[TurricanDE]

For a better illustration use this:

GridSorting sorting = new GridSorting { Enabled = true, Mode = GridSortingMode.Many};

[Yavor Dashev]

Hi 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 Dashev

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

[TurricanDE]

Hi 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

[Yavor Dashev]

Hi 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 Dashev

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

[Author]

Posts