Using FluentValidation for validation tooltips in the grid

[Gerald Peng]

Hi There,

We would like to accomplish having the same validation tooltips in the grid as displayed during Syncfusion's own validation system, but using FluentValidation as the validation source. The grid is being used to edit items at the row level using the Edit.Normal setting. We would like the validation tooltips to appear only when invalid data is entered, and to disappear when the data becomes valid. Thanks in advance!

Jerry

[Balamurugan Lakshmanan]

Hi Gerald,

Greeting from Syncfusion Support.

We have created a sample code snippet that displays a tooltip on validation in Grid Using FluentValidation. You can refer to the attached code snippet and sample for your reference.

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

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

        <Validator>

            @{

                ValidatorTemplateContext txt = context as ValidatorTemplateContext;

            }

            <FluentValidator contextnew="@txt" TValidator="CustomerValidator"></FluentValidator>

            <ValidationSummary />

        </Validator>

        <Template>

          ….

        </Template>

    </GridEditSettings>

</SfGrid>

 

Kindly get back to us if you have any concerns.

Regards,

Bala.

Attachment: BlazorApp1_82b19393.zip

[Gerald Peng]

Hi There,

Thanks for your response. I noticed that in the sample provided, an editing Template was used to provide the user with the ability to modify the Freight value. What if I want the user to modify values directly on the grid itself, and not use a template as this would visually take the user away from the grid and may confuse them. 

Also - the solution provided - the validation message does not disappear when the data is corrected, and even after it is corrected and saved, the message appears again when editing the same record. You may want to have a look at that as well.

Thanks in advance

[Balamurugan Lakshmanan]

Hi Gerald,

Thanks for your update.

From your query, we understood that you need to modify values directly on the grid itself, and not use a template .We modify the sample as per your requirement. We have attached the sample file and code snippet for your reference.Kindly refer these attachments to resolve your issues.

@page "/"

 

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Inputs

@using FluentValidation;

@using BlazorApp2.Data;

@using FluentValidation.Validators

@using Microsoft.AspNetCore.Authorization

@using Microsoft.AspNetCore.Components.Authorization

 

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

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

        <Validator>

            <FluentValidator TValidator="CustomerValidator" />

                <ValidationSummary />

        </Validator>

    </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.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" Width="140" TextAlign="@TextAlign.Right" HeaderTextAlign="@TextAlign.Right"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    public List<OrdersDetails> GridData = new List<OrdersDetails>

{

        new OrdersDetails() { OrderID = 10248, CustomerID = "VINET", Freight = 32.38 },

        new OrdersDetails() { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61 },

        new OrdersDetails() { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83},

        new OrdersDetails() { OrderID = 10251, CustomerID = "VICTE", Freight = 41.34 },

        new OrdersDetails() { OrderID = 10252, CustomerID = "SUPRD", Freight = 51.3  },

        new OrdersDetails() { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17 },

        new OrdersDetails() { OrderID = 10254, CustomerID = "CHOPS", Freight = 22.98 },

        new OrdersDetails() { OrderID = 10255, CustomerID = "RICSU", Freight = 148.33 },

        new OrdersDetails() { OrderID = 10256, CustomerID = "WELLI", Freight = 13.97 },

        new OrdersDetails() { OrderID = 10257, CustomerID = "HILAA", Freight = 81.91 }

    };

 

    public class OrdersDetails

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public double? Freight { get; set; }

    }

    public class CustomerValidator : AbstractValidator<OrdersDetails>

    {

        public CustomerValidator()

        {

            RuleFor(p => p.OrderID).NotEmpty().WithMessage("You must enter a ID");

            RuleFor(p => p.CustomerID).MaximumLength(10).WithMessage("Name is Required");

            RuleFor(p => p.Freight).NotEmpty().WithMessage("Freight must be Present");

        }

    }

}

 

<style>

    .form-group.col-md-6 {

        width: 200px;

    }

 

    label.e-float-text {

        position: relative;

        padding-left: 0;

        top: 10%;

    }

</style>

Please get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorApp2_77140d31.zip

[Gerald Peng]

Hi Bala,

Thanks for your response.

I noticed the validation messages are displayed directly above the row being edited. Is there a way to have the validation messages displayed as tooltips immediately below the field with the validation issues, similar to how Syncfusion handles its own validation while still using the FluentValidation method? Thanks Bala.

[Balamurugan Lakshmanan]

Hi Gerald,

 

Thanks for your update.

 

We have analyzed your query and we suggest you use the in-built validation tooltip to show those error messages by using Validator TemplateContext.ShowValidationMessage(fieldname, IsValid, Message)method. We have already discussed this topic in our UG documentation. Kindly refer to the attached document link for your reference.

 

Reference link:  https://blazor.syncfusion.com/documentation/datagrid/column-validation#display-validation-message-using-in-built-tooltip

 

Kindly get back to us if you have any further queries.

 

Regards,

Bala.

[Gerald Peng]

Hi Bala,

I reviewed the link you provided, and cannot locate where you can implement a tooltip-style of validation on the Syncfusion Blazor Grid using FluentValidation. Can you pinpoint where this is located? Thanks.

Jerry

[Balamurugan Lakshmanan]

Hi Gerald,

We sincerely apologize for any inconvenience caused. We don't have an direct UG documentation link for  tooltip-style of validation on the Syncfusion Blazor Grid using FluentValidation. We suggest you use the in-built validation tooltip to show those error messages by using Validator TemplateContext.ShowValidationMessage(fieldname, IsValid, Message)method. 

https://blazor.syncfusion.com/documentation/datagrid/column-validation#display-validation-message-using-in-built-tooltip

Please get back to us if you have further queries.

Regards,

Bala.

[Gerald Peng]

Thanks for trying.

Is there going to be a future implementation of FluentValidation for the Syncfus

[Balamurugan Lakshmanan]

Hi Gerald,

Thanks for your patience.

We have considered your requirement “Tooltip-style of validation on the Grid using FluentValidation” as an uncertain improvement. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. It will be implemented in any of our upcoming releases.

https://www.syncfusion.com/feedback/44700/tooltip-style-of-validation-on-the-grid-using-fluentvalidation

We are closing this ticket for now. You can communicate with us regarding the open features at any time using the above Feature Report page.  

Please let us know if you have any concerns.

Regards,

Bala.