DevExpress v24.2 Update — Your Feedback Matters
Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.
Take the survey
Not interested
DxDropDownEditSettings.DropDownDirection Property
Specifies the direction in which the drop-down window is displayed in relation to the editor’s input element.
Namespace : DevExpress.Blazor
Assembly :
DevExpress.Blazor.v24.2.dll
NuGet Package :
DevExpress.Blazor
# Declaration
# Property Value
Available values:
Name
Description
Down
A drop-down window is displayed below an editor’s input element.
Up
A drop-down window is displayed up an editor’s input element.
Set this property to Up
to display the drop-down window above the editor’s input element.
Note
If the editor’s position within the browser viewport does not leave enough space to display the drop-down window in the specified direction, the drop-down window is displayed in the opposite direction instead.
The following code snippet displays the drop-down window above a combo box editor’s input element:
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
<DxGrid Data ="Products"
EditMode ="GridEditMode.EditRow" >
<Columns >
<DxGridCommandColumn />
<DxGridDataColumn FieldName ="CategoryId" Caption ="Category" >
<EditSettings >
<DxComboBoxSettings Data ="Categories"
ValueFieldName ="CategoryId"
TextFieldName ="CategoryName"
DropDownDirection ="DropDownDirection.Up" />
</EditSettings >
</DxGridDataColumn >
<DxGridDataColumn FieldName ="ProductName" Width ="25%" />
<DxGridDataColumn FieldName ="UnitPrice" />
<DxGridDataColumn FieldName ="UnitsInStock" />
<DxGridDataColumn FieldName ="QuantityPerUnit" />
</Columns >
</DxGrid >
@ code {
NorthwindContext Northwind { get ; set ; }
List<Product> Products { get ; set ; }
List<Category> Categories { get ; set ; }
protected override async Task OnInitializedAsync ( ) {
Northwind = NorthwindContextFactory.CreateDbContext();
Products = await Northwind.Products.ToListAsync();
Categories = await Northwind.Categories.ToListAsync();
}
public void Dispose ( ) {
Northwind?.Dispose();
}
}
using Microsoft.EntityFrameworkCore ;
#nullable disable
namespace Grid.Northwind {
public partial class NorthwindContext : DbContext {
public NorthwindContext (DbContextOptions<NorthwindContext> options )
: base (options ) {
}
public virtual DbSet<Category> Categories { get ; set ; }
public virtual DbSet<Product> Products { get ; set ; }
protected override void OnConfiguring (DbContextOptionsBuilder optionsBuilder ) {
if (!optionsBuilder.IsConfigured) {
optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true" );
}
}
protected override void OnModelCreating (ModelBuilder modelBuilder ) {
modelBuilder.HasAnnotation("Relational:Collation" , "SQL_Latin1_General_CP1_CI_AS" );
modelBuilder.Entity<Category>(entity => {
entity.HasIndex(e => e.CategoryName, "CategoryName" );
entity.Property(e => e.CategoryId).HasColumnName("CategoryID" );
entity.Property(e => e.CategoryName)
.IsRequired()
.HasMaxLength(15 );
entity.Property(e => e.Description).HasColumnType("ntext" );
entity.Property(e => e.Picture).HasColumnType("image" );
});
modelBuilder.Entity<Product>(entity => {
entity.HasIndex(e => e.CategoryId, "CategoriesProducts" );
entity.HasIndex(e => e.CategoryId, "CategoryID" );
entity.HasIndex(e => e.ProductName, "ProductName" );
entity.HasIndex(e => e.SupplierId, "SupplierID" );
entity.HasIndex(e => e.SupplierId, "SuppliersProducts" );
entity.Property(e => e.ProductId).HasColumnName("ProductID" );
entity.Property(e => e.CategoryId).HasColumnName("CategoryID" );
entity.Property(e => e.ProductName)
.IsRequired()
.HasMaxLength(40 );
entity.Property(e => e.QuantityPerUnit).HasMaxLength(20 );
entity.Property(e => e.ReorderLevel).HasDefaultValueSql("((0))" );
entity.Property(e => e.SupplierId).HasColumnName("SupplierID" );
entity.Property(e => e.UnitPrice)
.HasColumnType("money" )
.HasDefaultValueSql("((0))" );
entity.Property(e => e.UnitsInStock).HasDefaultValueSql("((0))" );
entity.Property(e => e.UnitsOnOrder).HasDefaultValueSql("((0))" );
entity.HasOne(d => d.Category)
.WithMany(p => p.Products)
.HasForeignKey(d => d.CategoryId)
.HasConstraintName("FK_Products_Categories" );
});
OnModelCreatingPartial(modelBuilder);
}
partial void OnModelCreatingPartial (ModelBuilder modelBuilder ) ;
}
}
public partial class Product {
public Product ( ) {
OrderDetails = new HashSet<OrderDetail>();
}
public int ProductId { get ; set ; }
public string ProductName { get ; set ; }
public int ? SupplierId { get ; set ; }
public int ? CategoryId { get ; set ; }
public string QuantityPerUnit { get ; set ; }
public decimal ? UnitPrice { get ; set ; }
public short ? UnitsInStock { get ; set ; }
public short ? UnitsOnOrder { get ; set ; }
public short ? ReorderLevel { get ; set ; }
public bool Discontinued { get ; set ; }
public virtual Category Category { get ; set ; }
}
public partial class Category {
public Category ( ) {
Products = new HashSet<Product>();
}
public int CategoryId { get ; set ; }
public string CategoryName { get ; set ; }
public string Description { get ; set ; }
public byte [] Picture { get ; set ; }
public virtual ICollection<Product> Products { get ; set ; }
}
To change the direction at runtime, use the IDropDownEditSettings.DropDownDirection property.
See Also