How to use validation in MaskedTextBox when inside dialog template of Blazor DataGrid?

[Syncfusion Support]

Answer:

We can use validation in MaskedTextBox by providing ID property to SfMaskedTextBox component in Dialog template. Here is the code snippet for your reference,

<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })">

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

<Template>

@{

var Order = (context as OrdersDetails);

<div>

<div class="form-row">

. . .

<div class="form-row">

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

<label class="e-float-text e-label-top">Masked IDlabel>

<SfMaskedTextBox ID="MaskedID" Mask="[phone]" Placeholder='Provide user ID' @bind-Value="@(Order.MaskedID)">SfMaskedTextBox>

div>

div>

div>

}

Template>

GridEditSettings>

<GridColumns>

<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140">GridColumn>

. . .

<GridColumn Field=@nameof(OrdersDetails.MaskedID) HeaderText="MaskedID" Width="150">GridColumn>

GridColumns>

SfGrid>

@code{

. . .

public class OrdersDetails

{

public int? OrderID { get; set; }

[Required(ErrorMessage = "Field should not be empty")]

. . .

[Required(ErrorMessage = "User ID is required")]

public string MaskedID { get; set; }

}

}

. . .

Find the sample for using validation in MaskedTextBox when inside dialog template here.