# DropDownDataGrid
Show tabular data inside a dropdown with the Blazor DropDownDataGrid - multiple columns, filtering, paging, and single or multiple selection.
Keywords: select, picker, form, edit, dropdown, grid, multiselect
> API reference: [RadzenDropDownDataGrid API](https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenDropDownDataGrid-1.md)
## Examples
## Blazor DropDownDataGrid
Show tabular data inside a dropdown with the Blazor DropDownDataGrid - multiple columns, filtering, paging, and single or multiple selection.
### Get and Set the value of DropDownDataGrid
As all Radzen Blazor input components the DropDownDataGrid has a Value property which gets and sets the value of the component. Use `@-Value` to get the user input.
```razor
@inherits DbContextPage
@code {
string value = "Around the Horn";
IEnumerable companyNames;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
companyNames = dbContext.Customers.Select(c => c.CompanyName).Distinct();
}
}
```
### Get and Set the value of DropDownDataGrid using Value and Change event
Value property can be used to set the value of the component and `Change` event to get the user input.
```razor
@inherits DbContextPage
@code {
string value = "Around the Horn";
IEnumerable companyNames;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
companyNames = dbContext.Customers.Select(c => c.CompanyName).Distinct();
}
}
```
### Define Text and Value properties
Use the `TextProperty` and `ValueProperty` properties to specify which fields to display and use as values. When `Data` contains objects, set `TextProperty` or a `Template`; otherwise the items are displayed and announced to assistive technology via their `ToString()` result, which is the type name for plain classes.
```razor
@inherits DbContextPage
@code {
string value = "AROUT";
IEnumerable customers;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
customers = dbContext.Customers;
}
}
```
### DropDownDataGrid with custom header, footer, value and item templates
Use the `HeaderTemplate`, `FooterTemplate`, `ValueTemplate`, and `Template` properties to customize the appearance.
```razor
@inherits DbContextPage
Custom header
Company: @((context as Customer).CompanyName)
Company: @((context as Customer).CompanyName)
Custom footer
@code {
string value = "AROUT";
IEnumerable customers;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
customers = dbContext.Customers;
}
}
```
### Define multiple columns
Add multiple `RadzenDropDownDataGridColumn` components to display additional data columns in the dropdown grid.
```razor
@inherits DbContextPage
@code {
string value = "AROUT";
IEnumerable customers;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
customers = dbContext.Customers;
}
}
```
### Filtering case sensitivity and filter operator
```razor
@inherits DbContextPage
@code {
IEnumerable customers;
string value;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
customers = dbContext.Customers;
}
}
```
### Custom filtering with LoadData event
Use the `LoadData` event to implement custom filtering logic and load data on-demand.
```razor
@inherits DbContextPage
@code {
IEnumerable customers;
string value;
int count;
void LoadData(LoadDataArgs args)
{
var query = dbContext.Customers.AsQueryable();
if (!string.IsNullOrEmpty(args.Filter))
{
query = query.Where(c => c.CustomerID.ToLower().Contains(args.Filter.ToLower()) || c.ContactName.ToLower().Contains(args.Filter.ToLower()));
}
count = query.Count();
if (!string.IsNullOrEmpty(args.OrderBy))
{
query = query.OrderBy(args.OrderBy);
}
if (args.Skip != null)
{
query = query.Skip(args.Skip.Value);
}
if (args.Top != null)
{
query = query.Take(args.Top.Value);
}
customers = query.ToList();
InvokeAsync(StateHasChanged);
}
}
```
### Multiple selection
Use `Multiple="true"` to enable selection of multiple items from the dropdown grid.
```razor
@inherits DbContextPage
grid.SelectItem(data)) @onclick:stopPropagation/>
@code {
RadzenDropDownDataGrid> grid;
IEnumerable customers;
IEnumerable values = new string[] { "ALFKI", "AROUT" };
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
customers = dbContext.Customers;
}
}
```
### DropDownDataGrid virtualization with IQueryable event
Enable virtualization with `IQueryable` to efficiently handle large datasets by loading items on demand.
```razor
@inherits DbContextPage
@code {
string value;
IEnumerable customers;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
customers = dbContext.Customers.ToList();
}
}
```
### DropDownDataGrid virtualization with LoadData event
Combine virtualization with the `LoadData` event for custom data loading with large datasets.
```razor
@inherits DbContextPage
@code {
IEnumerable customers;
string value = "NORTS";
int count;
string lastfilter;
async Task LoadData(LoadDataArgs args)
{
await Task.Yield();
var query = dbContext.Customers.AsQueryable();
if (!string.IsNullOrEmpty(args.Filter) && lastfilter != args.Filter)
{
args.Skip = 0;
}
if (!string.IsNullOrEmpty(args.Filter))
{
lastfilter = args.Filter;
query = query.Where(c => c.CustomerID.ToLower().Contains(args.Filter.ToLower()) || c.ContactName.ToLower().Contains(args.Filter.ToLower()) || c.CompanyName.ToLower().Contains(args.Filter.ToLower()));
}
if (!string.IsNullOrEmpty(args.OrderBy))
{
query = query.OrderBy(args.OrderBy);
}
count = await Task.FromResult(query.Count());
customers = await Task.FromResult(query.Skip(args.Skip.HasValue ? args.Skip.Value : 0).Take(args.Top.HasValue ? args.Top.Value : 10).ToList());
// Load selected items if outside of visible range
if (!string.IsNullOrEmpty(value) && !customers.Any(c => c.CustomerID == value))
{
var selected = await Task.FromResult(query.Where(c => c.CustomerID == value));
customers = customers.Concat(selected);
}
}
}
```
### Control DropDown's DataGrid Density with Density parameter
Use the `Density` property to control the spacing and compactness of rows in the dropdown grid.
```razor
@inherits DbContextPage
@code {
string value = "Around the Horn";
IEnumerable companyNames;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
companyNames = dbContext.Customers.Select(c => c.CompanyName).Distinct();
}
}
```
### DropDownDataGrid binding to dynamic data
Bind the DropDownDataGrid to dynamic data sources where columns and data are determined at runtime.
```razor
@inherits DbContextPage
@string.Join(", ", columns.Where(c => c.Value == typeof(string)).Take(grid.MaxSelectedLabels).Select(c => context[c.Key]))
@foreach (var column in columns)
{
@context[@column.Key]
}
@code {
RadzenDropDownDataGrid> grid;
IDictionary selectedItem;
public IEnumerable> data { get; set; }
public IDictionary columns { get; set; }
public enum EnumTest
{
EnumValue1,
EnumValue2
}
void OnChange(object value)
{
selectedItem = (IDictionary)value;
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
columns = new Dictionary()
{
{ "EmployeeID", typeof(int) },
{ "MyColumn", typeof(EnumTest) },
{ "FirstName", typeof(string) },
{ "LastName", typeof(string) },
{ "HireDate", typeof(DateTime) },
};
foreach (var i in Enumerable.Range(0, 50))
{
columns.Add($"Column{i}", typeof(string));
}
data = Enumerable.Range(0, 100).Select(i =>
{
var row = new Dictionary();
foreach (var column in columns)
{
row.Add(
column.Key,
column.Value == typeof(EnumTest)
? (i % 2 == 0 ? EnumTest.EnumValue1 : EnumTest.EnumValue2)
: column.Value == typeof(int)
? i
: column.Value == typeof(DateTime)
? DateTime.Now.AddMonths(i)
: $"{column.Key}{i}"
);
}
return row;
});
}
}
```
### DropDownDataGrid Sizes
Use the `InputSize` property to set the DropDownDataGrid size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
```razor
@inherits DbContextPage
@code {
string value = "Around the Horn";
IEnumerable companyNames;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
companyNames = dbContext.Customers.Select(c => c.CompanyName).Distinct();
}
}
```