How to hide Grid Columns according to specific widths?

Question

I want to hide some columns of the grid according to a specific width and height of the screen like below.how to do that?

Prathap Senthil · Accepted Answer

Hi Kavindu Gamage,

Greetings from Syncfusion,

Based on your query and requirements, we have prepared a sample using the Media Query component. Here, we have used '@bind-ActiveBreakPoint,' which activates when the screen size is small, allowing you to easily hide the columns. For your reference, we have attached a code snippet and a sample.

@if (activeBreakpoint == "Small") { IsVisible = false; } else { IsVisible = true; }

@code { public List? Orders { get; set; } private string? activeBreakpoint { get; set; } public bool IsVisible { get; set; } SfGrid Grid { get; set; } } Sample: https://blazorplayground.syncfusion.com/embed/rXrfXGAsqyiuZIYm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5 Reference: https://blazor.syncfusion.com/documentation/media-query/break-points https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout#render-adaptive-dialoghttps://blazor.syncfusion.com/documentation/datagrid/adaptive-layout#rendering-an-adaptive-layout-for-smaller-screens-aloneRegards, Prathap Senthil

Kavindu Gamage · Answer

Thank You Prathap.

ieidhe · Answer

nice! bro

Prathap Senthil · Answer

Thanks for
the update,We are happy
to hear that the provided solution was helpful. We are closing the thread now.