Hide columns in grid rows

[George]

When a user makes a selection in a dropdown in the first row of a Blazor Grid I want to be able to hide the same column in all the remaining rows to prevent them from making selections in those dropdowns. Is this possible?

 

[Hristian Stefanov]

Hi George,

Could you please provide a bit more detail about your scenario? From what I understand, you have a DropDownList in each column that displays a list of all grid columns, and you'd like each selection to exclude the current column from the list—is that correct?

If possible, sharing a runnable sample with some dummy data that reflects your current setup would be very helpful in understanding your goal more clearly.

I look forward to your response with more details.

Best,

Hristian

[George]

Hi Hristian,

What I am attempting to do is in the grid have a dropdown that will appear in the first row for the user to select and all remaining rows have that column that has the dropdown not be visible. I have provided a snapshot below of the column that will have the dropdown.

Thanks,

George

 

[Hristian Stefanov]

Hi George,

Thank you for sharing the additional details.

The Telerik Blazor Grid does not directly support this scenario, as column visibility is applied globally to the entire grid rather than on a per-row basis. This means you cannot hide a column for only certain rows — it must be either visible or hidden for all rows.

However, you can achieve a similar result by customizing the cell content with a GridTemplate. Inside the template, you can conditionally render the dropdown only for the first row and render nothing (or a placeholder) for the remaining rows. The column will still be visible, but the dropdown will only appear in the first row.

<TelerikGrid Data="@GridData" Height="400px">
    <GridColumns>
        <GridColumn Title="Select Option">
            <Template Context="context">
                @if (GridData.IndexOf(context as MyCustomModel) == 0)
                {
                    <TelerikDropDownList Data="@DropdownOptions" @bind-Value="((MyCustomModel)context).SelectedOption" />
                }
                else
                {
                    <span></span>
                }
            </Template>
        </GridColumn>
        <GridColumn Field="Name" Title="Name" />
        <GridColumn Field="Value" Title="Value" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<string> DropdownOptions { get; set; } = new() { "Option 1", "Option 2", "Option 3" };
    
    private List<MyCustomModel> GridData { get; set; } = new List<MyCustomModel>
    {
        new MyCustomModel { Name = "A", Value = 1 },
        new MyCustomModel { Name = "B", Value = 2 },
        new MyCustomModel { Name = "C", Value = 3 }
    };

    public class MyCustomModel
    {
        public string Name { get; set; }
        public int Value { get; set; }
        public string? SelectedOption { get; set; }
    }
}

With this approach, only the first row will contain the dropdown, while all other rows will display an empty cell in that column. If your goal is to completely hide the column for other rows, this is not currently possible due to the Telerik Blazor Grid’s architecture.

Best,

Hristian