Do you have a Sample on how to implement NoRecordsTemplate on a dropdown list for Blazor?

[Basil Buwalda]

Hi 

Do you have a Sample on how to implement NoRecordsTemplate on a dropdown list for Blazor?

Sample code I started on in blazor does not show the Add new item button & I have no idea how the rest of the implementation will look like.....

<div class="col-lg-12 control-section">

    <div class="control_wrapper">

        <SfDropDownList TValue="string" TItem="Countries" Placeholder="Select a country" AllowFiltering="true" NoRecordsTemplate="<div><div id='nodata'>No matched item, do you want to add it as new item in list?</div><button id='btn' class='e-control e-btn'>Add New Item</button></div>" DataSource="@Country">

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

</SfDropDownList>

    </div>

</div>

You have a really nice example in ASP.NET but the blazer one does not have the  NoRecordsTemplate   implementation in it.

Regards

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Basil,

Greetings from Syncfusion support.

Since Dropdownlist cannot be editable and also no custom value support for it, you cannot add new item to the datasource. However you can achieve the same using SfCombobox as like below.



 

<SfComboBox @ref="comboboxObj" TItem="Countries" TValue="string" @bind-Value="Value" Placeholder="e.g. Australia" DataSource="@Country" AllowFiltering="true"> 

  <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings> 

  <ComboBoxEvents TValue="string" Filtering="onFiltering"></ComboBoxEvents> 

  <ComboBoxTemplates TItem="Countries"> 

      <NoRecordsTemplate> 

          <div> 

              <div id="nodata"> No matched item, do you want to add it as new item in list?</div> 

              <button id="btn" class="e-control e-btn" @onclick="@UpdateValue">Add New Item</button> 

          </div> 

      </NoRecordsTemplate> 

  </ComboBoxTemplates> 

</SfComboBox> 

@code { 

   

 

  List<Countries> Country = new List<Countries> 

  { 

      new Countries() { Name = "Australia", Code = "AU" }, 

      new Countries() { Name = "Bermuda", Code = "BM" }, 

      new Countries() { Name = "Canada", Code = "CA" }, 

      new Countries() { Name = "Cameroon", Code = "CM" }, 

  }; 

  public void onFiltering(FilteringEventArgs e) 

  { 

      Text = e.Text; 

  } 

  public void UpdateValue() 

  { 

      this.comboboxObj.AddItem(new List<Countries> { new Countries() { Name = Text, Code = Text } }); 

      this.comboboxObj.HidePopup(); 

  } 

 

} 

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

Please check the sample and get back to us if you need any assist on this.

Regards,
Jeyanth.

[Peter]

what if one doesn't need a global change but just a simple text

<SfListBox Value=@Value DataSource="@Data" TValue="string[]" TItem="DataValues" @ref="ListBoxObj" Height="290px" >

    <NoRecordsTemplate>       

        <div>No {@TypeName} have been registered </div>

    </NoRecordsTemplate>

    <ListBoxEvents TValue="string[]" ValueChange="selectionChanged" TItem="DataValues"></ListBoxEvents>

    <ListBoxEvents TValue="string[]" Created="created" TItem="DataValues"></ListBoxEvents>

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

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

</SfListBox>

[Gayathri KarunaiAnandam]

Hi Peter, 

We have checked your reported query. We have achieved your requirement in Listbox as below 

<SfListBox TValue="string[]" TItem="DataValues" @ref="ListboxObj"> 

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

    <ListBoxTemplates TItem="DataValues"> 

        <NoRecordsTemplate> 

            <div id="nodata"> 

                No data have been registered 

 

                <SfButton @onclick="UpdateValue">Data</SfButton> 

            </div> 

        </NoRecordsTemplate> 

 

    </ListBoxTemplates> 

</SfListBox> 

 

 

 

@code 

{ 

    public SfListBox<string[], DataValues> ListboxObj; 

 

    private List<DataValues> Data = new List<DataValues> 

        { 

        new DataValues { Text = "Hennessey Venom", Id = "List-01" }, 

        new DataValues { Text = "Bugatti Chiron", Id = "List-02" }, 

 

    }; 

    public class DataValues 

    { 

        public string Text { get; set; } 

        public string Id { get; set; } 

    } 

    private async Task UpdateValue() 

    { 

        await ListboxObj.AddItem(Data); 

 

    } 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156780/ze/BlazorApp3-1387683713 

Could you please check the above sample and get back to us with more information if we misunderstood your requirement so that we can analyze based on that and provide a better solution?  

 

Regards, 

Gayathri K