How to hide grid columns based on DashboardLayoutPanel size

[Christoph]

Hi,

how to hide grid column based on DashboardLayoutPanel width ?

Purpose is to hide some column if the panel width is too small and to show more columns if the panel width is wide enough

[Sivakumar ShunmugaSundaram]

Hi Christoph,

Greetings from Syncfusion support.

With the shared details, you have implemented our Grid component inside a Dashboard Layout component, and you need to hide columns in the Grid based on the width of the Dashboard Layout panel. We would like to let you know that initially our Grid component will render based on the available space in the Dashboard Layout panel. When the panel is resized(increased), the Grid will show the remaining columns.

In addition, we have a ShowColumnChooser property in our Grid component, which when set to true allows you to modify the columns in the Grid. This feature will enable you to choose which columns you want to show or hide.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSample-2109427537

Check out the attached sample for your reference.

[Christoph]

thank you for your anwser and the provided example - this only works if you define Width for the columns ( it doesnt work with MinWidth and/or MaxWidth ) which is not ideal. depending on the language used, the length of names, dates and other information can vary greatly. another problem is that the dashboard layout column width is based on the container width - so it vary on each device and makes it much harder to define clean width that work for every device.

we will consider using a fixed width but it would be much better to be working with MinWidth and MaxWidth ( currently, it looks like MinWidth and MaxWidth doesnt have any effect - this might be a bug )

in the end, we would like to define which column should be hidden, like you can do with HideAtMedia but for the container width not window width ( something like: container queries but it is not supported yet^^ )

[Christoph]

Hi,

we could create our own solution by forward the panel SizeX attribute to the grid component and hide/show column based on that.

one improvement we like to do is using the panel width instead of the SizeX value, but we couldnt figure out how this is caculated - could you provide the fomular for that ?

our thoughts were something like "( ( Panel width / column count ) - ( column count - 1 * spacing ) ) * panel size x + ( panel size x - 1 * spacing )"

thanks :)

[LeoLavanya Dhanaraj]

S.No	Query	Solution
1	Dashboard layout column width is based on the container width	Christoph, Our Dashboard Layout component is provided with built-in responsive support, where panels within the layout get adjusted based on their parent element’s dimensions to accommodate any resolution.   The Dashboard Layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one. So that, the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600px or lower resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the MediaQuery property of the component.   Check the below mentioned links to know more about the responsive layout.   https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive
2	MinWidth and MaxWidth doesnt have any effect	The Dashboard Layout is a grid-structured component, which can be split into subsections of equal size known as cells. The panels height and width are calculated based on the cell counts and you can set the cell count values to the sizeX & sizeY properties.   Also, you can enable the MinSizeX, MinSizeY, MaxSizeX and MaxSizeY properties in your sample which is used to specify the panels height/width(minimum/maximum).   Check the below mentioned links to know more about the panel sizing.   https://blazor.syncfusion.com/documentation/dashboard-layout/panels/position-sizing-of-panels   Note : We don’t have a direct property for the height and width of the Dashboard panels
3	Panel width calculation	The width of a Dashboard panel is calculated based on the number of panels in a row, cellSpacing, parent container width, number of columns, panels sizeX value along with the cellAspectRatio.   Check the below mentioned link  to know more about the mentioned properties and details.   https://blazor.syncfusion.com/documentation/dashboard-layout/setting-size-of-cells

Regards,

Leo Lavanya Dhanaraj