IvanJosipovic / BlazorTable

Blazor Table Component with Sorting, Paging and Filtering
https://BlazorTable.netlify.app
MIT License
540 stars 109 forks source link

[BUG] When using inline conditionals in Template, the Column is duplicated when rendered #390

Open Clive321A opened 2 years ago

Clive321A commented 2 years ago

Describe the bug If I use @Table.IsEditMode in a template, and toggle between edit mode , the Column gets replicated multiple times on screen

To Reproduce

@using BlazorTable

<button class="btn btn-primary" style="padding-bottom:5px" vtitle="Edit" @onclick="@((x) => ToggleEdit())">Edit</button>

<Table TableClass="table table-light table-striped table-bordered table-hover table-responsive"
           TableItem="TestAvailableCustomData"
           Items="data"
           @ref="Table"
           PageSize="30">
        @if (Table.IsEditMode)
        {
                <Column Width="4%" TableItem="TestAvailableCustomData" Title="Delete">
                    <EditTemplate>                   
                    <span style="display: inline-block; margin: 1px;">
                        <button style="background-color: #f44336" class="btn btn-primary" ><span class="oi oi-trash"></span></button>
                    </span>                   
                    </EditTemplate>
            </Column>
        }
        <Column TableItem="TestAvailableCustomData" Title="For" Field="@(x => x.Key)" Sortable="true" Width="10%" >
            <EditTemplate>
                <input @bind="@context.Key" class="form-control form-control-sm" />
            </EditTemplate>
        </Column>
</Table>

@code {

   private void ToggleEdit()
    {

        Table.ToggleEditMode();
    }
    private TestAvailableCustomData[] data;
    private ITable<TestAvailableCustomData> Table;

  protected override void OnInitialized()
    {
        data = new TestAvailableCustomData[]
        {
            new TestAvailableCustomData()
            {
                Key= "Key1"
            }
        };
    }

    public class TestAvailableCustomData
    {
        public string Key { get; set; }

    }
}

Expected behavior The Delete button is only rendered once.

Mcklmo commented 1 year ago

I have a similar problem. Everytime i use hot reload instead of rebuild, columns are duplicated. i also use the EditTemplate tag on each column.

The fix for me is jsut to rebuild instead of hot reaload, but i image it's a problem if you need to interact with the page and it produces the bug thereof.