How to open the Blazor DataGrid edit dialog in view mode?

[Syncfusion Support]

Answer:

To display the content of the selected record in the dialog (without edit) by rendering a Model SfDialog on CommandButton Click of the Grid. Render CommandButton in Grid and in its Click event, display a separate model dialog along with the content of record using SfTextBox control with Disabled state. Here is the code snippet for reference.

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

<DialogTemplates>

<Header> @Dialog Header>

<Content>

<div class="form-row">

<div class="form-group col-md-12">

<label for="orderedit">OrderIDlabel>

<SfTextBox Value="@SelectedProduct.OrderID.ToString()" Enabled="false" />

div>

div>

. . . . .

Content>

DialogTemplates>

<DialogButtons>

<DialogButton Content="Close" OnClick="@CloseDialog" />

DialogButtons>

SfDialog>

<SfGrid DataSource="@Orders" AllowPaging="true" @ref="Grid" Height=315>

<GridEvents CommandClicked="OnCommandClicked" TValue="Order">GridEvents>

<GridColumns>

. . . . ..

<GridColumn HeaderText="Manage Records" Width="100">

<GridCommandColumns>

<GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IsPrimary = true , Content = "Details" })">GridCommandColumn>

GridCommandColumns>

GridColumn>

GridColumns>

SfGrid>

@code{

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

SfGrid<Order> Grid;

public Order SelectedProduct = new Order();

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

public string Dialog { get; set; }

private void CloseDialog()

{

this.IsVisible = false;

}

public class Country

{

public string ShipCountry { get; set; }

}

List<Country> Dropdown = new List<Country>();

public void OnCommandClicked(CommandClickEventArgs<Order> args)

{

Dialog = "Showing Details of" + args.RowData.OrderID;

SelectedProduct = args.RowData;

IsVisible = true;

}

Refer sample for opening the Blazor DataGrid edit dialog in view mode here.