Remove e-card-container in kanban

[desmond]

Is it possible to make the last kanban column show only the header, and leave anything below blank? My last column is a New column button, so I don't want to see anything below, including the gray e-card-container. I have attached a kanban photo, I hope anything in the red rectangle can disappear. Below is my kanban column template code:

        <KanbanColumns>

            @foreach (column_name item in TestData)

            {

                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField" AllowAdding="true">

                    <Template>

                        @{

                                <SfTextBox @bind-Value=item.HeaderText ></SfTextBox>

                        }

                    </Template>

                </KanbanColumn>

            }

            @if (@ColumnDynamicChange)

            {

                @foreach (column_name changedItem in DynamicData)

                {

                    <KanbanColumn HeaderText="@changedItem.HeaderText" KeyField="@changedItem.KeyField" Index="@TestData.Count">

                        <Template>

                            @{

                                    <SfTextBox  @bind-Value=changedItem.HeaderText></SfTextBox>

                            }

                        </Template>

                    </KanbanColumn>

                }

                <KanbanColumn HeaderText="Add column" Index="@(TestData.Count+1)">

                    <Template>

                        @{

                                <SfTextBox @ref='textbox' Placeholder="Add Column" Focus="@OnAddColumn"></SfTextBox>

                        }

                    </Template>

                </KanbanColumn>

            }

            else

            {

                <KanbanColumn HeaderText="Add column" Index="@TestData.Count">

                    <Template>

                        @{

                                <SfTextBox @ref='textbox' Placeholder="Add Column" Focus="@OnAddColumn"  AllowDrop="false" AllowDrag="false"></SfTextBox>

                        }

                    </Template>

                </KanbanColumn>

            }

        </KanbanColumns>

Attachment: blazorkanbancardwithcustombordercolor_c03246f6.png

[Kokila Poovendran]

Hi desmond,

By default, the Kanban renders an .e-card-container for every column, even if no cards are present. Since your last column is used only for adding a new column, you can hide the card container specifically for that column while keeping the header visible.

Apply a CSS rule that hides the card container for the target column using its data-key value.

<style>
      
    /* Hide the card container ONLY for the given column key */
    .e-kanban .e-content-cells[data-key="Close"] .e-card-container {
        display: none !important;
    }

</style>

Please let us know if you want to conditionally apply this style or target the column dynamically.

[desmond]

Thanks a lot, after some more debugging, it turns out to be this code that works:

/* Hide the card container ONLY for the given column key */

.e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td[data-key="Close"]{
    display:none !important;
}

[Kokila Poovendran]

Hi desmond,

Thanks for the confirmation and for sharing the updated CSS snippet.

We’re glad you were able to identify a solution that works well for your scenario.