Odd Behaviour of DropDown

Radzen.Blazor Components
1

This is the first time I have used Radzen Blazor components and am already having problems creating a simple DropDown.

My razor page:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<div>
<RadzenDropDown 
    AllowClear="true" 
    AllowFiltering="true" 
    FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" 
    Data=@MyFruits 
    @bind-Value=@Selected.Name
    TextProperty="Name" 
    ValueProperty="Name" 
    Style="width:400px" 
    Change=@(args => ChangeBound(args, "DropDown with bound Value")) />
</div>

My code-behind:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Threading.Tasks;

namespace RadzenTest.Pages
{
    public partial class Counter
    {
        private int currentCount = 0;
        private ObservableCollection<Fruit> MyFruits { get; set; }
        private Fruit Selected { get; set; }

        private void IncrementCount()
        {
            currentCount++;
        }

        protected override void OnInitialized()
        {
            base.OnInitialized();
            MyFruits = new ObservableCollection<Fruit>();
            MyFruits.Add( new Fruit() { Id = 1, Name = "Apple", Colour = "Green" } );
            MyFruits.Add( new Fruit() { Id = 2, Name = "Apple", Colour = "Red" } );
            MyFruits.Add( new Fruit() { Id = 3, Name = "Lemon", Colour = "Yellow" } );
            MyFruits.Add( new Fruit() { Id = 4, Name = "Lime", Colour = "Green" } );
            Selected = MyFruits.FirstOrDefault( x => x.Name.Equals( "Lemon" ) );
        }

        void ChangeBound( object value, string name )
        {
            Console.WriteLine( $"{name} value changed to {Selected.Name}" );
        }
    }

    public sealed class Fruit
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Colour { get; set; }
    }
}

See the attached screenshot which shows that the dropdown appears as a bulleted list at the bottom of the page, now a dropdown list under the DropDown control.

drop down
drop down706×811 7.6 KB

What am I missing ?

Andy

2

You are missing the css for our components. Check the getting started of our demos.

3

Okay, thanks - I thought that section in Getting Started was if you wanted a theme.
That works great now - thanks :slight_smile:

Andy

4

I am still having problems with the dropdown control.
When it first runs it renders fine, but if I select and item then bring up the dropdown again, one of the items is missing and I have gained a duplicate.

drop down 2
drop down 2776×551 7.71 KB

The missing item after selection always seems to be the item I set as the default selected (see code in first post).

I guess I am doing something wrong with binding the user selection to my Selected property ?

Can anyone help?

Andy

5

Okay, I seem to have got it working with a combination of things - not sure if this is the correct way to do it but it works for me.

Code behind:

    private int currentCount = 0;
    private ObservableCollection<Fruit> MyFruits { get; set; }
    private object SelectedID { get; set; }
    private object SelectedObject { get; set; }
    private Fruit Selected { get; set; }

    private void IncrementCount()
    {
        currentCount++;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        
        MyFruits = new ObservableCollection<Fruit>();
        MyFruits.Add( new Fruit() { Id = 1, Name = "Apple (Green)", Colour = "Green" } );
        MyFruits.Add( new Fruit() { Id = 2, Name = "Apple (Red)", Colour = "Red" } );
        MyFruits.Add( new Fruit() { Id = 3, Name = "Lemon", Colour = "Yellow" } );
        MyFruits.Add( new Fruit() { Id = 4, Name = "Lime", Colour = "Green" } );
        
        Selected = MyFruits.FirstOrDefault( x => x.Name.Equals( "Lime" ) );
        SelectedID = Selected.Name;
    }

    void ChangeBound( object value, string name )
    {
        Selected = ( Fruit )SelectedObject;
    }

The razor file:

<div class="row">
<RadzenDropDown 
    AllowClear="true" 
    AllowFiltering="true" 
    FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" 
    Data=@MyFruits 
    @bind-Value=@SelectedID
    @bind-SelectedItem="@SelectedObject"
    TextProperty="Name" 
    ValueProperty="Name" 
    Style="width:400px" 
    Change=@(args => ChangeBound(args, "DropDown with bound Value")) />
</div>
<div>
    <label>The Fruit Colour is:</label>
    <br />
    <label>@Selected.Colour</label>
</div>

Andy