Demos About Radzen
Search Results for

    Show / Hide Table of Contents

    DropDownDataGrid component

    This article demonstrates how to use the DropDownDataGrid component.

    Get and set the value

    As all Radzen Blazor input components the CheckBoxList has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input. The TValue property should be set to the Value property type.

    Data-binding

    To display data in DropDownDataGrid component you need to set collection of items (IEnumerable<>) to Data property. Optionally you can set TextProperty to the string property name of the item in the collection and ValueProperty to the property name with unique values in the collection or define collection of RadzenDataGridColumn in Columns.

    Binding to simple collection

    <RadzenDropDownDataGrid TValue="string" Data=@(customers.Select(c => c.CompanyName).Distinct()) Change="@OnChange" />
    
    @code {
        IEnumerable<Customer> customers;
    
        protected override void OnInitialized()
        {
            customers = dbContext.Customers.ToList();
        }
    
        void OnChange(object value)
        {
            var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;
    
            Console.WriteLine($"Value changed to {str}");
        }
    }
    

    Binding to list of objects

    <RadzenDropDownDataGrid TValue="string" Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID" Change="@OnChange" />
    
    @code {
        IEnumerable<Customer> customers;
    
        protected override void OnInitialized()
        {
            customers = dbContext.Customers.ToList();
        }
    
        void OnChange(object value)
        {
            var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;
    
            Console.WriteLine($"Value changed to {str}");
        }
    }
    

    Binding using LoadData event with filtering.

    <RadzenDropDownDataGrid TValue="string" Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID" LoadData=@LoadData AllowFiltering="true" />
    
    @code {
        IEnumerable<Customer> customers;
    
        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()));
            }
    
            customers = query.ToList();
    
            InvokeAsync(StateHasChanged);
        }
    }
    

    Virtualization using IQueryable.

    <RadzenDropDownDataGrid TValue="string" AllowVirtualization="true" AllowFiltering="true" Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID" />
    
    @code {
        IEnumerable<Customer> customers;
    
        protected override void OnInitialized()
        {
            customers = dbContext.Customers.ToList();
        }
    }
    

    Virtualization using LoadData event.

    <RadzenDropDownDataGrid TValue="string" AllowVirtualization="true" LoadData=@LoadDataVirtualization AllowFiltering="true" Count="@count"
                                    Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID" />
    
    @code {
        IEnumerable<Customer> customers;
    
        void LoadDataVirtualization(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();
    
            customers = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
    
            InvokeAsync(StateHasChanged);
        }
    }
    

    Columns

    Define columns in Columns tag.

    <RadzenDropDownDataGrid TValue="string" Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID">
        <Columns>
            <RadzenDropDownDataGridColumn Property="CustomerID" Title="CustomerID" Width="100px" />
            <RadzenDropDownDataGridColumn Property="CompanyName" Title="CompanyName" Width="200px" />
            <RadzenDropDownDataGridColumn Property="City" Title="City" Width="100px" />
            <RadzenDropDownDataGridColumn Property="Country" Title="Country" Width="100px" />
        </Columns>
    </RadzenDropDownDataGrid>
    
    @code {
        IEnumerable<Customer> customers;
    
        protected override void OnInitialized()
        {
            customers = dbContext.Customers.ToList();
        }
    }
    

    Filtering

    Use AllowFiltering, AllowFilteringByAllStringColumns, FilterCaseSensitivity and FilterOperator properties to allow and control filtering.

    <RadzenDropDownDataGrid TValue="string" Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID" 
        AllowFiltering="true" AllowFilteringByAllStringColumns="true"
        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith">
        <Columns>
            <RadzenDropDownDataGridColumn Property="CustomerID" Title="CustomerID" Width="100px" />
            <RadzenDropDownDataGridColumn Property="CompanyName" Title="CompanyName" Width="200px" />
            <RadzenDropDownDataGridColumn Property="City" Title="City" Width="100px" />
            <RadzenDropDownDataGridColumn Property="Country" Title="Country" Width="100px" />
        </Columns>
    </RadzenDropDownDataGrid>
    
    @code {
        IEnumerable<Customer> customers;
    
        protected override void OnInitialized()
        {
            customers = dbContext.Customers.ToList();
        }
    }
    

    Multiple selection

    Bind Value property and use Multiple property to control if selection is multiple or not.

    <RadzenDropDownDataGrid @ref="grid" @bind-Value=@multipleValues Multiple="true"  
                            Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID"
                            Change=@OnChange Style="width:100%">
        <Columns>
            <RadzenDropDownDataGridColumn Width="40px" Sortable="false">
                <HeaderTemplate>
                    <RadzenCheckBox TriState="false" TValue="bool" Value="@(customers.Any(c => multipleValues != null && multipleValues.Contains(c.CustomerID)))"
                                    Change="@(args => multipleValues = args ? grid.View.Cast<Customer>().Select(c => c.CustomerID) : multipleValues = Enumerable.Empty<string>())" />
                </HeaderTemplate>
                <Template Context="data">
                    <RadzenCheckBox TriState="false" Value="@(multipleValues != null && multipleValues.Contains(((Customer)data).CustomerID))" />
                </Template>
            </RadzenDropDownDataGridColumn>
            <RadzenDropDownDataGridColumn Property="CustomerID" Title="CustomerID" Width="100px" />
            <RadzenDropDownDataGridColumn Property="CompanyName" Title="CompanyName" Width="200px" />
            <RadzenDropDownDataGridColumn Property="City" Title="City" Width="100px" />
            <RadzenDropDownDataGridColumn Property="Country" Title="Country" Width="100px" />
        </Columns>
    </RadzenDropDownDataGrid>
    
    @code {
        IEnumerable<Customer> customers;
        IEnumerable<string> multipleValues;
    
        protected override void OnInitialized()
        {
            customers = dbContext.Customers.ToList();
        }
    
        void OnChange(object value)
        {
            var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;
    
            console.Log($"Value changed to {str}");
        }
    }
    

    Boost your Blazor development with Radzen

    Radzen is a desktop tool that gives you the power to create line of business applications. Build and launch Blazor apps visually, while we generate clean code for you.

    Learn More

    Download Radzen
    Download Radzen
    In This Article
    Back to top Radzen Blazor Components, © 2018-2022 Radzen. Source Code licensed under MIT