Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #102498
    TurricanDE
    Participant

    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?

     

     

     

     

    #102500
    admin
    Keymaster

    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/

    #102501
    TurricanDE
    Participant

    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?

     

     

    #102504
    admin
    Keymaster

    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/

     

    #102505
    TurricanDE
    Participant

    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.

     

    #102508
    TurricanDE
    Participant

    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

    #102516
    Yavor Dashev
    Participant

    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/

    #102520
    TurricanDE
    Participant

    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, 11 months ago by TurricanDE.
    #102522
    TurricanDE
    Participant

    For a better illustration use this:

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

    #102526
    Yavor Dashev
    Participant

    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/

    #102537
    TurricanDE
    Participant

    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

    #102539
    Yavor Dashev
    Participant

    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/

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