Blazor Toolbar Event Callback for Complex Components #6623

• ABP Framework version: v8.0.2
• UI Type: Blazor Server
• Database System: EF Core (SQL Server)
• Steps to reproduce the issue:

We built a button dropdown component designed to control visibility of columns on the Blazorise DataGrid.

This component works fine when embedded in the body of the page. We would like to move the button to the Toolbar to keep the look and feel consistent.

We are having trouble figuring out how to access event callbacks from the toolbar contributor.

We try to add the component like this but the event callbacks don't work.

        var arguments = new Dictionary<string, object?>();
        arguments.Add("SelectAllCheckedValue", SelectAllCheckedValue);
        arguments.Add("TestDateCheckedValue", TestDateCheckedValue);
        arguments.Add("AttachmentsCheckedValue", AttachmentsCheckedValue);
        arguments.Add("AttachmentsCheckedValueChanged", AttachmentsCheckedValueChanged);
        Toolbar.AddComponent<SubstanceAbuseTestsDataGridColumnVisibilityComponent>(arguments);

Here is the component referenced on the razor page.

    <DataGridColumnVisibilityComponent @bind-SelectAllCheckedValue=SelectAllCheckedValue
                                       @bind-TestDateCheckedValue=TestDateCheckedValue
                                       @bind-AttachmentsCheckedValue=AttachmentsCheckedValue />

Here is the code behind c#

protected bool TestDateCheckedValue { get; set; }

protected bool AttachmentsCheckedValue { get; set; }

protected bool SelectAllCheckedValue { get; set; }

protected async Task SetColumnVisibilityAsync()
{
    // ToDo bind cookie here
    SelectAllCheckedValue = true;
    TestDateCheckedValue = true;
    AttachmentsCheckedValue = true;
}        protected bool TestDateCheckedValue { get; set; }

protected bool AttachmentsCheckedValue { get; set; }

protected bool SelectAllCheckedValue { get; set; }

protected async Task SetColumnVisibilityAsync()
{
    // ToDo bind cookie here
    SelectAllCheckedValue = true;
    TestDateCheckedValue = true;
    AttachmentsCheckedValue = true;
}

Here is the component.

@page "/DataGridColumnVisibility"

<Dropdown>
    <DropdownToggle Color="Color.Primary">
        <Icon Name="IconName.Eye" /> Field Visibility
    </DropdownToggle>
    <DropdownMenu >
        <DropdownItem ShowCheckbox Checked="SelectAllCheckedValue" CheckedChanged="UpdateSelectAllCheckedValue">Select All</DropdownItem>
        <DropdownDivider />
         <DropdownItem ShowCheckbox Checked="TestDateCheckedValue" CheckedChanged="UpdateTestDateCheckedValue">Test Date</DropdownItem>
         <DropdownItem ShowCheckbox Checked="AttachmentsCheckedValue" CheckedChanged="UpdateAttachmentsCheckedValue">Attachments</DropdownItem>
    </DropdownMenu>
</Dropdown>

 @code {
    [Parameter]
    public bool SelectAllCheckedValue { get; set; }

    [Parameter]
    public EventCallback<bool> SelectAllCheckedValueChanged { get; set; }

    async Task UpdateSelectAllCheckedValue()
    {
        SelectAllCheckedValue = !SelectAllCheckedValue;
        TestDateCheckedValue = SelectAllCheckedValue;
        AttachmentsCheckedValue = SelectAllCheckedValue;

        await SelectAllCheckedValueChanged.InvokeAsync(SelectAllCheckedValue);
        await TestDateCheckedValueChanged.InvokeAsync(TestDateCheckedValue);
        await AttachmentsCheckedValueChanged.InvokeAsync(AttachmentsCheckedValue);
    }


    [Parameter]
    public bool TestDateCheckedValue { get; set; }

    [Parameter]
    public EventCallback<bool> TestDateCheckedValueChanged { get; set; }

    protected async Task UpdateTestDateCheckedValue()
    {
        TestDateCheckedValue = !TestDateCheckedValue;
        await TestDateCheckedValueChanged.InvokeAsync(TestDateCheckedValue);
    }

    [Parameter]
    public bool AttachmentsCheckedValue { get; set; }

    [Parameter]
    public EventCallback<bool> AttachmentsCheckedValueChanged { get; set; }

    protected async Task UpdateAttachmentsCheckedValue()
    {
        AttachmentsCheckedValue = !AttachmentsCheckedValue;
        await AttachmentsCheckedValueChanged.InvokeAsync(AttachmentsCheckedValue);
    }
}

We use this on the Displayable property of the DataGrid column

<DataGridColumn TItem="ExampleDto"
                 Field="TestDate"
                 Displayable=TestDateCheckedValue
                 Editable="true"
                 Caption="@L["TestDate"]">
     <DisplayTemplate>
         @context.TestDate.ToShortDateString()
    </DisplayTemplate>
</DataGridColumn>
    [Parameter]
    public EventCallback<bool> AttachmentsCheckedValueChanged { get; set; }

    protected async Task UpdateAttachmentsCheckedValue()
    {
        AttachmentsCheckedValue = !AttachmentsCheckedValue;
        await AttachmentsCheckedValueChanged.InvokeAsync(AttachmentsCheckedValue);
    }
}