How to pass validation error into own component in GridColumn

[Pavel]

I need to pass red border and validation error to component inside my own component, when i submit save change to row in Grid

I have SfGrid with custom templates in GridColumn

 <GridColumn Field="@nameof(ServisItem.ItemCategoryId)"

             HeaderText="@TextResource.Category"

             Width="200"

             ValidationRules="new ValidationRules { Required = true}">

     <Template>

         @{

             var item = (context as ServisItem);

         }

         <span>@item.ItemCategory?.Name</span>

     </Template>

     <EditTemplate>

         @{

             var item = (context as ServisItem);

         }

         <ItemCategorySelect Field="@nameof(ServisItem.ItemCategoryId)"

                             Value="@item.ItemCategory"

                             Placeholder="@DomainResource.ItemCategory"

                             FloatLabelType="FloatLabelType.Always"

                             ValueChanged="(category) => { item.ItemCategory = category; }" />

     </EditTemplate>

     <FilterTemplate>

         <ItemCategoryFilterSelect ValueChanged="@ItemCategoryValueChanged" />

     </FilterTemplate>

 </GridColumn>



Inside EditTemplate i have own compponent  ItemCategorySelect 

@using System.Linq.Expressions;

@inject AppCache AppCache

<SfComboBox Value="@Value"

            ValueChanged="@ValueChanged"

            ValueExpression="@ValueExpression"

            Placeholder="@Placeholder"

            DataSource="@AppCache.ItemCategories()"

            TItem="ItemCategory"

            TValue="ItemCategory"

            IgnoreCase="true"

            FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

            FloatLabelType="@FloatLabelType"

            ID="@Field" >

    <ComboBoxFieldSettings Text="@nameof(ItemCategory.Name)" />

</SfComboBox>

@code {

    [Parameter]

    public string Placeholder { get; set; }

    [Parameter]

    public string Field { get; set; }

    [Parameter]

    public FloatLabelType FloatLabelType { get; set; }

    [Parameter]

    public Expression<Func<ItemCategory>> ValueExpression { get; set; }

    private ItemCategory _value;

    [Parameter]

    public ItemCategory Value

    {

        get => _value;

        set

        {

            if (!EqualityComparer<ItemCategory>.Default.Equals(value, _value))

            {

                _value = value;

                ValueChanged.InvokeAsync(value);

            }

        }

    }

    [Parameter]

    public EventCallback<ItemCategory> ValueChanged { get; set; }

}

Is it possible to show error sign as in normal text column inside GridColumn?



[Prathap Senthil]

Hi Pavel,

Before proceeding with the reporting problem, we require some additional clarification from your end. Please share the below details to proceed further at our end.

• Could you please specify whether you are encountering this problem during an edit or add operation within the custom component's edit template?
• Could you please share an issue-reproducible sample?
• It would be helpful if you could provide a video demonstration of the issue.
• If possible, kindly share with us your attempts to reproduce the reported issue on the below-mentioned sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible.

Regards,
Prathap S

Attachment: DataGridEditTemplate_d95297a8.zip

[Pavel]

I found solution, but I don't know what is "under the hood".

The problem was than I didn't do two-way binding and manually override ValueChanged event

 <ItemCategorySelect Field="@nameof(ServisItem.ItemCategoryId)"

                             Value="@item.ItemCategory"

                             Placeholder="@DomainResource.ItemCategory"

                             FloatLabelType="FloatLabelType.Always"

                             ValueChanged="(category) => { item.ItemCategory = category; }" />

Right solution was:

 <ItemCategorySelect Field="@nameof(ServisItem.ItemCategoryId)"

                             @bind-Value="@item.ItemCategory"

                             Placeholder="@DomainResource.ItemCategory"

                             FloatLabelType="FloatLabelType.Always"/>

When I did that, SfComboBox was outlined with red borders, when wrong input was passed.

[Prathap Senthil]

This is a  corrected approach, you are using two-way binding with @bind-Value. This means that not only is the value of the SfComboBox bound to item.ItemCategory, but any changes made to item.ItemCategory will also automatically reflect in the SfComboBox, and vice versa. Additionally, when you use two-way binding there are validation errors or constraints on the item.ItemCategory, the SfComboBox component will handle displaying those errors by outlining the input field with red borders or some other visual indicator. This is because the component can now automatically detect the validation state based on the binding.