Webassembly Listbox NullReferenceException
I am trying to use the ListBox component in my Blazor Webassembly application. I am using Syncfusion.Blazor (19.2.0.55) and following (copy/paste) the example shown on the website here.
I am running into an issue when the project starts up:
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
at Syncfusion.Blazor.DropDowns.SfListBox`2[TValue,TItem].OnAfterRenderAsync (System.Boolean firstRender) <0x48010e8 + 0x0053a> in <filename unknown>:0
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x4815c30 + 0x000b6> in <filename unknown>:0
>>>mono_wasm_get_loaded_files
Here is my code (copy/pasted from the example): 
Please let me know what I am missing or if there anything I should try and do.
Copy and pasted code above still getting this error in browser:
I added the SfListBox items and set them to refs and still won't work. Please advise next steps.
Thank you. There is no longer an error when using the Dual Listbox. However, now I can not move items from the Group B to Group A.
Also after moving an item from Group A to Group B, the item does not show up in the Group B listbox.
The toolbar buttons only light up and allow me to click to move items when selecting an item in first listbox (left one).
Selecting an item from Group A allows me to move them up/down or move to Group B.
Selecting an item in Group B does nothing. The toolbar buttons don't light up and don't allow me to move the item up/down or move to Group A.
I moved a couple of items from Group A to Group B and they disappear. The items are not found in Group B.
The code is copied/pasted from here. I am using syncfusion package 19.2.0.62
|
<div id="listbox1">
<h4>Group A</h4>
<SfListBox TValue="string[]" DataSource="@GroupA" Scope="scope2" TItem="CountryCode" @attributes="listbox1Attr">
<ListBoxFieldSettings Text="Name"></ListBoxFieldSettings>
<ListBoxToolbarSettings Items="@Items"></ListBoxToolbarSettings>
</SfListBox>
</div>
<div id="listbox2">
<h4>Group B</h4>
<SfListBox TValue="string[]" Scope="scope1" DataSource="@GroupB" TItem="CountryCode" @attributes="listbox2Attr">
<ListBoxFieldSettings Text="Name"></ListBoxFieldSettings>
</SfListBox>
</div>
@code {
private readonly Dictionary<string, object> listbox1Attr = new Dictionary<string, object>
{
{ "id", "scope1" }
};
private readonly Dictionary<string, object> listbox2Attr = new Dictionary<string, object>
{
{ "id", "scope2" }
};
public string[] Items = new string[] { "MoveUp", "MoveDown", "MoveTo", "MoveFrom"};
public List<CountryCode> GroupA = new List<CountryCode>
{
new CountryCode{ Name = "Australia", Code = "AU" },
new CountryCode{ Name = "Bermuda", Code = "BM" },
new CountryCode{ Name = "Canada", Code = "CA" },
new CountryCode{ Name = "Cameroon", Code = "CM" },
new CountryCode{ Name = "Denmark", Code = "DK" },
new CountryCode{ Name = "France", Code = "FR" },
new CountryCode{ Name = "Finland", Code = "FI" }
};
public List<CountryCode> GroupB = new List<CountryCode>
{
new CountryCode{ Name = "India", Code = "IN" },
new CountryCode{ Name = "Italy", Code = "IT" },
new CountryCode{ Name = "Japan", Code = "JP" },
new CountryCode{ Name = "Mexico", Code = "MX" },
new CountryCode{ Name = "Norway", Code = "NO" },
new CountryCode{ Name = "Poland", Code = "PL" },
new CountryCode{ Name = "Switzerland", Code = "CH" }
};
public class CountryCode
{
public string Name { get; set; }
public string Code { get; set; }
}
} |
