Serverfiltering is not sending text after selecting an item from MultiColumnComboBox component

[Petr]

Hi,

on your demo page for ASP.NET Core MultiColumnComboBox Server Filtering when I enter Ali, then a request is sent to the server with querystring text=Ali and two records are shown.

When I click on one of the records and then expand the combox box again using the down arrow, then another request is send to the server but with empty text, so all records are returned.

This is problem when server contains a lot of records.

Is there a way how to send to the server the text shown in the input field? I need it to show just the one record like if I just entered the text in the field manually.

Regards,

Petr

[Anton Mironov]

Hello Petr,

Thank you for the details provided.

Yes, you are totally correct - this behavior is expected and built-in by design.

In order to achieve the desired behavior, I would recommend implementing a custom manual filtering. Here is an example:

1. Use the "Data" method of the Read declaration in the DataSource.
2. The Data Method will execute a JavaScript function.
3. From the JavaScript function, return the value of the input in the MultiColumnComboBox.
4. This value will be sent as a parameter to the Read Action Method in the Controller.
5. Receive the parameter from point 4 to filter the collection of the dataItems.
6. Return the filtered collection as a DataSource.
7. For handling the changing of the input value, use the "Change" Event of the MultiColumnComboBox.
8. In the Event handler, force the dataSource of the MultiColumnComboBox to "read".
9. Here is an example:
   

   // In the DataSource of the MultiColumnComboBox:
   read.Action("ServerFiltering_GetProducts", "Home").Data("getFilterData");
   
   // The getFilterData function:
       function getFilterData(){
           var text = $("#products").data("kendoMultiColumnComboBox").text();
   
           return{text: text};
       }
   
   // In the MultiColumnComboBox:
   .Events(e => e.Change("onChange"))
   
   // The Change Event handler:
       function onChange(){
           var multi = this;
   
           multi.dataSource.read();
       }
   
   // The Read Action Method in the Controller:
           public static List<Product> products = new List<Product>() { 
               new Product() { ProductID = 1, ProductName = "Test" },
               new Product() { ProductID = 2, ProductName = "Football" },
               new Product() { ProductID = 3, ProductName = "Cake" },
               new Product() { ProductID = 4, ProductName = "Car" },
           };
   
           public JsonResult ServerFiltering_GetProducts(string text)
           {
   
               List<Product> productsResult = products;
   
               if (!string.IsNullOrEmpty(text))
               {
                   productsResult = products.Where(p => p.ProductName.Contains(text)).ToList();
               }
   
               return Json(productsResult.ToList());
           }

Attached is a sample project that I prepared for the case. It implements the approach above.

Feel free to make the needed tests on your side and let me know if this achieves the desired result.

Kind Regards,
Anton Mironov
Progress Telerik

[Petr]

Hi Anton,

thank you for the clarification. Your solution really helped us.

Best Regards,

Petr

[Anton Mironov]

Hi Petr,

I am glad to hear that the solution achieved the desired result.

If further assistance or information is needed, do not hesitate to contact me and the Team.

Best Regards,
Anton Mironov