Grid custom add/edit template

[Francois]

Hi,

What I want to do:

I’m working on Datagrid with Blazor WebAssembly.

I want to show (or hide) some fields only in add dialog or in edit dialog.

The solution I implemented:

I used two booleans (IsActionAdd or IsActionEdit) to know if the add or the edit is launched.

These booleans are set by the OnActionBegin event.

These Booleans are used by Visible property of GridColumn to show (or hide) a field.

I attached an example page. The field Order.OrderDate can be filled in add only. The field Order.Freight can be filled in edit only.

Solution I didn’t use:

The solution proposed in the documentation is to use a GridEditSettings template.

I didn’t use it because I prefer to use autogenerated edit templates (less code to write).

My questions:

1) Is the implemented solution correct? Do you think there is a better way to achieve my goal?

2) With the implemented solution, I have the following problem:

When I click on the grid edit button, I have the dialog I was expecting. The field Order.Freight is editable.

When I double click on a line to edit it, I don’t have the dialog I was expecting. The field Order.Freight is not editable.

In fact, when using edit button, there is a refresh that happens. But when using double click to edit, the refresh doesn’t happen.

I joined screen print to show the problem.

How can I fix that? Is it a bug?

Thanks for your help.

Best regards.

François

Attachment: CustomAddEditDialog_29f66832.zip

[Renjith Singh Rajendran]

Hi Francois, 

Greetings from Syncfusion support. 

We suggest you to use the ShowColumnsAsync and  HideColumnsAsync methods to programmatically hide or show columns in Grid, instead of using Visible property.  

Reference : https://blazor.syncfusion.com/documentation/datagrid/columns#showhide-columns-by-external-button 

 

We are also attaching a modified sample for your convenience,  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-1758797048 

 

Please refer the codes below, 

 

 

<GridColumn Field=@nameof(Order.OrderDate) ... Visible="false" /><GridColumn Field=@nameof(Order.Freight) ... Visible="false" />

 

public string[] IsActionEdit = new string[] { "Freight" }; 

public string[] IsActionAdd = new string[] { "Order Date" }; 

public string[] HideBoth = new string[] { "Order Date", "Freight" }; 

private async Task OnActionBegin(ActionEventArgs<Order> args) 

{ 

    switch (args.RequestType) 

    { 

        case Syncfusion.Blazor.Grids.Action.BeginEdit: 

            await Grid.ShowColumnsAsync(IsActionEdit); 

            break; 

 

        case Syncfusion.Blazor.Grids.Action.Add: 

            await Grid.ShowColumnsAsync(IsActionAdd); 

            break; 

 

        case Syncfusion.Blazor.Grids.Action.Save: 

        case Syncfusion.Blazor.Grids.Action.Cancel: 

            await Grid.HideColumnsAsync(HideBoth); 

            break; 

    } 

} 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith R