Custom header button in line with CRUD buttons [Label: question & feature]

[borisdj]

How can custom button be added in header in line with CRUD buttons? At the moment I have custom button above the grid but it is more useful and also save space to have it next to CRUD Btn-s.

<div class="row mt-3">
    <div class="col-md-5">
        <button type="button" class="btn btn-primary btn-md" @onclick="() => ButtonClicked()">Some button</button>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <GridComponent T="Order" Grid="@_grid" @ref="_gridComponent" Mode="_mode" Keys="_keys"></GridComponent>
    </div>
</div>

So instead of

This would be optimal

--

And regarding PageSizeChanger I was thinking it would be more practical for it's position to be in footer instead of header, since in footer are also other paging components. Or to have configurable position Header/Footer. Footer option would look like:

[borisdj]

Just to add that I've found AddButtonComponent method on Grid object but it requires TComponent (.razor file) Not sure if function can somehow be inserted here instead of another page.

[twisted89]

Had the same issue, ended up using javascript to move the button into the header.

window.MoveElementToClass = (fromElement, toClass) => {
    var felement = document.getElementById(fromElement);
    var telement = document.getElementsByClassName(toClass);
    if (!felement || !telement) {
        console.warn('MoveElement: element was not found');
        return false;
    }
    telement[0].appendChild(felement);
    return true;
}

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await JsRuntime.InvokeVoidAsync("MoveElementToClass", "SendAllBtn", "grid-header-buttons");

        await base.OnAfterRenderAsync(firstRender);
    }

This is for the main form, you may need to adjust the class for the CRUD one.