Strange colum menu behavior (Blazor)

[TurricanDE]

I set the ColumnMenu property of the grid as follows:

GridColumnMenu columnMenu = new GridColumnMenu()
{
DataSource = new GridColumnMenuDataSource()
{
ColumnMenuItemFilter = new GridCommand() { Visible = true },

}
};

And the appearance property as follows:

GridAppearance appearance = new GridAppearance()
{
ShowColumnFilterButton = true,
AutoShowColumnFilterButton = true,
};

When I choose a filter in the header, the column shows only the filter icon and no hamburger menu.

When you click on the filter icon the column menu is shown

It is also impossible to resize the column then because the colum menu always pops up (the grip size symbol is shown, but if you click on it, the column menu pops up and you cannot resize the column)

 

[Yavor Dashev]

Hi TurricanDE,

We have a demo on how to set the ColumnMenu property for the Grid in Blazor and as far as I tested it I didn’t encounter any issues.

Code example:

@using Smart.Blazor.Demos.Data
@inject RandomDataService dataService

<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>
<Example Name="Grid">
    <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 (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Grid DataSource="dataRecords" Header="@header" ColumnMenu="@columnMenu" Selection="@selection" Grouping="@grouping" 
              Sorting="@sorting" Filtering="@filtering" Editing="@editing" Behavior="@behavior" Layout="@gridLayout">
            <Columns>
                <Column DataField="Id" Label="Id" AllowSort="false" AllowHide="false" ShowDescriptionButton="true" DataType="number" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right"></Column>
                <Column DataField="FirstName" Label="First Name" ShowDescriptionButton="true"></Column>
                <Column DataField="LastName" Label="Last Name" ShowDescriptionButton="true"></Column>
                <Column DataField="ProductName" Label="Product" ShowDescriptionButton="true"></Column>
                <Column DataField="TimeOfPurchase" Label="Purchase Date" DataType="date" Align="HorizontalAlignment.Right" 
                        CellsAlign="HorizontalAlignment.Right" CellsFormat="d" ShowDescriptionButton="true">
                </Column>
                <Column DataField="Quantity" Label="Quantity" DataType="number" Align="HorizontalAlignment.Right" 
                        CellsAlign="HorizontalAlignment.Right" ShowDescriptionButton="true">
                </Column>
                <Column DataField="Price" Label="Unit Price" DataType="number" Align="HorizontalAlignment.Right"
                        CellsAlign="HorizontalAlignment.Right" CellsFormat="c2" ShowDescriptionButton="true">
                </Column>
                <Column DataField="Total" Label="Total" DataType="number" Align="HorizontalAlignment.Right"
                        CellsAlign="HorizontalAlignment.Right" CellsFormat="c2" ShowDescriptionButton="true">
                </Column>
            </Columns>
        </Grid>
    }
</Example>

@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 List<DataRecord> dataRecords;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateData(10);
    }
}

If this doesn’t help you in resolving your issue it will be best to share a complete code example of your use case.

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[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);
}
}

 

 

[Yavor Dashev]

Hi TurricanDe,

Yes, there appears to be some unexpected behavior with the SmartGrid component and the filtering functionalities.

I have added a work item for this use case and we will work to fix it as soon as possible.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts