Disable row based on property

[Preveen]

Hi,

I have a grid that has a drop down field where the user can select from 3 values (A, B, C).

How do I enable this feature:

• When the user selects option C;
• A dialog should appear asking the user for a confirmation;
• If the user clicks 'Yes';
• Disable editing for that row;

Is this possible?

Thanks in advance.

Kind regards,

Preveen

[Vignesh Natarajan]

Hi Preveen,  

Thanks for contacting Syncfusion support.  

Query: “Disable Row based on a property” 

Yes, we can disable a record from editing based on a property in record using OnActionBegin event. But we have analyzed your query and we are quite unclear about your requirement, so kindly share the following details.  

1. Kindly confirm whether the dropdownlist control is rendered outside the Grid or inside the Grid column?
2. If the DropDownList control is rendered in Grid, how it is render (i.e.) render in Grid column using Column template or while editing a record.
3. If the dropdownlist is rendered while editing a record, then do you want to cancel the editing and cancel the changes?
4. Share more details about your requirement.

Above requested details will be helpful for us to validate the reported query at our end and provide solution as early as possible.  

Regards, 

Vignesh Natarajan 

[Preveen]

Hi,

The drop down is part of the grid column.

The data source is from a local List<string>

I want a confirmation to appear when the user selects a certain value from the drop down and hits the save/update button. At the same time the entire row should be locked from editing so the user can't change the data in the row.

[Vignesh Natarajan]

Hi Preveen,  

 

As per your requirement we have prepared a sample to show a confirmation dialog to cancel the editing while selecting a C option from DropDownList control in Grid edit mode. We have achieve your requirement using EditTemplate feature of Grid to render DropDownList with ValueChange event to cancel the edit operation in Grid using CloseEdit() method.  

 

Refer the below code example.  

 

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

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

    <GridColumns> 

        <GridColumn Field=@nameof(Order.CanEdit) HeaderText="Customer Name" Width="150"> 

            <EditTemplate> 

                <SfDropDownList ID="CanEdit" TItem="string" TValue="string" @bind-Value="@((context as Order).CanEdit)" DataSource="@Cust"> 

                    <DropDownListEvents ValueChange="OnChange" TItem="string" TValue="string"></DropDownListEvents> 

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

  

<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogTemplates> 

        <Content> Are you sure you want to disable the editing </Content> 

    </DialogTemplates> 

    <DialogButtons> 

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

    </DialogButtons> 

</SfDialog> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

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

    public List<string> Cust = new List<string>() { "A", "B", "C" }; 

    private void CloseDialog() 

    { 

        this.IsVisible = false; // to clse the confirmation dialog.  

        Grid.CloseEdit(); // to cancel the editing in Grid  

    } 

    public void OnChange(ChangeEventArgs<string, string> Args) 

    { 

        if(Args.Value == "C") 

        { 

            IsVisible = true; // to show the confirmation dialog. 

        } 

    } 

    private bool IsVisible { get; set; } = false; 

    

Kindly download the sample prepared using above solution from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159730/ze/DataGrid-885133658  

 

Refer our UG and API documentation for your reference 

  

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CloseEdit  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

 

 

[Preveen]

Hi,

I don't want the dialog to appear when the user chooses C.

I have the grid's mode set to: EditMode.Dialog

When the user click's on the Save button, that's when the dialog should appear (assuming the user chose option C)

Also, in the sample code the row's editing is not disabled, I can still edit after I choose option C.

[Renjith Singh Rajendran]

Hi Preveen, 

Thanks for your update. 

Based on your scenario, we suggest you to use OnActionBegin event of Grid. In this event handler, based on the CanEdit and RequestType as BeginEdit we suggest you to disable editing using args.Cancel. And based on RequestType as Save enable the visibility for Dialog. We are attaching a modified sample for your convenience, please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid-1068362397 

 

Please refer the codes below, 

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

 

public void OnActionBegin(ActionEventArgs<Order> args) 

{ 

    if(args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit) && args.Data.CanEdit == "C") 

    { 

        args.Cancel = true; 

    } 

    if(args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save) && args.Data.CanEdit == "C") 

    { 

        IsVisible = true; 

    } 

} 

Reference : https://blazor.syncfusion.com/documentation/datagrid/events/#onactionbegin 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Preveen]

Hi,

How do I set the CanEdit property to "C" only if the user clicks on the "YES" button of the dialog.

If they close the dialog, the property shouldn't be set. Only if they hit the YES button should the property be set.

[Vignesh Natarajan]

Hi Preveen,  

 

Query:” How do I set the CanEdit property to "C" only if the user clicks on the "YES" button of the dialog.” 

 

We have achieved your requirement to disable the record by changing the CanEdit value to C once the edit operation is completed and Yes button is clicked from a dialog. Please find the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159730/ze/DataGrid1629698991  

 

We have used FooterTemplate of GridEditSettings to customize the actions needs to be performed once dialog is saved. Refer our API documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/editing/#customize-the-edit-dialog  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CloseEdit  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEdit  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Preveen]

Hi,

Thanks for the reply.

I'm attaching a video with the issue.

When 'Save' is clicked the value is already saved.

So regardless if I click 'Yes' or 'No' the C value is saved and I can no longer edit the record.

Attachment: 20201124_220327_a37a52f3.7z

[Vignesh Natarajan]

Hi Preveen,  

 

Thanks for the update. 

 

Query: “So regardless if I click 'Yes' or 'No' the C value is saved and I can no longer edit the record.” 

  

We have modified the sample to update the changes only on clicking the Yes button in new dialog. Refer the below code example for your reference. 

 

public void Save() 

   { 

       Grid.CloseEdit(); // to close the editform 

       IsVisible = true; 

   } 

 

private void CloseDialog(string val)    {        this.IsVisible = false; // to clse the confirmation dialog.         if (val == "Yes")        {            CurrentEditedRecd.CanEdit = "C";            Grid.UpdateRow(0, CurrentEditedRecd); // to update the current edited records, value        }     }    public void OnActionBegin(ActionEventArgs<Order> args)    {        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit) && args.Data.CanEdit == "C")        {            args.Cancel = true;        }        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save) || args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Cancel))        {            CurrentEditedRecd = args.Data;        }    }

 

 

Please find the modified sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159730/ze/DataGrid-938606184  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

[Preveen]

Hi,

When I run the latest example, even if I choose A or B, the confirmation dialog is still displayed. Pressing 'Yes' causes the 'C' value to be saved in the row.

Can you confirm if you also get this output?

[Vignesh Natarajan]

Hi Preveen,  

 

Sorry for the inconvenience caused.  

 

Query: “Can you confirm if you also get this output?” 

 

Yes. We are able to reproduce the reported behavior at our end also. Now we have prevented confirmation dialog from showing while selecting a A or B option from dropdownlist. Refer the below code example.  

 

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

. .  

    <GridColumns> 

        <GridColumn Field=@nameof(Order.CanEdit) HeaderText="Customer Name" Width="150"> 

            <EditTemplate> 

                <SfDropDownList @ref="DDL" ID="CanEdit" TItem="string" TValue="string" @bind-Value="@((context as Order).CanEdit)" DataSource="@Cust"> 

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

….  .  

    </GridColumns> 

</SfGrid> 

   

@code{ 

    SfGrid<Order> Grid { get; set; } 

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

    public Order CurrentEditedRecd { get; set; } 

    SfDropDownList<string, string> DDL { get; set; } 

    public List<string> Cust = new List<string>() { "A", "B", "C" }; 

    public void Close() 

    { 

        Grid.CloseEdit(); // to cancel the editing 

    } 

    public void Save() 

    { 

        if (DDL.Value == "C") 

        { 

            Grid.CloseEdit(); // to close the edit form 

            IsVisible = true; // to display the confirmation dialog 

        } 

        else 

        { 

            Grid.EndEdit(); //  to save the changes in grid when value is A or B 

        } 

    } 

 

  

Now,  selecting a value A or B will not display confirmation dialog and values will be saved directly in Grid. When C value is chosen and Save button is clicked. Confirmation dialog will be shown and based on selected value. Values will be updated.  

 

Kindly downloaded the updated sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159730/ze/DataGrid-1090105813  

 

Please get back to us with more details if you have further queries.  

 

Regards, 

Vignesh Natarajan