Reply To: Strange colum menu behavior (Blazor)

[TurricanDE]

I’m using the current version 10.2.2

Should the example above display the hamburger menu button on the right of a column when you hover it?

I use the example above (change the dataservice to fetch data, but that doesn’t matter). Nothing happens.

When I set a filter in the header for a specific column, then a filter symbol is shown in that column (but I guess there should be

both buttons the filter button and the hamburger menu button?

A click on the filter button opens the column menu and if I try to resize the column, than that triggers to open up the menu again.

and it is impossible to resize the column.

It doesn’t work also in one of your blazor demos (GridColumnMenuPage.razor) for me.

Tested in Edge or Chrome.

My example:

@page “/smartdatagrid”

@using SmartUITest.Data

@inject WeatherForecastService ForecastService

<style>
body,
html,
app {
height: 100%;
}

app {
overflow: auto;
}

.content {
height: calc(100% – 70px);
}
/* This is the CSS used in the demo */
smart-grid {
width: 100%;
height: auto;
}
</style>
<div>
<h1>DataGrid Column menu</h1>
<p>
Move the cursor over a column header and click the “hamburger” menu button to open the Datagrid column menu. With that menu, you can sort, filter, edit column description and name, customize column cells alignment, group by the column. The Column menu can be customized
to fit to your web application’s needs.
</p>

@if (forecasts == null)
{
<p>Loading…</p>
}
else
{
<Grid DataSource=”@forecasts” Header=”@header” ColumnMenu=”@columnMenu” Selection=”@selection” Grouping=”@grouping”
Sorting=”@sorting” Filtering=”@filtering” Editing=”@editing” Behavior=”@behavior” Layout=”@gridLayout”>
<Columns>
<Column DataField=”Date” Label=”Date” DataType=”date” CellsFormat=”dd.MM.yyyy”></Column>
<Column DataField=”TemperatureC” Label=”TemperatureC Name” ShowDescriptionButton=”true”></Column>
<Column DataField=”TemperatureF” Label=”TemperatureF” ShowDescriptionButton=”true”></Column>
<Column DataField=”Summary” Label=”Summary” ShowDescriptionButton=”true”></Column>
</Columns>
</Grid>
}
</div>

@code
{
GridHeader header = new GridHeader()
{
Visible = true
};

GridColumnMenu columnMenu = new GridColumnMenu()
{
DataSource = new GridColumnMenuDataSource()
{
ColumnMenuItemRename = new GridCommand() { Visible = true },
ColumnMenuItemEditDescription = new GridCommand() { Visible = true },
ColumnMenuItemHide = new GridCommand() { Visible = true },
ColumnMenuItemDelete = new GridCommand() { Visible = true }
}
};

GridSelection selection = new GridSelection()
{
Enabled = true,
AllowCellSelection = true,
Mode = GridSelectionMode.Extended
};

GridGrouping grouping = new GridGrouping() { Enabled = true };

GridFiltering filtering = new GridFiltering() { Enabled = true };

GridSorting sorting = new GridSorting()
{
Enabled = true,
Mode = GridSortingMode.Many
};

GridEditing editing = new GridEditing() { Enabled = true };

GridBehavior behavior = new GridBehavior() { ColumnResizeMode = GridResizeMode.GrowAndShrink };

GridLayout gridLayout = new GridLayout() { RowHeight = 50 };

private WeatherForecast[] forecasts;

protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}