Using Blazor Syncfusion and edit form. I have a sfgrid that is populated from the database. I have a button in one of the columns that opens a sfdialog with an editform that is populated with the data from the grid. Both the edit form and the grid use the same model/class, but have different datasources. When I change any field in the editform and close the dialog without submitting, every datasource using that model/class is changed. I reset/clear the datasource(model) for the edit form, but if I click that button in the grid to reopen the editform, the changed data is there, not the original data. How can I cancel/clear all changes made unless the submit button is clicked?
<SfGrid @ref="MenuGrid" TValue="KioskMenuItem" DataSource="@MenuItems" RowHeight="25" AllowPaging="true" AllowSorting="true" AllowResizing="true" AllowFiltering="true" AllowTextWrap="true" Height="100%" Width="auto">
<GridPageSettings PageSize="30"></GridPageSettings>
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>
<GridTextWrapSettings WrapMode="WrapMode.Header"></GridTextWrapSettings>
<GridColumns>
<GridColumn Width=@SetGrid.StringSmall.Addpx(10)>
<Template>
@{
var Edit = (context as KioskMenuItem);
<div class=row>
<div class="link-color" style="text-align:left"><a role="button" id="btnEdit" @onclick="@(() => OpenEditDialog(Edit))">Edit </a></div>
</div>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.MenuItem_id) IsPrimaryKey="true" HeaderText="ID" Width="@SetGrid.Number.Addpx(-5)" Visible="false"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.ItemName) HeaderText="ItemName" Width="@SetGrid.StringXLarge.Addpx()"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.IconFile) HeaderText="IconFile" Visible="false"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.URI) HeaderText="URI" Visible="false"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.PreCheckURI) HeaderText="PreCheckURI" Visible="false"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.Ordinal) HeaderText="Ordinal" Visible="false"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.StartTime) HeaderText="StartTime" Width="@SetGrid.DateTime.Addpx(10)"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.EndTime) HeaderText="EndTime" Width="@SetGrid.DateTime.Addpx(10)"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.Active) HeaderText="Active" Width="@SetGrid.StringSmall.Addpx(8)"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.SchedInterval) HeaderText="Interval" Width="@SetGrid.Number.Addpx()"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.PromoID) HeaderText="PromoID" Width="@SetGrid.Number.Addpx(-5)"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.SchedEndDate) HeaderText="SchedEndDate" Visible="false"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.OnKiosk) HeaderText="OnKiosk"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.PostURI) HeaderText="PostURI" Visible="false"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.SideBar) HeaderText="SideBar" Visible="false"></GridColumn>
<GridColumn Field=@nameof(KioskMenuItem.Displaytype) HeaderText="DisplayType" Visible="false"></GridColumn>
</GridColumns>
</SfGrid>
<SfDialog Width="700px" ShowCloseIcon="false" IsModal="true" @bind-Visible="@EditDialogisVisible">
<DialogTemplates>
<Header>@EditTitle</Header>
<Content>
<EditForm Model="@editMenuItem" OnValidSubmit="@Save" style="color:black; font-size:14px" id="EditForm">
<div>
<div class="form-row">
<div class="form-group col-md-8">
<SfTextBox ID="ItemName" FloatLabelType="FloatLabelType.Always" Placeholder="Item Name" @bind-Value="@(editMenuItem.ItemName)"></SfTextBox>
</div>
<div class="form-group col-md-4">
<label style="text-align:left; padding-right:5px; font-size:small; padding-bottom:0px; font-weight:100; margin-bottom:0px">Active</label>
<SfDropDownList ID="Active" TValue="string" TItem="Active" @bind-Value="@editMenuItem.Active" DataSource="@ActiveDDL">
<DropDownListFieldSettings Value="isActive" Text="isActive"></DropDownListFieldSettings>
</SfDropDownList>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<SfDateTimePicker ID="StartTime" FloatLabelType="FloatLabelType.Always" Placeholder="StartTime" @bind-Value="@(editMenuItem.StartTime)"></SfDateTimePicker>
</div>
<div class="form-group col-md-4">
<SfDateTimePicker ID="EndTime" FloatLabelType="FloatLabelType.Always" Placeholder="EndTime" @bind-Value="@(editMenuItem.EndTime)"></SfDateTimePicker>
</div>
<div class="form-group col-md-4">
<SfDateTimePicker ID="SchedEndDate" FloatLabelType="FloatLabelType.Always" Placeholder="SchedEndDate" @bind-Value="@(editMenuItem.SchedEndDate)"></SfDateTimePicker>
</div>
</div>
</div>
<div class="form-row" style="padding-top:15px;text-align:center">
<button class="button" type="submit" style="text-align:center">UPDATE</button>
</div>
</EditForm>
</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="Cancel" OnClick="@CloseEditDialog" />
</DialogButtons>
</SfDialog>
@code {
public bool EditDialogisVisible { get; set; } = false;
protected IList<KioskMenuItem> MenuItems { get; set; }
protected override async Task OnParametersSetAsync()
{
await GetData();
}
protected async Task GetData()
{
MenuItems = await API.GetList<KioskMenuItem>("KioskAdmin", $"GetMenuItems");
}
KioskMenuItem editMenuItem = new KioskMenuItem();
public void OpenEditDialog(KioskMenuItem Edit) --after closing dialog and reopening this is no longer original data. It's holding the changed data. When I assign values to the "editMenuItem" model below, the data is incorrect. I need it to be the original data pulled from the database.
{
editMenuItem = new KioskMenuItem();
EditTitle = "Editing " + Edit.ItemName;
menuitemid = Edit.MenuItem_id;
editMenuItem = MenuItems.Where(m => m.MenuItem_id == menuitemid).FirstOrDefault();
this.EditDialogisVisible = true;
}
public async Task CloseEditDialog()
{
editMenuItem = new KioskMenuItem();
this.EditDialogisVisible = false;
}
Hi Connie,
Greetings from Syncfusion support.
Based on your query, it appears that you're attempting to edit a respective
column using a Dialog component and an Edit Form within the column Template.
However, this approach might not be the most suitable method for template
editing within the grid. Instead, we recommend utilizing the inbuilt dialog
template available in GridEditSettings to customize the default behavior for
dialog editing. We suggest using this method for your dialog editing
requirements. For more detailed guidance, please refer to the attached
documentation link.
Reference: https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template
If you’re facing any issues in this method, please get back to us.
Regards,
Sarvesh
I am customizing the dialog template based on the user. Not every person has access to edit all fields. I am using the dialog component with edit form to allow the customization.
Hi Connie,
Based on your query, it appears that you are utilizing a
dialog component with an edit form to customize input fields based on user
preferences. We want to inform you that we have built-in support for
customizing the dialog template according to your requirements. Depending on
the field, you can customize the dialogue within the template property of
GridEditSettings. We have already discussed about this topic in our UG
documentation, kindly refer the attached UG link for your reference.
Reference: https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template
If still you’re facing some issues in this, kindly share the exact requirement
with grid code snippet to us. Based on that, we’ll validate and provide precise
solution ASAP from our end.
Regards,
Sarvesh