Custom GridColumnMenu

[Joshua Moss]

I am using the Blazor grid component and would like to have custom options in the GridColumnMenu. I found that there are built in options that I can enable/disable, but I want to be able to add my own options to the hamburger menu that would allow me to call my own functions for custom functionality. Is this possible?

Thanks

[svetoslav_borislavov]

Hi,

A custom command cannot be added, but an existing one can be made custom.
For example, you can use ‘columnMenuCustomizeType’ and make it custom. Change the command that it should execute and change its label.
To change the command in JS, just pass a function that will be executed.
Changing the label should be done via ‘messages’ property. ‘messages’ is used for localization, but can be used our case also.
You should change the message for ‘columnMenuCustomizeType’ in the object.
Note that you should add all the messages in order for your grid to have the correct labels.
Here is an example in JS:
https://codepen.io/svetoslavb04/pen/MWZeENJ?editors=1010

Replicating it in Blazor can be a tough task.
The messages will be set easily, but the command cannot.
You can set it via JS in Blazor, but this way a JS function will be executed.
Here is an example in Blazor:
`
@page “/treegrid”
@using System.Text.Json

@inject IJSRuntime JS;

<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%;
}

body {
height: 1000px;
}
</style>
<h1>Filter Panel – DataGrid filtering UI</h1>
<p>
This example shows how to use the DataGrid filtering panel. Click on the Filter button in the Grid
header to open the filtering panel.
</p>
@if (dataRecords == null)
{
<p><em>Loading…</em></p>
}
else
{
<Grid Id=”my-grid” DataSource=”dataRecords” Editing=”@editing” ColumnMenu=”@columnMenu” Messages=”@messages”>
<Columns>
<Column DataField=”Name” Label=”Name”></Column>
</Columns>
</Grid>
}
<script>
window.customCommand = () => {
console.log(‘custom command’)
}

window.setGridColumnMenu = () => {
const grid = document.querySelector(“#my-grid”);

console.log(grid.columnMenu.dataSource.columnMenuCustomizeType)
grid.columnMenu.dataSource.columnMenuCustomizeType.command = customCommand;
}
</script>
@code {

class Human
{
public Human(string name, int age, string gender, string city)
{
this.Name = name;
this.Age = age;
this.Gender = gender;
this.City = city;
}

public string Name { get; set; }
public int Age { get; set; }
public string Gender { get; set; }
public string City { get; set; }

}

Dictionary<string, object> messages = new()
{
{
“en”, new Dictionary<string, object>()
{
{“columnMenuCustomizeType”, “Custom Command” },
//Fill the rest messages…
}
}
};

GridEditing editing = new GridEditing()
{
Enabled = true,
Mode = GridEditingMode.Cell
};

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

private void CustomCommand()
{
}

private List<Human> dataRecords;

protected override void OnInitialized()
{
base.OnInitialized();

dataRecords = new List<Human>();

dataRecords.Add(new Human(“Peter”, 26, “male”, “Sofia”));
dataRecords.Add(new Human(“Johny”, 17, “male”, “Plovdiv”));
dataRecords.Add(new Human(“Ivan”, 32, “male”, “Varna”));
dataRecords.Add(new Human(“Iskra”, 56, “female”, “Burgas”));
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await JS.InvokeVoidAsync(“setGridColumnMenu”);
}
}
}
`

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Joshua Moss]

This allows me to do what I needed. Thanks!

[svetoslav_borislavov]

Hi,

Thanks for the update!
If you need further assistance, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts