Updating ListBox with template

[M.]

The platform is Blazor WebAssembly, the version of Syncfusion used is the 18.2.0.59 (not yet ported to 18.3 brench).

I have a SfListBox define as follow:

        <SfListBox @ref="ListBoxChat" TValue="int[]" TItem="ChatWrapper"
                   DataSource="@Status.ChatContainer.Listed" CssClass="list">

            <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings>
            <ListBoxEvents TValue="int[]" ValueChange="OnValueChange"></ListBoxEvents>

            <ListBoxFieldSettings Text="Name" Value="ID" />
            <ListBoxTemplates TItem="ChatWrapper">
                <ItemTemplate>
                    <i class="fa fa-@((context.IsSingle) ? "user" : "users") fa-2x"></i>
                    <span class="top-left">@(context.Name)</span>
                    <span class="top-right">@(context.LastMessageTime)</span>
                    <span class="bottom-left">@(context.LastMessageText)</span>
                </ItemTemplate>
            </ListBoxTemplates>
        </SfListBox>

When rendered the first time there are no problems, but if i try to update the ObservableCollection, the new rendered list does not use the template anymore (it is reported the Text or Value fields specified in ListBoxFieldSettings).

The collection is updated by inner processes (or events coming from a SignalR connection), so no user action is involved.

Any advice is really appreciated.

[Mohan Kumar Ramasamy]

Hi M, 

 

We have checked your reported query, we are unable to reproduce the reported issue in our end. Please refer below code snippets. 

 

 

SfListBox DataSource="@Data" TValue="string[]" TItem="ListData"> 

    <ListBoxFieldSettings Text="text" Value="id"></ListBoxFieldSettings> 

    <ListBoxEvents TValue="string[]" ValueChange="OnValueChange"></ListBoxEvents> 

    <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings> 

    <ListBoxTemplates TItem="ListData"> 

        <ItemTemplate> 

            <i class="fa fa-user-fa-2x"></i> 

            <span class="top-left">@(context.text)</span> 

            <span class="top-right">@(context.id)</span> 

        </ItemTemplate> 

    </ListBoxTemplates> 

</SfListBox> 

 

<SfButton CssClass="e-success" @onclick="PropertyBinding">Add</SfButton> 

 

@code 

{ 

    private void OnValueChange(ListBoxChangeEventArgs args) 

    { 

 

    } 

 

    public ObservableCollection<ListData> Data { get; set; } 

    public class ListData 

    { 

        public string id { get; set; } 

        public string text { get; set; } 

 

        public static ObservableCollection<ListData> getListData() 

        { 

            ObservableCollection<ListData> Data = new ObservableCollection<ListData>(); 

            Data.Add(new ListData() { text = "Hennessey Venom", id = "list-01" }); 

            Data.Add(new ListData() { text = "Bugatti Chiron", id = "list-02" }); 

            Data.Add(new ListData() { text = "Bugatti Veyron Super Sport", id = "list-03" }); 

            Data.Add(new ListData() { text = "SSC Ultimate Aero", id = "list-04" }); 

            Data.Add(new ListData() { text = "Koenigsegg CCR", id = "list-05" }); 

            Data.Add(new ListData() { text = "McLaren F1", id = "list-06" }); 

            Data.Add(new ListData() { text = "Aston Martin One- 77", id = "list-07" }); 

            Data.Add(new ListData() { text = "Jaguar XJ220", id = "list-08" }); 

            Data.Add(new ListData() { text = "McLaren P1", id = "list-09" }); 

            Data.Add(new ListData() { text = "Ferrari LaFerrari", id = "list-10" }); 

            return Data; 

        } 

    } 

    protected override void OnInitialized() 

    { 

        this.Data = ListData.getListData(); 

 

    } 

    private void PropertyBinding() 

    { 

        this.Data.Add(new ListData() { id = "c", text = "RAKKI" }); 

    } 

} 

 

 

For your reference, we have prepared a sample based on this, please refer below link. 

 

Link:  https://www.syncfusion.com/downloads/support/forum/158449/ze/158449-ListBox1094295149  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan Kumar R 

[M.]

Hello and thanks for the reply.

The example you propose is not exactly relevant to my situation: you have proposed a server-side blazor project while I am using a blazor-client (web assembly) project. I know that in theory they should guarantee the same behaviour, but you also know that practice is often different from theory.

Apart from that, when I open it in Visual Studio 2019 and run it (on IIS debug), the list shows up but when I click the "add" button, the interface freezes and no longer responds.

I don't know if other users have also run into this problem ...

[Mohan Kumar Ramasamy]

Hi M, 

 

We have checked your reported query, we can reproduce the reported issue in our end. We have logged an issue report for this, and we will include this fix in our upcoming patch release. You can track the status in the below feedback link.  

 

Link:  https://www.syncfusion.com/feedback/18768/script-error-thrown-when-add-item-in-obserablecollection-webassembly  

 

Regards, 

Mohankumar R 

[M.]

Thank you.

[Mohan Kumar Ramasamy]

Hi M, 

 

Thanks for update. 

 

This fix will be available in any of our upcoming patch release. Until then we appreciate your patience. 

 

Regards, 

Mohan kumar R 

[Mohan Kumar Ramasamy]

Hi M, 

 

Thank you for the patience. 

 

We are glad to announce that our weekly patch release (18.3.0.48) is rolled out. We have included the fix for the reported issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end. (18.3.0.48) 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Mohan kumar R