JSON parsing error when special characters are entered into DataGrid dropdown

[Dylan Davenport]

I have an application that is using the Blazor DataGrid component along with the AutoComplete component and whenever a user enters non-alphanumeric characters and submits the form using either the Update button or the Enter key a JSON parsing error is thrown in the console.



We are using the Validator component elsewhere, so the default SyncFusion validation is not being used so I tried creating a custom validator but was not able to get that to work either. Besides that, my colleagues and I have tried various things with no luck. Please see screenshots and attached files, I'd appreciate any assistance you could provide.

Attachment: DataGrid_JSON__Parsing_Error_11222_38c9e956.zip

[Rahul Narayanasamy]

Hi Dylan, 

Greetings from Syncfusion. 

We are currently checking the reported case at our end and we will update the further details on or before January 18, 2022. Until then we appreciate your patience. 

Regards, 

Rahul 

[Rahul Narayanasamy]

Hi Dylan, 

Thanks for your patience. 

The console error occurs due to the typed value being a custom string value being added to component with complex binding, after pressing the enter key. To add a custom value to the complex binding, we need to use the CustomValueSpecifier event. Kindly refer to the below code. 

<EditTemplate> 

                @{ 

                    ServiceAssignment serviceAssignment = (context as ServiceAssignment); 

                    . . . 

                } 

                <SfAutoComplete PopupWidth="320px" 

                                Placeholder="---" 

                                @ref="UicDropDownlistRef" 

                                TItem="Uic" 

                                TValue="Uic" 

                                MinLength="3" 

                                Value="serviceAssignment.Uic" 

                                OnInput="UicCodeChangeHandler" 

                                DataSource="uics" 

                                ValueChanged="uic=>serviceAssignment.Uic = uic ?? serviceAssignment.Uic" 

                                AllowFiltering="true"> 

                    . . . 

                    </AutoCompleteTemplates> 

                    <AutoCompleteEvents TItem="Uic" TValue="Uic" CustomValueSpecifier="@customValue" OnOpen="StateHasChanged" ValueChange=StateHasChanged Filtering="OnUicFilter" /> 

                    <AutoCompleteFieldSettings Text="Title" Value="Code" /> 

                </SfAutoComplete> 

            </EditTemplate> 

 

@code{ 

    . . . 

    private void customValue(CustomValueSpecifierEventArgs<Uic> args) 

    { 

        args.Item = new Uic() { Code = args.Text, Title = args.Text }; 

    } 

    . . . 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/171917/ze/Sample-1411455558  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Dylan Davenport]

When applying your solution, I am able to use the Enter key. My issue now is if a user enters a non-alphanumeric character such as ], I still get the error. I have tried using the custom validator with a Reguar Expression to handle these characters but I cannot get it working.

[Rahul Narayanasamy]

Hi Dylan, 

Thanks for the update. 

Query: When applying your solution, I am able to use the Enter key. My issue now is if a user enters a non-alphanumeric character such as ], I still get the error. 

Based on your shared details we have checked the reported problem. We could not able to reproduce the problem after entering non alphanumeric character([, ]) in the previously provided solution. Find the below sample and video for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/171917/ze/BlazorGrid_Sample-222116611  

Video: https://www.syncfusion.com/downloads/support/forum/171917/ze/Video-798885051  

If you are still facing the problem, then could you please share the below details. It will be helpful to validate and provide a better solution. 

• Reproduce the problem in the provided sample and revert back to us.
• Share a simple reproduceable sample if possible.
• Video demonstration of the problem.

Regards, 

Rahul