Hello,

I am trying to make a custom grid header with a template and buttons.

I have a div marked for the template but it doesn’t seem to work with the buttons[] function. The buttons seem to be overridden. I saw this thread: https://www.htmlelements.com/forums/topic/customize-toolbar/#post-103322 and I’m trying to implement this, but I am having trouble. I’d like to put the buttons in the template. I am getting errors with the filterButton and querySelector. Any help would be appreciated!

<MudPaper id=”gridHeader”>
<MudToolBar Class=”justify-space-around”>
<div>
<MudButton Class=”smart-grid-header-button” Variant=”Variant.Filled” StartIcon=”@Icons.Material.Filled.Settings” Size=”Size.Small”>Actions</MudButton>
<MudButton id=”filterButton” Class=”smart-grid-header-button” Variant=”Variant.Filled” StartIcon=”@Icons.Material.Filled.Settings” Size=”Size.Small”>Filter</MudButton>
<MudButton id=”groupButton” Class=”smart-grid-header-button” Variant=”Variant.Filled” StartIcon=”@Icons.Material.Filled.Settings” Size=”Size.Small”>Group</MudButton>
<MudButton id=”sortButton” Class=”smart-grid-header-button” Variant=”Variant.Filled” StartIcon=”@Icons.Material.Filled.Settings” Size=”Size.Small”>Sort</MudButton>
<MudButton Class=”smart-grid-header-button” Variant=”Variant.Filled” StartIcon=”@Icons.Material.Filled.AcUnit” Size=”Size.Small” OnClick=”@OpenFreeze”>Freeze</MudButton>
<MudOverlay Visible=”@FreezeOpen” AutoClose=”true” />
<MudPopover Open=”@FreezeOpen” AnchorOrigin=”Origin.BottomCenter” TransformOrigin=”Origin.TopCenter”
Class=”pa-2″>
<MudStack Spacing=”0″>
<MudStack Spacing=”0″ Style=”overflow-y:auto;max-height:250px”>
@foreach (DocumentField field in Document.DocumentFields)
{
<MudCheckBox T=”bool” Size=”@Size.Small” Checked=”@(tempFrozenColumns.Contains(field.FieldName))” Label=”@field.AliasName”
CheckedChanged=”@((value) => FrozenSelectedChanged(value, field.FieldName))” />
}
</MudStack>
<MudStack Row=”true” Class=”justify-space-evenly mt-2″>
<MudButton OnClick=”@(() => ClearFrozen())”>Clear</MudButton>
<MudButton Color=”@Color.Primary” OnClick=”@(() => ApplyFreeze())”>Freeze</MudButton>
</MudStack>
</MudStack>
</MudPopover>
</div>
<MudSlider Size=”Size.Medium” ValueChanged=”@((int value) => Zoom(value))” Variant=”Variant.Filled” Min=”50″ Max=”150″ Step=”10″ TickMarks=”true” Style=”width: 20%;”>Zoom: @zoomPercent</MudSlider>
</MudToolBar>
</MudPaper>

GridHeader header = new GridHeader()
{
Visible = true,
Buttons = new string[] { “search”, “format”, “group”, “filter” },
Template = “#gridHeader”,
OnInit = (toolbar) =>
{
const filterButton = toolbar.querySelector(‘div[smart-id =”sortButton”]’);
filterButton.classList.add(‘custom-button’);
}
};

Thank you!

Ferris DeHart