Button maintaining selected state in Syncfusion Blazor Grid when returning from a dialog box

Question

Using SyncFusion and Blazor to make a web app (server). Main page has a grid with create and edit buttons in a toolbar. These buttons call a dialog box with a form pin which the record is created, edited, and validated. When the user closes the dialog box the grid is updated if need be.

The only problem is that the Create or Edit buttons are still selected, and they should not be.

When returning to the main page I should be able to "unselect" the button(s). Do I have to pass them as a part to do this?

Main Index Page "/My_Templates"

@page "/My_Templates"
@using WireDesk.Models
@using Microsoft.Extensions.Logging
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Navigations

@inject IWireDeskService WireDeskService
@inject ILogger<My_Templates> Logger

<SfGrid @ref="Grid" DataSource="@Templates" AllowSorting="true" Toolbar="ToolbarItems">
    <GridEvents OnToolbarClick="OnClicked" TValue="Template"></GridEvents>
    <GridEditSettings AllowDeleting="true" Dialog="DialogParams"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Template.TemplateId) HeaderText="Template ID" IsPrimaryKey="true" Visible="false"></GridColumn>
        <GridColumn Field=@nameof(Template.Owner) HeaderText="Owner" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Template.Users) HeaderText="Users" TextAlign="TextAlign.Left" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Template.Description) HeaderText="Description" TextAlign="TextAlign.Left" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Template.FundType) HeaderText="Fund Type" TextAlign="TextAlign.Left" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

<ReusableDialog @ref="dialog" DataChanged="@DataChanged"></ReusableDialog>
    @code{

            //Instantiate toolbar and toolbar items
        private List<Object> ToolbarItems = new List<Object>()
        {new ItemModel() { CssClass= "e-info", Text = "Create New Template", TooltipText = "Add", PrefixIcon = "e-icons e-update", Id = "Add", },
        new ItemModel() { CssClass= "e-info", Text = "Edit Template", TooltipText = "Edit", PrefixIcon = "e-icons e-update", Id = "Edit"}};

        SfGrid<Template> Grid { get; set; }
        ReusableDialog dialog;
        private DialogSettings DialogParams = new DialogSettings { MinHeight = "800px", Width = "1200px" };
        public IEnumerable<Template> Templates { get; set; }

        protected override void OnInitialized()
        {
            Templates = WireDeskService.GetTemplates();
        }

        public async Task OnClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args)
        {
            //Create Record
            if (Args.Item.Id == "Add")
            {
                Args.Cancel = true; //Prevent the default action
                dialog.Mode = "Create";
                dialog.Title = "This is the Add Title";
                dialog.Text = "This is the Add text";
                dialog.template = new Template();
                dialog.OpenDialog();
            }

            //Edit Records
            if (Args.Item.Id == "Edit")
            {
                Args.Cancel = true; //Prevent the default action
                var selected = await Grid.GetSelectedRecordsAsync();
                if (selected.Count > 0)
                {
                    //dialog.Grid = Grid;
                    dialog.Mode = "Update";
                    dialog.Title = "This is the Edited Title";
                    dialog.Text = "This is the Edited Text";
                    dialog.template = selected[0];
                    dialog.OpenDialog();
                }
            }
        }

        private async void DataChanged()
        {
            Templates = WireDeskService.GetTemplates().ToList();
            StateHasChanged();
        }
    }

Dialog Box - "ReusableDialogBox"

@page "/reusable-dialog"
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Inputs
@using WireDesk.Models
@using Microsoft.Extensions.Logging
@using Microsoft.AspNetCore.Components.Forms
@inject IWireDeskService WireDeskService
@inject ILogger<ReusableDialog> Logger

