从对话框返回时在 Syncfusion Blazor Grid 中保持选定状态的按钮
Button maintaining selected state in Syncfusion Blazor Grid when returning from a dialog box
使用 SyncFusion 和 Blazor 制作 Web 应用程序（服务器）。主页有一个网格，工具栏中有创建和编辑按钮。这些按钮调用一个对话框，其中包含创建、编辑和验证记录的表单图钉。当用户关闭对话框时，网格会根据需要更新。
唯一的问题是“创建”或“编辑”按钮仍然处于选中状态，但它们不应该处于选中状态。
返回主页时，我应该可以“取消选择”按钮。我是否必须将它们作为一部分传递才能执行此操作？
主索引页“/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();
}
}
对话框-“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();
}
}
对话框关闭后显示网格的图片....
这是工具栏组件保持选中按钮状态的默认行为。我们 (Syncfusion) 已将此要求视为功能请求“handle depress a toolbar button” 在我们这端可以使用以下 link.
进行跟踪
https://www.syncfusion.com/feedback/20114/control-the-depress-state-of-blazor-toolbar-button
该功能将包含在我们即将发布的任何版本中。在每个发布周期的规划阶段，我们将审查所有开放功能，并根据特定参数（包括产品愿景、技术可行性、客户兴趣及其在组件中的重要性）确定要实施的功能。将优先考虑票数最多的功能请求。
因此，我们请求您在反馈中投票，并通过以上反馈跟踪状态link。感谢您的耐心等待。
使用 SyncFusion 和 Blazor 制作 Web 应用程序（服务器）。主页有一个网格，工具栏中有创建和编辑按钮。这些按钮调用一个对话框，其中包含创建、编辑和验证记录的表单图钉。当用户关闭对话框时，网格会根据需要更新。
唯一的问题是“创建”或“编辑”按钮仍然处于选中状态，但它们不应该处于选中状态。
返回主页时，我应该可以“取消选择”按钮。我是否必须将它们作为一部分传递才能执行此操作？
主索引页“/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();
}
}
对话框-“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();
}
}
对话框关闭后显示网格的图片....
这是工具栏组件保持选中按钮状态的默认行为。我们 (Syncfusion) 已将此要求视为功能请求“handle depress a toolbar button” 在我们这端可以使用以下 link.
进行跟踪https://www.syncfusion.com/feedback/20114/control-the-depress-state-of-blazor-toolbar-button
该功能将包含在我们即将发布的任何版本中。在每个发布周期的规划阶段，我们将审查所有开放功能，并根据特定参数（包括产品愿景、技术可行性、客户兴趣及其在组件中的重要性）确定要实施的功能。将优先考虑票数最多的功能请求。
因此，我们请求您在反馈中投票，并通过以上反馈跟踪状态link。感谢您的耐心等待。