Validation Rule Required cause javascript error when validating DropDownList

[Jean-Yves Ceunen]

Hi,

I have the following Grid Column definition:

         <GridColumn Field=@nameof(BackOfficeConfigurationsDto.TypeName) HeaderText="Site Type" Filter="@FilterParams" EditType="EditType.DropDownEdit" ValidationRules="@(new { required=true})" AutoFit="true">

                <EditTemplate>

                    <label>Site Type</label>

                    <SfDropDownList TValue="string" TItem="BackOfficeConfigurationTypesDto" @bind-value="@SelectedBackOfficeType">

                        <DataManager AdaptorInstance="@typeof(BackOfficeTypeAdaptator)" Adaptor="Adaptors.CustomAdaptor"></DataManager>

                        <DropDownListFieldSettings Text="Name" Value="ID"></DropDownListFieldSettings>

                    </SfDropDownList>

                </EditTemplate>

            </GridColumn>

The validation rule generate the following error when validating a new record:

inputs-ec5227.min.js:1 Uncaught TypeError: Cannot read property 'parentElement' of null

    at s.getErrorElement (inputs-ec5227.min.js:1)

    at s.validateRules (inputs-ec5227.min.js:1)

    at s.validate (inputs-ec5227.min.js:1)

    at t.e.editFormValidate (grids-ec5227.min.js:1)

    at t.e.endEdit (grids-ec5227.min.js:1)

    at t.endEdit (grids-ec5227.min.js:1)

    at e.endEditing (grids-ec5227.min.js:1)

    at e.endEdit (grids-ec5227.min.js:1)

    at r.endEdit (grids-ec5227.min.js:1)

    at e.btnClick (grids-ec5227.min.js:1)

Can you help me? Thank you.

Kind regards

[Rahul Narayanasamy]

Hi Jean-Yves, 

Greetings from Syncfusion. 

Query: Validation Rule Required cause javascript error when validating DropDownList 

We have validated your query and we have checked the reported problem by creating a sample based on your requirement. It works fine. We suspect that the cause of the issue is you have missed to provide ID to DropDownList. Please ensure whether you have provided ID property to DropDownList. Find the below code snippets and sample for your reference. 

. . . 

 

<SfGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

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

    <GridColumns> 

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

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150" EditType="EditType.DropDownEdit" ValidationRules="@(new { required=true})"> 

            <EditTemplate> 

                <SfDropDownList ID="CustomerID" @ref="AutoCompletObj" TValue="string" TItem="Order">  //please ensure to provide ID as Field name 

                    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager> 

                    <DropDownListFieldSettings Value="CustomerID"></DropDownListFieldSettings> 

                </SfDropDownList> 

            </EditTemplate> 

 

        </GridColumn> 

        . . . 

   </GridColumns> 

</SfGrid> 

 

 

@code{ 

    SfDropDownList<string, Order> AutoCompletObj; 

    public static List<Order> Orders { get; set; } 

 

    . . . 

   // Implementing custom adaptor by extending the DataAdaptor class 

    public class CustomAdaptor : DataAdaptor 

    { 

        // Performs data Read operation 

        . . . 

   } 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample181189239  

Please get back to us if you need further assistance. 

Regards,
Rahul 

[Jean-Yves Ceunen]

Hi Rahul,

Our problem is solved.

Thank you!

Kind regards

[Rahul Narayanasamy]

Hi Jean-Yves, 

Thanks for the update. 

We are happy to hear that the provided solution resolved your problem. 

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[Kamil Miszczak]

I have the same problem but using SfColorPicker.

My example is following:

<GridColumn Field=@nameof(Status.ColorDisplay)
            ValidationRules="@(new { required = true })">
    <Template>
        @{
            var status = (context as Status);
            
style="background-color: @status.ColorDisplay; width: 20px; height: 20px; border-radius: 2px">

        }
    Template>
    <EditTemplate>
        @{
             var status = (context as Status);
             <SfColorPicker ID="ColorDisplay"
             Value="@status.ColorDisplay" Mode="ColorPickerMode.Palette"/>
        }
    EditTemplate>

js debbuger returns following exception:

Uncaught TypeError: Cannot read property 'parentElement' of null

    at s.getErrorElement (inputs-d2f3cb.min.js:1)

    at s.validateRules (inputs-d2f3cb.min.js:1)

    at s.validate (inputs-d2f3cb.min.js:1)

    at e.editFormValidate (grids-d2f3cb.min.js:1)

    at i.focusOutHandler (grids-d2f3cb.min.js:1)

I notticed that it doesn't matter if I use custome validation in GridColumn or annotation in model:

[Required]
public string ColorDisplay

Everything is allright when validation is disabled.

[Rahul Narayanasamy]

Hi Kamil, 

Greetings from Syncfusion. 

We have validated your query and able to reproduce the reported problem. We have confirmed this as a bug and logged defect report for the same “Script error thows while using ValidationRules with SfColorPicker component in EditTemplate”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming Volume 2 release which is expected to be rolled out by the end of June, 2020. 

   

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   

 

Feedback : https://www.syncfusion.com/feedback/15012/script-error-thows-while-using-validationrules-with-sfcolorpicker-component-in  

 

Please get back to us if you need further assistance.  

 

Regards, 

Rahul