<div id="DialogTarget">
    <SfDialog Target="#DialogTarget" Width="1200px" IsModal="true" ShowCloseIcon="true" @bind-Visible="@IsOpen">
        <DialogTemplates>
            <Header><h4 class="modal-title">template.templateID</h4></Header>
            <Content>
                <EditForm id="myForm" EditContext="editContext">
                    <DataAnnotationsValidator></DataAnnotationsValidator>
                    <label for="Owner" class="e-small-label2">Owner</label>
                    <SfTextBox id="Owner" @bind-Value="template.Owner" class="form-control" placeholder="Enter the Template Owner" />
                    <ValidationMessage For="@(() => template.Owner)"></ValidationMessage>
                    <label for="Users" class="e-small-label2">Users</label>
                    <SfTextBox id="Users" @bind-Value="template.Users" class="form-control" placeholder="Enter the Template Users" />
                    <ValidationMessage For="@(() => template.Users)"></ValidationMessage>
                    <label for="Description" class="e-small-label2">Description</label>
                    <SfTextBox @bind-Value="template.Description" class="form-control" rows="4" placeholder="Enter the Description" />
                    <ValidationMessage For="@(() => template.Description)"></ValidationMessage>
                    <label for="FundType" class="e-small-label2">Fund Type</label>
                    <InputRadioGroup @bind-Value="template.FundType" class="form-control">
                        <p></p>
                        @foreach (var option in rdOptions)
                        {
                            <InputRadio Value="option" /> @option <br />
                        }
                    </InputRadioGroup>
                    <ValidationMessage For="@(() => template.FundType)"></ValidationMessage>
                </EditForm>
            </Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="Save" IsPrimary="true" OnClick="SaveClick" />
            <DialogButton Content="Cancel" IsPrimary="false" OnClick="@CancelClick" />
        </DialogButtons>
    </SfDialog>
</div>

@code{

    //Parameters
    [Parameter]
    public System.Action DataChanged { get; set; }
    [Parameter]
    public String Mode { get; set; }
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string Text { get; set; }
    [Parameter]
    public Template template { get; set; } = new Template();
    [Parameter]
    public bool IsOpen { get; set; } = false;
    [Parameter]
    public string IsClosed { get; set; }

    List<string> rdOptions = new List<string> { " Fund Type 1", " Fund Type 2", " Fund Type 3" };
    private ValidationMessageStore messageStore;
    EditContext editContext;

    //Initialized
    protected override void OnInitialized()
    {
        editContext = new EditContext(template);
        messageStore = new(editContext);
    }

    protected override void OnParametersSet()
    {
        editContext = new EditContext(template);
    }

    public void OpenDialog()
    {
        IsOpen = true;
        this.StateHasChanged();
    }

    private void SaveClick()
    {
        if (editContext.Validate())
        {
            Logger.LogInformation("Validation Succeeded");
            if (Mode == "Create")
            {
                this.template.UserName = "Bryan Schmiedeler";
                WireDeskService.InsertTemplate(template);
                this.DataChanged();
                this.IsOpen = false;
                Logger.LogInformation("Create Validation Passed");

            }
            else if (Mode == "Update")
            {
                this.template.UserName = "Bryan Schmiedeler";
                WireDeskService.UpdateTemplate(template.TemplateId, template);
                this.DataChanged();
                this.IsOpen = false;
                this.IsClosed = "OK Clicked";
                Logger.LogInformation("Update Validation Passed");
            }
        }
        else
        {
            IsOpen = true;
            Logger.LogInformation("Validation Failed");
        }
    }

    public void CancelClick()

    {
        IsOpen = false;
        this.StateHasChanged();
    }
}

Picture showing grid after dialog box is closed....

Answer 1

This is default behavior of Toolbar component to maintain the selected button state. We (Syncfusion) have considered this requirement as feature request “handle depress a toolbar button” at our end which can be tracked using the following link.

https://www.syncfusion.com/feedback/20114/control-the-depress-state-of-blazor-toolbar-button

The feature will be included in any of our upcoming releases. At the planning stage for every release cycle, we will review all the open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest and its importance in component. Priority will be given to feature request which has maximum number of votes.

So, we request you to cast the vote in the feedback and keep track of the status through the above feedback link. Till then we appreciate your patience.