Console error regarding GUID values

[Dominick Marciano]

I have a three dropdown lists that are populated with data that uses GUIDs for the ID.  The lists show all the correct values, I can select the correct indexes, etc. however after the initial data is populated in the dropdown, the following Chrome error is shown for each dropdown list:

ejs.interop.min.js:1 Newtonsoft.Json.JsonReaderException: Input string '6878bdf3-fafa-e72c-ea29-4342f90800e4' is not a valid number. Path '', line 1, position 36.

   at Newtonsoft.Json.JsonTextReader.ParseReadNumber(ReadType readType, Char firstChar, Int32 initialPosition)

   at Newtonsoft.Json.JsonTextReader.ParseNumber(ReadType readType)

   at Newtonsoft.Json.JsonTextReader.ParseValue()

   at Newtonsoft.Json.JsonReader.ReadAndMoveToContent()

   at Newtonsoft.Json.JsonReader.ReadForType(JsonContract contract, Boolean hasConverter)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)

   at Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)

   at Newtonsoft.Json.JsonSerializer.Deserialize(JsonReader reader, Type objectType)

   at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)

   at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type)

   at Syncfusion.EJ2.Blazor.BaseComponent.ChangeType(Object value, Type conversionType)

   at Syncfusion.EJ2.Blazor.BaseComponent.UpdateModel(Dictionary`2 obj)

--- End of stack trace from previous location where exception was thrown ---

   at Microsoft.JSInterop.DotNetDispatcher.InvokeSynchronously(String assemblyName, String methodIdentifier, Object targetInstance, String argsJson)

   at Microsoft.JSInterop.DotNetDispatcher.BeginInvoke(String callId, String assemblyName, String methodIdentifier, Int64 dotNetObjectId, String argsJson)

Error: Newtonsoft.Json.JsonReaderException: Input string '6878bdf3-fafa-e72c-ea29-4342f90800e4' is not a valid number. Path '', line 1, position 36.

   at Newtonsoft.Json.JsonTextReader.ParseReadNumber(ReadType readType, Char firstChar, Int32 initialPosition)

   at Newtonsoft.Json.JsonTextReader.ParseNumber(ReadType readType)

   at Newtonsoft.Json.JsonTextReader.ParseValue()

   at Newtonsoft.Json.JsonReader.ReadAndMoveToContent()

   at Newtonsoft.Json.JsonReader.ReadForType(JsonContract contract, Boolean hasConverter)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)

   at Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)

   at Newtonsoft.Json.JsonSerializer.Deserialize(JsonReader reader, Type objectType)

   at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)

   at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type)

   at Syncfusion.EJ2.Blazor.BaseComponent.ChangeType(Object value, Type conversionType)

   at Syncfusion.EJ2.Blazor.BaseComponent.UpdateModel(Dictionary`2 obj)

--- End of stack trace from previous location where exception was thrown ---

   at Microsoft.JSInterop.DotNetDispatcher.InvokeSynchronously(String assemblyName, String methodIdentifier, Object targetInstance, String argsJson)

   at Microsoft.JSInterop.DotNetDispatcher.BeginInvoke(String callId, String assemblyName, String methodIdentifier, Int64 dotNetObjectId, String argsJson)

    at endInvokeDotNetFromJS (https://localhost:44361/_framework/blazor.server.js:8:29602)

    at https://localhost:44361/_framework/blazor.server.js:8:29253

    at new Promise (<anonymous>)

    at e.beginInvokeJSFromDotNet (https://localhost:44361/_framework/blazor.server.js:8:29222)

    at https://localhost:44361/_framework/blazor.server.js:1:19148

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (https://localhost:44361/_framework/blazor.server.js:1:19119)

    at e.processIncomingData (https://localhost:44361/_framework/blazor.server.js:1:17165)

    at e.connection.onreceive (https://localhost:44361/_framework/blazor.server.js:1:10276)

    at WebSocket.i.onmessage (https://localhost:44361/_framework/blazor.server.js:1:37978)

As stated, this doesn't appear to be affecting functionality at this time but it is a concern that there may be some bug lurking that I haven't come across yet.  For reference, here is how one of the dropdown lists is defined:

<EjsDropDownList @ref="ddlProjectTypes" TValue="DropDowns.DropDownData" ID="ddlProjectTypes" Index="@SelectedProjectTypeIndex" CssClass="modal-edit-project-data e-textbox right" DataSource="@DropDowns.ProjectTypes" Placeholder="Select Project Type">

      <DropDownListEvents OnValueSelect="@OnProjectTypeChange" TValue="DropDowns.DropDownData"></DropDownListEvents>

      <DropDownListFieldSettings Text="Text" Value="Id"></DropDownListFieldSettings>

</EjsDropDownList>

Where @SelectedProjectTypeIndex is a number to select the correct item on loading and DropwDownData is defined thus:

public class DropDownData

        {

            public string Id { get; set; }

            public string Text { get; set; }

        }

[Berly Christopher]

Hi Dominick, 

  

  

Greetings from Syncfusion support. 

  

  

From the further analysis of the provided code example, the reported issue caused due to bound the class name for the TValue poperty in the DropDownList Component.  So, we suggest you to bind the data type of Value and Text in the DropDownListFieldSettings to the TValue as mentioned In the below code example to get rid of the reported issue. 

  

  

  <EjsDropDownList TValue="string" ID="ddlProjectTypes" Index="@SelectedProjectTypeIndex" CssClass="modal-edit-project-data e-textbox right" DataSource="ProjectTypes" Placeholder="Select Project Type"> 

        <DropDownListEvents OnValueSelect="OnProjectTypeChange" TValue="string"></DropDownListEvents> 

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

    </EjsDropDownList> 

  

@code { 

public int SelectedProjectTypeIndex { get; set; } = 2; 

public class DropDownData 

{ 

    public string ID { get; set; } 

    public string Text { get; set; } 

} 

  

List<DropDownData> ProjectTypes = new List<DropDownData> { 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "American Football" }, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Badminton" }, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Basketball" }, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Cricket" }, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Football" }, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Golf" }, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Hockey" }, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Rugby"}, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Snooker" }, 

    new DropDownData() { ID= Guid.NewGuid().ToString(), Text= "Tennis"}, 

  }; 

} 

  

  

  

  

Please find the sample from the below link. 

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/146620/ze/DropDownList_146620-972979519  

  

  

To know more about DropDownList component, please refer the below documentation link. 

  

UG Link: https://ej2.syncfusion.com/blazor/documentation/dropdownlist/data-source/#data-source  

  

  

Regards, 

Berly B.C