1. Home
  2. Forum
  3. Blazor
  4. Listbox doesn't add value if initialized empty

Listbox doesn't add value if initialized empty

Hello Team!

Q1: I add selected value of my combobox in my listbox but 
If i just initialize  List<MyClass> _listSignetRapport { get; set; } = new List<MyClass>(); the AddDataToList buttons doesn't add element to listbox 
But if initialize like this List<MyClass> _listSignetRapport { get; set; } = new List<MyClass>(){ new MyClass { CodeType = 2, Correspondance = "testt", Source = "SignetN123" } }; the AddDataToList buttons add element to listbox 
i'm I missing something? my listbox has to be empty when form load. 

Q2: How to remove SelectedItems in ListBox considering single or multiple Selection

<code>
<div class="form-row">
<div class="col-5"> 
<SfComboBox @ref="_signetDdlObj" TItem="string" TValue="string" @bind-Value="_signetValue" Placeholder="Signets disponibles" AllowCustom="true" DataSource="@_signetsList" AllowFiltering="true" IgnoreAccent=true >
<ComboBoxEvents TValue="string" Filtering="OnDdlFiltering"></ComboBoxEvents>
<ComboBoxTemplates TItem="string">
<NoRecordsTemplate>
<div>
<div id="nodata"> Ajouter dans la liste?</div>
<button id="btn" class="e-control e-btn" @onclick="@UpdateDdlValue">Ajouter</button>
</div>
</NoRecordsTemplate>
</ComboBoxTemplates>
</SfComboBox>
</div>
<div class="col-5"> 
<SfDropDownList @bind-Value="_infosourceValue" TValue="string" TItem="string" Placeholder="Informations sources"  DataSource="@_infoSourceList" AllowFiltering=true IgnoreAccent=true >
</SfDropDownList>
</div>
<SfButton CssClass="e-round" IconCss="e-icons e-plus-icon" IsPrimary="true" @onclick="AddDataToList"></SfButton>
</div>
<br/>
<div>
<SfListBox TValue="string[]" TItem="MyClass" @ref="_listBoxSignetObj" DataSource="_listSignetRapport">
<ListBoxSelectionSettings Mode="SelectionMode.Multiple"></ListBoxSelectionSettings>
<ListBoxFieldSettings Text="Correspondance" Value="Source" />
</SfListBox>
</div>
<br />
<div class="form-group" style="text-align:right;">
<span>
<input type="submit" class="btn btn-default" value="Supprimer" @onclick="RemoveDataToList"/>
<input type="submit" class="btn btn-success" value="Enregistrer" />
<input type="reset" class="btn btn-danger" @onclick="@(() => ClosePilotage())" value="Annuler" />
</span>
</div> 

@code{

private SfListBox<string[], MyClass> _listBoxSignetObj;
    SfComboBox<string, string> _signetDdlObj;
List<string> _signetsList { get; set; } = new List<string>() { "CPOSTAL", "dob", "city", "name", "chir" };
    List<string> _infoSourceList { get; set; } = new List<string>(){ "Code Postal", "Nom et Prenom", "Date et lieu de naissance", "Ville et quartier"};
string _signetValue { get; set; }
    string _infosourceValue { get; set; }
    private string _enteredText { get; set; }
List<MyClass> _listSignetRapport { get; set; } = new List<MyClass>(){ new MyClass { CodeType = 2, Correspondance = "testt", Source = "SignetN123" } };

public void OnDdlFiltering(FilteringEventArgs e)
    {
        _enteredText = e.Text;
    }

    public void UpdateDdlValue()
    {
        var newItem = new List<string>() { _enteredText };
        _signetDdlObj.AddItem(newItem);
        _signetDdlObj.HidePopup();
    }
private void AddDataToList()
    {
        var signetRapport = new MyClass() { CodeType = 2, NomSignet = _signetValue, InformationSource = _infosourceValue };
        _listSignetRapport.Add(signetRapport);
        _listBoxSignetObj.AddItems(signetRapport);
    }

    private void RemoveDataToList()
    {
        _listBoxSignetObj.RemoveItems(); // need to implement removeSelectedItems
    }
public class MyClass
    {
        public int CodeType { get; set; }
        public string Source { get; set; }
        public string Correspondance { get; set; }
    }
}
</code>

Thanks,
Chimène NK.

3 Replies
NC NKOUAMBIA CHIMENE March 26, 2020 03:15 PM UTC

Hello team!
continuation of the last thread!

Q3: When I click on remove bouttons and all the listbox items are removed, if i click again on AddDataToList  I have this F12 error 

Q4: if I want to templated the added items when click on add bouttons before show it in listbox How can I proceed?

<SfListBox TValue="string[]" TItem="MyClass" @ref="_listBoxSignetObj" DataSource="_listSignetRapport">
<ListBoxSelectionSettings Mode="SelectionMode.Multiple"></ListBoxSelectionSettings>
<ListBoxFieldSettings Text="Correspondance" Value="Source" />
<ListBoxTemplates TItem="MyClass">
<ItemTemplate>
<div class="list-wrapper">
<span class="text">@((context as MyClass).Correspondance)</span> <i class="fas fa-arrows-alt-h"></i> <span class="description">@((context as MyClass).Source)</span>
</div>
</ItemTemplate>
</ListBoxTemplates>
</SfListBox>
private void AddDataToList()
    {-----------------}
how to implemetd the AddDataToList() Method so the added value will be templated ??

Thanks,
Chimene NK.

PJ pascal joseph October 1, 2020 07:39 PM UTC

listbox from syncfusion is a total disaster it does not work when removing items

MK Mohan Kumar Ramasamy Syncfusion Team October 6, 2020 07:52 AM UTC

Hi Pascal, 
 
We have checked your reported issue, we are unable to reproduce the reported issue in our end. Please refer the below code snippets. 
 
 
   <SfListBox Value=@Value DataSource="@Data" @ref="ListBoxObj" TValue="string[]" TItem="DataValues"> 
            <ListBoxFieldSettings Text="Text" Value="Id"></ListBoxFieldSettings> 
        </SfListBox> 
<button @onclick="OnClick"> Get </button> 
@code 
{ 
    private void OnClick() 
    { 
        ListBoxObj.RemoveItem(removeItem); 
    } 
    SfListBox<string[], DataValues> ListBoxObj; 
     
 
 
For your reference, we have prepared a sample based on this, please refer the below link. 
 
 
Please, refer the following links to know more about SF Blazor Menu Bar component    
   
 
Please note that we have introduced several API break in this release. We would like you to review the breaking changes from the below location before you upgrade. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 


Loader.
Up arrow icon