Reply To: Dynamic columns (Blazor)

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