Hi all,

Nadezhda's post from December 3 shows how to achieve similar look and feel to an actual Grid inside a DropDownList. It relies on HTML that mimics a DropDownList and a Grid component inside an AnimationContainer.

For the sake of completion, I am posting one more example here. The difference is that it uses an actual ComboBox / DropDownList with a templates that mimic a Grid. This example enhances the older ones in this thread in the following ways:

1. It enables Filterable. This will make the ComboBox trigger additional data requests and remove non-matching items from the dropdown when the user types something.
2. Uses an OnRead event. This will allow you to filter (search) by multiple data fields ("columns") at the same time. (By default, the ComboBox filters only by the TextField.)
3. The OnRead handler extracts the search string from the first item in args.Request.Filters. Note that if there is no active filter, args.Request.Filters will be an empty collection.
4. Implements custom programmatic filtering in the OnRead event handler, based on the search string. You will need one CompositeFilterDescriptor with FilterCompositionLogicalOperator.Or. The composite descriptor should contain as many FilterDescriptors as the number of data fields ("columns") you want to search in.

Regards,
Dimo
Progress Telerik

Hi Axel,

The best way to get news of updates is to click the Follow button. We keep the portal in sync with the codebase, so when this gets implemented you will receive an email that it was completed, and the release number it is in.

Regards,
Marin Bratanov
Progress Telerik

Hi Smiljan,

I also consider MultiColumnComboBox a very useful component to work on. I can see that its feature request is gradually gathering popularity over the community.

You can also click on the follow button (if you haven't yet) to be notified on status change. That's the best way to know when it gets implemented - when we know the release that will contain it, this information will be added to the Feedback Portal page.

In the meantime, I'm attaching a couple of examples that I've created as workarounds for DropDown with Grid and DropDown with TreeList. Both are developed using an Animation container. They could be useful in your scenario.

Regards,
Nadezhda
Progress Telerik

Here is a basic example of creating a layout with columns through the templates:

<style>
    .header-container {
        display: flex;
        align-items: center;
        padding: 3px calc( var(--kendo-scrollbar-width,17px) + 8px ) 3px 8px;
        gap: 4px;
        font-weight: bold;
    }
    .my-column{
        width: 33%;
    }
</style>

<TelerikComboBox @bind-Value=@SelectedValue
                 Data="@ComboBoxData"
                 ValueField="ProductId"
                 TextField="ProductName">
    <ItemTemplate>
        @{
            Product item = context as Product;
            <div class="my-column">@item.ProductId</div>
            <div class="my-column">@String.Format("{0:C2}", item.UnitPrice)</div>
            <div class="my-column">@item.ProductName</div>
        }
    </ItemTemplate>
    <HeaderTemplate>
        <div class="header-container">
            <div class="my-column">Id</div>
            <div class="my-column">Price</div>
            <div class="my-column">Name</div>
        </div>
    </HeaderTemplate>
</TelerikComboBox>

@code {
    public IEnumerable<Product> ComboBoxData { get; set; }
    public int SelectedValue { get; set; } = 2;

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 1; i < 10; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = $"Product {i}",
                UnitPrice = (decimal)(i * 3.14)
            });
        }

        ComboBoxData = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

Hello,

Whlie not an out-of-the-box feature yet, you can implement this through:

• the OnRead event to get the load-on-demand (custom filtering): https://docs.telerik.com/blazor-ui/components/combobox/events#onread
• the ItemTemplate to put a few columns of information in each item: https://docs.telerik.com/blazor-ui/components/combobox/templates

Regards,
Marin Bratanov
Progress Telerik

Hi Manoj,

Would an autocomplete with a template suit your needs, something like this jQuery widget: https://feedback.telerik.com/blazor/1413657-autocomplete-component? If so, I'd suggest adding your Vote and Following this page (although I suspect you already are, I am adding it here for anyone else in the same boat): https://feedback.telerik.com/blazor/1413657-autocomplete-component.

A standalone multicolumn combo box is a component that arrives in a much more mature suite and so it would definitely be further down the road than an autocomplete. Nevertheless, I am keeping the request open so you can Follow it (I just tweaked the name a little).

In the meantime, you can try filtering a grid through an external textbox in a fashion similar to this demo: https://demos.telerik.com/blazor-ui/treeview/manual-filtering. That is, of course, in case the built-in filtering options of the grid don't suffice for your current need: https://docs.telerik.com/blazor-ui/components/grid/filtering.

Regards,
Marin Bratanov
Progress Telerik