Skip to content

Commit

Permalink
Merge grid-fluent-example-1973 into production (#1991)
Browse files Browse the repository at this point in the history 
* docs(grid): Simplify FluentValidator example

* Update components/grid/editing/validation.md

---------

Co-authored-by: Dimo Dimov <[email protected]>
  • Loading branch information
@github-actions @dimodi
github-actions[bot] and dimodi authored Mar 21, 2024
1 parent bfd611e commit e6fc8da
Showing 1 changed file with 28 additions and 69 deletions.
97 changes: 28 additions & 69 deletions components/grid/editing/validation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,63 +184,50 @@ You can validate the Grid with any validator that uses the `EditContext`. To cha

````CSHTML
@* Use a custom validator in the Grid *@
@using Blazored.FluentValidation
@using FluentValidation
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
<TelerikGrid Data="@GridData"
Pageable="true"
EditMode="@GridEditMode.Inline"
OnCreate="@CreateHandler"
OnUpdate="@UpdateHandler"
Height="500px">
<GridSettings>
<GridValidationSettings>
<ValidatorTemplate>
<FluentValidationValidator Validator=@Validator>
</FluentValidationValidator>
<FluentValidationValidator Validator="@Validator" />
</ValidatorTemplate>
</GridValidationSettings>
</GridSettings>
<GridToolBarTemplate>
<GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" Width="80px" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandColumn Width="240px">
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
private List<SampleData> GridData { get; set; } = new();
private SampleDataValidator Validator = new();
public class SampleDataValidator : AbstractValidator<SampleData>
{
public SampleDataValidator()
{
RuleFor(item => item.Name).NotEmpty().MaximumLength(50);
}
}
void EditHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// prevent opening for edit based on condition
if (item.ID < 3)
{
args.IsCancelled = true;// the general approach for cancelling an event
}
Console.WriteLine("Edit event is fired.");
}
async Task UpdateHandler(GridCommandEventArgs args)
private async Task UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
Expand All @@ -253,20 +240,7 @@ You can validate the Grid with any validator that uses the `EditContext`. To cha
Console.WriteLine("Update event is fired.");
}
async Task DeleteHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operation here through your service
await MyService.Delete(item);
// update the local view-model data with the service data
await GetGridData();
Console.WriteLine("Delete event is fired.");
}
async Task CreateHandler(GridCommandEventArgs args)
private async Task CreateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
Expand All @@ -279,38 +253,24 @@ You can validate the Grid with any validator that uses the `EditContext`. To cha
Console.WriteLine("Create event is fired.");
}
async Task CancelHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// if necessary, perform actual data source operation here through your service
Console.WriteLine("Cancel event is fired.");
}
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
}
public List<SampleData> MyData { get; set; }
async Task GetGridData()
private async Task GetGridData()
{
MyData = await MyService.Read();
GridData = await MyService.Read();
}
protected override async Task OnInitializedAsync()
{
await GetGridData();
}
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; } = string.Empty;
}
// the following static class mimics an actual data service that handles the actual data source
// replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
// The following static class mimics an actual data service.
public static class MyService
{
private static List<SampleData> _data { get; set; } = new List<SampleData>();
Expand All @@ -325,13 +285,13 @@ You can validate the Grid with any validator that uses the `EditContext`. To cha
{
if (_data.Count < 1)
{
for (int i = 1; i < 50; i++)
for (int i = 1; i <= 50; i++)
{
_data.Add(new SampleData()
{
ID = i,
Name = "Name " + i.ToString()
});
{
ID = i,
Name = $"Name {i}"
});
}
}
Expand All @@ -357,5 +317,4 @@ You can validate the Grid with any validator that uses the `EditContext`. To cha

## See Also

* [Grid Editing]({%slug components/grid/editing/overview%})

* [Grid Editing]({%slug components/grid/editing/overview%})

0 comments on commit e6fc8da

Please sign in to comment.