EditForm keeps changed data without valid submit

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;  

}



3 Replies

SP Sarveswaran Palani Syncfusion Team December 27, 2023 03:02 AM UTC

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



CM Connie McCoy January 31, 2024 04:52 PM UTC

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.



SP Sarveswaran Palani Syncfusion Team February 7, 2024 03:27 AM UTC

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


Loader.
Up arrow icon