Null Reference Error while trying to populate DropDownList from ODataV4 API

[David Adler]

I am using SyncFusion.Blazor v18.1.0.43

I am trying to populate a DropDownList with remote data from my ODataV4 API. When I run the program, I am getting the following in Chrome Dev Tools

blazor.server.js:15 [2020-04-16T20:04:39.790Z] Error: System.NullReferenceException: Object reference not set to an instance of an object.

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

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.<>c__DisplayClass437_0.<getDataByValue>b__0(TItem fields)

   at System.Linq.Enumerable.WhereListIterator`1.MoveNext()

   at System.Linq.Enumerable.TryGetFirst[TSource](IEnumerable`1 source, Boolean& found)

   at System.Linq.Enumerable.FirstOrDefault[TSource](IEnumerable`1 source)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.getDataByValue(TValue value)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.updateValues(Dictionary`2 props)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.initValue(Dictionary`2 props)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.InitialRendered()

   at Syncfusion.Blazor.BaseComponent.InitComponent()

   at Syncfusion.Blazor.BaseComponent.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.DropDowns.DropDownBase`1.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.OnHybridAfterRender(Boolean firstRender)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.OnAfterRenderAsync(Boolean firstRender)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Here is my .razor page code for the DropDownList;

    <SfDropDownList id="accountOwner" CssClass="adjust-sf-padding" TValue="Guid" TItem="Account" @bind-Value="@ManageAccountType.OwnerId" Query="@OwnerIdQuery">

        <SfDataManager Headers="@HeaderData" Url="@CdApiAccountsUrl" Adaptor="Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>

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

    </SfDropDownList>

Here is my OwnerIdQuery in the .razor.cs file;

        protected Query OwnerIdQuery = new Query().Select(new List<string> { "Id", "AccountName" });

Here is my ManageAccountType definition in the .razor.cs file;

        protected AccountTypeModel ManageAccountType { get; set; } = new AccountTypeModel();

Here is my AccountTypeModel Class;

    public class AccountTypeModel where I am trying to bind the OwnerId property.

    {

        public string AccountType { get; set; }

        public Guid OwnerId { get; set; } = Guid.Empty;

        public Guid SalesPersonId { get; set; } = Guid.Empty;

        public string Status { get; set; }

        public bool IsTaxExempt { get; set; }

    }

And her is my Account class that is references as the TItem, which is what is returned from the API call;

    public class Account

    {

        public Guid Id { get; set; } = Guid.Empty;

        public string AccountName { get; set; }

        public string AccountType { get; set; }

        public Guid OwnerId { get; set; } = Guid.Empty;

        public string OwnerName { get; set; }

        public string PhoneNumber { get; set; }

        public string Fax { get; set; }

        public string PrimaryAddressLine { get; set; }

        public string SecondaryAddressLine { get; set; }

        public string City { get; set; }

        public string StateProvinceCode { get; set; }

        public string PostalCode { get; set; }

        public string CountryRegionCode { get; set; }

        public Guid SalesPersonId { get; set; } = Guid.Empty;

        public Guid MailJobProxyId { get; set; } = Guid.Empty;

        public string PostagePaymentMethodType { get; set; }

        public string AccountNumber { get; set; }

        public string Username { get; set; }

        public string Password { get; set; }

        public string MailerId { get; set; }

        public bool IsTaxExempt { get; set; }

        public string Status { get; set; }

        public bool DeleteFlag { get; set; }

    }

Does the DropDownList support a TValue of type Guid?

I am not sure how to troubleshoot this issue on my end. I get results back from the API when using Postman at the specified URL endpoint using the query https://{{url}}/v1/accounts?$select=Id,AccountName

{

    "@odata.context": "https://localhost:44371/v1/$metadata#Accounts(Id,AccountName)",

    "value": [

        {

            "Id": "11d73913-8e87-4cd8-0e4a-08d7d29816ae",

            "AccountName": "Test Company 38"

        },

        {

            "Id": "49cf42e5-209f-4f43-0e49-08d7d29816ae",

            "AccountName": "Test Customer 37"

        },

        {

            "Id": "60c37c91-ad75-41c3-0e43-08d7d29816ae",

            "AccountName": "Test Customer 32"

        }

    ]

}

I have another DropDownList component on another page that is using a similar approach and is hitting the same API, just a different endpoint. That component populates correctly and does not get the nul referenc error,  but it has a TValue="string" instead of TValue="Guid"

Is there any other information you need?

[Berly Christopher]

Hi David, 

  

Greetings from Syncfusion support.  

  

We would like to inform you that the reported issue caused due to define the TValue as GUID for the DropDownList. So, we suggest you to define the TValue as GUID Nullable as mentioned in the below code example to get rid of the reported issue.  

  

<SfDropDownList TValue="Guid?" TItem="LocationAreaModel" Placeholder="Select a location area" Query="@Query" AllowFiltering="true"> 

<SfDataManager Url="https://ezmgr.azurewebsites.net/api/Test/TrackerSearch" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager> 

<DropDownListFieldSettings Text="LocationAreaName" Value="LocationAreaId"></DropDownListFieldSettings> 

</SfDropDownList> 

@code { 

    public Query Query = new Query().Select(new List<string> { "LocationAreaId", "LocationAreaName" }).Take(60).RequiresCount(); 

 

    public class LocationAreaModel 

    { 

        public Guid? LocationAreaId { get; set; } 

        public string LocationAreaName { get; set; } 

    } 

} 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/153407/ze/SyncfusionBlazorSample_153407_GUID1176697155  

  

Still facing issue, please share the issue reproducing sample and replication procedure that will help us to check and proceed further at our end.  

  

Regards, 

Berly B.C 

[Peter]

I had the same issue. Changing Guid to Guid? doesn't work when your model requires Guid. And besides that also OnChange errors start popping up!

[Berly Christopher]

Hi Peter, 

  

Based on the provided details, we could not replicate and understand the issue which you have faced. So, please share the below details to proceed further at our end. 

·       Issue reproducing sample  

·       Code example. 

·       Elaborate the requirement or faced issue through any video or screenshot 

  

Regards, 

Berly B.C 

[Peter]

Please use the page below and see the result below that.

Best,

Peter

@page "/test"

@using Syncfusion.Blazor.DropDowns

<p>DropDownList value is:<strong>@DropVal</strong></p>

<SfDropDownList TValue="Guid" Placeholder="e.g. Australia" TItem="Countries" Value="@DropVal" DataSource="@Country">

    <DropDownListEvents TValue="Guid" ValueChange="onChange"></DropDownListEvents>

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

</SfDropDownList>

@code {

    public Guid DropVal;

    public class Countries

    {

        public Guid ID { get; set; }

        public string Name { get; set; }

        public string Code { get; set; }

    }

    List<Countries> Country = new List<Countries>

    {

        new Countries() { ID = new Guid("11d73913-8e87-4cd8-0e4a-08d7d29816ae"), Name = "Australia", Code = "AU" },

        new Countries() { ID = new Guid("b8c92d08-8355-4260-aa0f-8257cdafeaf8"), Name = "Bermuda", Code = "BM" },

        new Countries() { ID = new Guid("74b20b45-a7cf-4b08-b07f-ac392a219a39"), Name = "Canada", Code = "CA" },

        new Countries() { ID = new Guid("17796f6f-2973-4478-8c82-abda2f9556c0"), Name = "Cameroon", Code = "CM" },

    };

    private void onChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<Guid> args)

    {

        DropVal = args.Value;

        StateHasChanged();

    }

}

RESULT:

blazor.webassembly.js:1 Uncaught (in promise) Error: System.ArgumentNullException: Value cannot be null.

Parameter name: source

  at (wrapper managed-to-native) System.Reflection.RuntimeMethodInfo.InternalInvoke(System.Reflection.RuntimeMethodInfo,object,object[],System.Exception&)

  at System.Reflection.RuntimeMethodInfo.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) <0x399b278 + 0x000ce> in <filename unknown>:0 

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

  at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously (Microsoft.JSInterop.JSRuntime jsRuntime, Microsoft.JSInterop.Infrastructure.DotNetInvocationInfo& callInfo, Microsoft.JSInterop.Infrastructure.IDotNetObjectReference objectReference, System.String argsJson) <0x5da0f80 + 0x0017a> in <filename unknown>:0 

  at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet (Microsoft.JSInterop.JSRuntime jsRuntime, Microsoft.JSInterop.Infrastructure.DotNetInvocationInfo invocationInfo, System.String argsJson) <0x5d9e3e8 + 0x0009e> in <filename unknown>:0 

    at Object.endInvokeDotNetFromJS (https://localhost:44349/_framework/blazor.webassembly.js:1:10047)

    at Object.invokeJSFromDotNet (https://localhost:44349/_framework/blazor.webassembly.js:1:9673)

    at _mono_wasm_invoke_js_marshalled (https://localhost:44349/_framework/wasm/dotnet.3.2.0-preview5.20216.1.js:1:165829)

    at do_icall (wasm-function[6055]:0x1118a2)

    at do_icall_wrapper (wasm-function[1902]:0x52bd3)

    at interp_exec_method (wasm-function[1126]:0x25939)

    at interp_runtime_invoke (wasm-function[5660]:0xf937a)

    at mono_jit_runtime_invoke (wasm-function[5114]:0xdfb31)

    at do_runtime_invoke (wasm-function[1415]:0x3da84)

    at mono_runtime_try_invoke (wasm-function[423]:0xcffc)

[Peter]

And in my production project I have a custom SfDropDownList in a custom SfDialog in a SfSchedule and this leads to a lot of errors. To much to paste here. You find them, in the attached zip file.

I hope this helps you to find out what goes on here.

For now SfDropdDowns are not usable with Guids in Blazor.

Attachment: Dropdownerrors_5af1dfa0.zip

[Peter]

Just for the information:

I tried SfComboBox which appears to work with no problem with Guids. Although it does not show the Placeholder when the value=Guid.Empty.

So I made a work around through strings. Which is far from ideal because it takes extra coding.

So what is the intended functionality regarding Guids? I know that the manual says both SfDropDownList as SfComboBox only support string, int, Enum, DateTime, and bool types.

Will this change in the future?

[Berly Christopher]

Hi David, 

  

Thank for providing information.   

  

GUID’s default value is “000000”. So, while selecting the value the default value of the GUID is not present in the data source. So, the reported issue is occurred, and null exception is thrown from the component.   

  

Please find the .NET fiddle for your reference.  

  

Reference Link: https://dotnetfiddle.net/odYNUx   

  

We suggest you to add the default value of the GUID in the data source to get rid of the reported issue. Due to this, we have suggested to assign the TValue as GUID nullable in your application this makes the default value as NULL and avoid this kind of issues.   

  

Also, ComboBox component does not throw this issue as it has default custom value for the assigned TValue type. So, our components will work with GUID type perfectly.  

  

We have prepared the sample and attached it below.  

Sample Link: https://www.syncfusion.com/downloads/support/forum/153407/ze/GUID_1534071834227661   

  

Regards,  

Berly B.C   

[Peter]

Hi David, 

  

Thank for providing information.   

  

GUID’s default value is “000000”. So, while selecting the value the default value of the GUID is not present in the data source. So, the reported issue is occurred, and null exception is thrown from the component.   

  

Please find the .NET fiddle for your reference.  

  

Reference Link: https://dotnetfiddle.net/odYNUx   

  

We suggest you to add the default value of the GUID in the data source to get rid of the reported issue. Due to this, we have suggested to assign the TValue as GUID nullable in your application this makes the default value as NULL and avoid this kind of issues.   

  

Also, ComboBox component does not throw this issue as it has default custom value for the assigned TValue type. So, our components will work with GUID type perfectly.  

  

We have prepared the sample and attached it below.  

Sample Link: https://www.syncfusion.com/downloads/support/forum/153407/ze/GUID_1534071834227661   

  

Regards,  

Berly B.C   

Hi Berly,

To me both options don't really work.

My data source is a external view from a sql server. I cannot add a 000000 record and I cannot make the lookup field nullable.

Any advise on how to avoid going the string way in this case?

Best,

Peter 

[Berly Christopher]

Hi David, 

  

Sorry for the inconvenience caused. 

  

We have provided nullable support for the component while clearing the value from the component, it makes the component value property as Null. To handle this situation, we have provided nullable support for the component. For your case, we need to provide the TValue type as GUID nullable else add the default value of the TValue into the data source item for the DropDownList component.  

  

So, please share the faced issues while making the TValue as nullable GUID to the DropDownList component that will help us to check and provide the solution from our end.  

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/153407/ze/SyncfusionBlazorSample_153407_GUID1176697155  

  

Regards, 

Berly B.C 

[Peter]

Hi Berly,

This is Peter, not David. David started this, but somehow I took over.

But thanks for your instructions and sample. Right now I have to solve a couple of other issues, but will get back to this soon. I will let you know the results.

Best,

Peter

[Berly Christopher]

Hi Peter, 

  

Please share the issue details with enough information that will help us to check and proceed further. We will wait until hear from you.  

  

Regards, 

Berly B.C 

[Peter]

Hi Berly,

I was able to solve my issues with your instructions.

Many thanks.

Best,

Peter

[Berly Christopher]

Hi Peter,  

  

We are glad to know that your issue is resolved. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C 

[Volker]

Hi there,

I downloaded your demo (SyncfusionBlazorSample_153407_GUID1176697155.zip), searching doesn't work on my workstation.

Please have a look at the attached ZIP, where you can find my sample I used.
I also added a screencapture (mp4): Searching for "fa" does not work...

Any idea?

regards,
Volker

Attachment: demo_2b4f6b6b.zip

[Ponmani Murugaiyan]

Hi David,  

 

We have already considered this issue as a bug in our end. The fix for the reported issue will be included in Volume1 SP1 release, which is expected to be rolled out on 13^th May 2020. We appreciate your patience until then.   

 

You can track the status of the fix in the below feedback portal.  

 

Feedback: https://www.syncfusion.com/feedback/14093  

 

Regards,  

Ponmani M  

[Volker]

Who is David?

[Ponmani Murugaiyan]

Hi Volker, 

Sorry for the inconvenience caused. 

  

We have already considered this issue as a bug in our end. The fix for the reported issue will be included in Volume1 SP1 release, which is expected to be rolled out on 13^th May 2020. We appreciate your patience until then.    

  

You can track the status of the fix in the below feedback portal.   

  

Feedback: https://www.syncfusion.com/feedback/14093   

  

Regards,   

Ponmani M   

[Volker]

I can't reach this side!

It says:

Access Denied

This private feedback is not associated with your account.

[Berly Christopher]

Hi Volker, 

 

Sorry for the inconvenience caused.  

 

Now, the below feedback is accessible from your end. 

 

Feedback Link: https://www.syncfusion.com/feedback/14093  

 

And, we are glad to announce that our Essential Studio 2020 Volume 1 SP release v18.1.0.52 is rolled out and is available for download under the following link. In this release, we have fixed the reported issue. 

 

https://www.syncfusion.com/forums/154238/essential-studio-2020-volume-1-service-pack-release-v18-1-0-52-is-available-for-download 

  

The reported issue “Searching for "fa" does not work” has resolved in the above-mentioned release. 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

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

 

Regards, 

Berly B.C