Validation in SfGrid - EditMode.Dialog
Hi,
I'm using SfGrid with EditMode.Dialog. When adding/editing a record I want to validate (in code) some fields when the Save button is clicked. If any field is not valid the dialog should not close, an errormessage should be displayed in a MessageBox(Dialog).
Could you give an example how this can be done ?
The SfGrid Add Dialog looks like:
Here is my .razor code :
@page "/subscribers"
@using TAAdminPortal.Models
@using Services
@inject ISubscriberService subscriberService;
@inject ICommonDataService commonDataService;
<h3>Subscribers NEW</h3>
<p style="color:red">@ErrorMessage</p>
@if (SubscriberList == null)
{
<p><em>Loading...</em></p>
}
else
{
<SfGrid ID="gridSubscribers" @ref="Grid" DataSource="@SubscriberList" AllowSorting="true" AllowFiltering="true" AllowPaging="false" Height="600" Toolbar="@(new List<string>() { "Add", "Edit", "Delete"})">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" ShowDeleteConfirmDialog="true">
</GridEditSettings>
<GridFilterSettings Mode=FilterBarMode.Immediate ImmediateModeDelay="500"></GridFilterSettings>
<GridColumns>
<GridColumn Field=@nameof(SubscriberDetailsModel.Id) HeaderText="Id" IsPrimaryKey="true" Width="60" AllowEditing="false" AllowAdding="false" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field=@nameof(SubscriberDetailsModel.FirstName) HeaderText="Firstname" Width="80"></GridColumn>
<GridColumn Field=@nameof(SubscriberDetailsModel.LastName) HeaderText="Lastname" Width="80"></GridColumn>
<GridColumn Field=@nameof(SubscriberDetailsModel.SendEmail) HeaderText="Send Email" DisplayAsCheckBox="true" AllowFiltering="false" AllowSorting="false" Width="120" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=@nameof(SubscriberDetailsModel.EmailAddress) HeaderText="Email Address" Width="300"></GridColumn>
<GridColumn Field=@nameof(SubscriberDetailsModel.SendSMS) HeaderText="Send SMS" DisplayAsCheckBox="true" AllowFiltering="false" AllowSorting="false" Width="120" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=@nameof(SubscriberDetailsModel.MobileNumber) HeaderText="Mobile Number" Width="200"></GridColumn>
</GridColumns>
</SfGrid>
<style type="text/css" class="cssStyles">
.e-grid .e-altrow {
background-color: #fafafa;
}
</style>
}
@code {
public List<SubscriberDetailsModel> SubscriberList { get; set; }
public List<LanguageDetailsModel> Languages { get; private set; }
public List<AnnouncementHistoryDetailsModel> Announcements { get; private set; }
public SfGrid<SubscriberDetailsModel> Grid;
private string ErrorMessage { get; set; }
protected override async Task OnInitializedAsync()
{
SubscriberList = await subscriberService.ReadSubsribersAsync();
Languages = await commonDataService.ReadLanguagesAsync();
}
}
Thanks,
Raivo
