No Results Found in .NET MAUI ComboBox
21 Jul 20269 minutes to read
When no items match the text typed into the editor, the .NET MAUI ComboBox control displays a message in the drop-down to inform the user that no results were found. Customize this message with the NoResultsFoundText and NoResultsFoundTemplate properties.
NOTE
The No Results Found view is shown only when
IsEditableistrueandIsFilteringEnabledistrue. If either isfalse, the view is not shown even if the filter result is empty.
Prerequisites
Before using the SfComboBox, ensure the following NuGet package is installed in your .NET MAUI project:
Syncfusion.Maui.Inputs
For a step-by-step setup, refer to the Getting Started documentation.
Customize the no results text
Use the NoResultsFoundText string property to customize the message shown when no items match the typed text. The default value is "No Results Found".
To hide the message entirely, set NoResultsFoundText to an empty string ("").
<editors:SfComboBox x:Name="comboBox"
IsEditable="True"
IsFilteringEnabled="True"
NoResultsFoundText="Not Found"
ItemsSource="{Binding SocialMedias}"
TextMemberPath="Name"
DisplayMemberPath="Name">
<editors:SfComboBox.BindingContext>
<local:SocialMediaViewModel />
</editors:SfComboBox.BindingContext>
</editors:SfComboBox>SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
SfComboBox comboBox = new SfComboBox
{
IsFilteringEnabled = true,
IsEditable = true,
NoResultsFoundText = "Not Found",
ItemsSource = socialMediaViewModel.SocialMedias,
TextMemberPath = "Name",
DisplayMemberPath = "Name",
BindingContext = socialMediaViewModel,
};// ViewModel
public class SocialMediaViewModel
{
public ObservableCollection<SocialMedia> SocialMedias { get; set; }
public SocialMediaViewModel()
{
this.SocialMedias = new ObservableCollection<SocialMedia>
{
new SocialMedia { Name = "Facebook", ID = 0 },
new SocialMedia { Name = "Google Plus", ID = 1 },
new SocialMedia { Name = "Instagram", ID = 2 },
new SocialMedia { Name = "LinkedIn", ID = 3 },
new SocialMedia { Name = "Skype", ID = 4 },
new SocialMedia { Name = "Telegram", ID = 5 },
new SocialMedia { Name = "Twitter", ID = 6 },
new SocialMedia { Name = "WhatsApp", ID = 7 },
new SocialMedia { Name = "YouTube", ID = 8 }
};
}
}
public class SocialMedia
{
public string Name { get; set; }
public int ID { get; set; }
}
Customize the no results view
Use the NoResultsFoundTemplate property to provide a custom DataTemplate for the no-results view.
When NoResultsFoundTemplate is set, it takes precedence over NoResultsFoundText.
<editors:SfComboBox x:Name="comboBox"
ItemsSource="{Binding SocialMedias}"
IsEditable="True"
IsFilteringEnabled="True"
TextMemberPath="Name"
DisplayMemberPath="Name">
<editors:SfComboBox.BindingContext>
<local:SocialMediaViewModel />
</editors:SfComboBox.BindingContext>
<editors:SfComboBox.NoResultsFoundTemplate>
<DataTemplate>
<Label Text="Not Found"
FontSize="20"
FontAttributes="Italic"
TextColor="Red"
Margin="70,10,0,0" />
</DataTemplate>
</editors:SfComboBox.NoResultsFoundTemplate>
</editors:SfComboBox>SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
SfComboBox comboBox = new SfComboBox
{
ItemsSource = socialMediaViewModel.SocialMedias,
TextMemberPath = "Name",
DisplayMemberPath = "Name",
BindingContext = socialMediaViewModel,
NoResultsFoundTemplate = new DataTemplate(() => new Label
{
Text = "Not Found",
FontSize = 20,
FontAttributes = FontAttributes.Italic,
TextColor = Colors.Red,
Margin = new Thickness(70, 10, 0, 0),
}),
};// ViewModel
public class SocialMediaViewModel
{
public ObservableCollection<SocialMedia> SocialMedias { get; set; }
public SocialMediaViewModel()
{
this.SocialMedias = new ObservableCollection<SocialMedia>
{
new SocialMedia { Name = "Facebook", ID = 0 },
new SocialMedia { Name = "Google Plus", ID = 1 },
new SocialMedia { Name = "Instagram", ID = 2 },
new SocialMedia { Name = "LinkedIn", ID = 3 },
new SocialMedia { Name = "Skype", ID = 4 },
new SocialMedia { Name = "Telegram", ID = 5 },
new SocialMedia { Name = "Twitter", ID = 6 },
new SocialMedia { Name = "WhatsApp", ID = 7 },
new SocialMedia { Name = "YouTube", ID = 8 }
};
}
}
public class SocialMedia
{
public string Name { get; set; }
public int ID { get; set; }
}