Planned
Last Updated: 18 May 2022 14:08 by ADMIN
Scheduled for 3.5.0
Manu
Created on: 27 Sep 2019 20:43
Category: UI for Blazor
Type: Feature Request
40
Multi-column combo box with load-on-demand

Blazor load on demand (as users keys in) combo-box with multi column

 

8 comments
ADMIN
Dimo
Posted on: 05 Jan 2022 08:17

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

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
ADMIN
Marin Bratanov
Posted on: 22 Nov 2021 19:00

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Axel
Posted on: 22 Nov 2021 05:16
Any news for an official multi-column combo box component?
ADMIN
Nadezhda Tacheva
Posted on: 03 Dec 2020 16:32

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Smiljan
Posted on: 01 Dec 2020 11:08

Hi,

are there any plans to create standalone multicolumn combo box for Blazor?

It would really be useful.

BR, Smiljan

ADMIN
Marin Bratanov
Posted on: 28 Mar 2020 14:07

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
ADMIN
Marin Bratanov
Posted on: 10 Feb 2020 15:45

Hello,

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

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 30 Sep 2019 08:40

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

 UI for Blazor