RecurrenceEditor in EditTemplate of SfGrid

[gwoo]

Hello, I'm building a recurrence rule with the RecurrenceEditor like this and the Value Changed Event is working for me.

<SfRecurrenceEditor @ref="RecurrenceEditorRef" Value="@RecurrenceValue">

                <RecurrenceEditorEvents OnChange="ValueChanged"></RecurrenceEditorEvents>

 </SfRecurrenceEditor>

Though I need the RecurranceEditor within a Grid with EditMode.Dialog. I put it into an EditTemplate, but this is not working. Seems it cannot set the properties in that scope as I get following exception for every Recurrence Field I change:

System.ArgumentException: The type 'SfRecurrenceEditor' does not contain a public property named 'frequencyValue'. (Parameter 'propertyName')

       <GridColumn Field=@nameof(PlannedPayment.Recurrence) HeaderText="Serie" TextAlign="TextAlign.Right" Width="70" >

           <EditTemplate>

                <SfRecurrenceEditor @ref="RecurrenceEditorRef" Value="@RecurrenceValue">

                     <RecurrenceEditorEvents OnChange="ValueChanged"></RecurrenceEditorEvents>

                </SfRecurrenceEditor>

            </EditTemplate>

        </GridColumn>

Would be great if you can provide a solution for this problem?

Thanks and kind regards!

[gwoo]

Any advice?

[Monisha Saravanan]

Hi Gwoo,

Sorry for the delay.

We could able to reproduce the reported issue while using recurrence editor inside edit template. So instead of using it in edit template we suggest rendering the Recurrence editor inside a Dialog component, so that will be visible when the corresponding row is clicked and you can perform editing inside dialog component.

Kindly refer the attached documentation for your reference.

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/how-to/custom-delete-confirmation-dialog

Also we suggest you to set args.cancel  as true in the action events to cancel the inbuilt editing. By using the below code will prevent the inbuilt edit dialog on performing Edit operation Kindly check the attached code snippet for your reference

 

<SfDialog @ref="Dialog" Width="250px" Visible="false" ShowCloseIcon="true" IsModal="true">

    <DialogEvents Closed="Closed"></DialogEvents>

    <DialogTemplates>

…

    </DialogTemplates>

    <DialogButtons>

        <DialogButton OnClick="@OkClick" Content="OK" IsPrimary="true"></DialogButton>

        <DialogButton OnClick="@CancelClick" Content="Cancel"></DialogButton>

    </DialogButtons>

</SfDialog>

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Delete", "Edit" })" Height="315">

    <GridEvents OnActionBegin="OnActionBegin" RowSelected="RowSelectHandler" TValue="Order"></GridEvents>

    <GridEditSettings AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"></GridEditSettings>

    <GridColumns>

    </GridColumns>

</SfGrid>

 

@code {

    SfGrid<Order> Grid;

    SfDialog Dialog;

    public List<Order> Orders { get; set; }

    public object SelectedData;

    public bool flag = true;

   

    public void OnActionBegin(ActionEventArgs<Order> Args)

    {

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)

        {

            Args.Cancel = true;  //Cancel default Edit action.

            Dialog.Show();

            flag = false;

        }

    }

 

Please let us know if you have any concerns.

Regards,

Monisha

[gwoo]

Thanks a lot for that workaround. Going to try this!

Cheers

[Monisha Saravanan]

Hi Gwoo,

Thanks for the update. Kindly get back to us if you face any difficulties. As always we will be happy to assist you.

[gwoo]

Hi again,

is there any possible fix for using the RecurrenceEditor within the EditTemplate of the grid? I have a Detail form that makes it quite uncomfortable to work with in an explicit dialog component.

thanks and kind regards, Gert

[Monisha Saravanan]

Hi Gwoo,

We suggest you to try the below highlighted solution as a workaround at your end. It will help you to use the SfReccurenceEditor inside edit template. By using the below code will prevent the inbuilt validation. So that we can handle the validation externally if needed. Kindly check the below documentation to handle validation externally.

Reference: Column Validation in Blazor DataGrid Component | Syncfusion

<SfGrid TValue="OrdersDetails" DataSource="GridData"

        Toolbar="@(new List<string>() { "Add", "Edit", "Update", "Cancel" })">

        <GridEditSettings AllowAdding="true" AllowEditing="true" Mode="EditMode.Dialog">

            <Validator>

               <DataAnnotationsValidator></DataAnnotationsValidator>

            </Validator>

        </GridEditSettings>

   </SfGrid>

Please try the above suggested solution and get back to us if you face any difficulties in implementing the above solution or if you have further queries.

Regards,

Monisha