How to change Grid Popup to Form while editing in Blazor DataGrid?

[Syncfusion Support]

Answer:

To change from Grid Popup to Form, render a form in the place of Grid while selecting the particular record. After changing the values, update the row using UpdateRow method in button click. Find the below code snippet for reference.

@if (IsEdit)

{

<div>

<div>

<div class="form-row">

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

<label for="orderedit">OrderIDlabel>

<SfTextBox @ref="TextBoxOrder" ID="CustomerID" Value="@(SelectedProduct.OrderID.ToString())" Enabled="false">SfTextBox>

div>

div>

<div class="form-row">

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

<label for="customeredit">CustomerIDlabel>

<SfTextBox @ref="TextBox" ID="CustomerID" Value="@(SelectedProduct.CustomerID)">SfTextBox>

div>

div>

. . .

div>

div>

<SfButton @onclick="Save">SaveSfButton>

<SfButton @onclick="Cancel">CancelSfButton>

div>

}

else

{

<div>

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

. . .

SfGrid>

div>

}

@code{

SfTextBox TextBox;

SfTextBox TextBoxOrder;

SfNumericTextBox<double?> Numeric;

SfDropDownList<string, Country> DropdownRef;

public List Orders { get; set; }

SfGrid Grid;

public bool IsEdit { get; set; }

public Order SelectedProduct = new Order();

. . .

public void Save()

{

SelectedProduct.CustomerID = TextBox.Value;

SelectedProduct.Freight = Numeric.Value;

SelectedProduct.ShipCountry = DropdownRef.Value;

IsEdit = false;

}

public void Cancel()

{

IsEdit = false;

}

. . .

public void RowSelectHandler(RowSelectEventArgs args)

{

SelectedProduct = args.Data;

IsEdit = true;

}

}

Find the sample for changing Grid Popup to Form while editing here.