Activities of "dhill"

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

From the last youtube podcast these are the most important features to us.

Bind to User Entities in ABP Suite Most important PDF export support Very important File/Image as a property type Uploads of multiple files on a record

Showing 61 to 62 of 62 entries
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 25, 2025, 11:10