Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Kendo UI Combobox custom filtering

Hello,

I would like to do custom filtering on kendo combobox in kendo grid, but can't get it worked. I can't use simple 'contains' filter from combobox as final version will filter on many fields in datasource.

Here is the code: http://cssdeck.com/labs/uoxyrr3jwn

When you enter into 'some product' cell it should: 1. open combobox 2. let enter some text and filter combobox selectlist with custom filter 3. after finishing it should save to grid dataitem selected id

User Gravatar

user2203

Posted May 22 2014 7:23 UTC

$25


  • Assigned To user2203
  • Solved
  • javascript
  • 12031 Views

7 Replies


Easy, use the sortable function!

Your Code:

 $("#grid").kendoGrid({
dataSource: gridDataSource,
                    pageable: true,    
                    height: 430,
                    toolbar: ["create"],
                    columns: [
                        { field:"DetailId",title:"Product Id" },
                        { field: "ProductId", title: "Product", width: "160px", editor: reasonComboEditor0, template: "#=ProductName#" },
                    ],
                    editable: true
                });

You need to add sortable: true, under pageable: true,

Replace your code with:

 $("#grid").kendoGrid({
dataSource: gridDataSource,
                    pageable: true,
                    sortable: true,
                    height: 430,
                    toolbar: ["create"],
                    columns: [
                        { field:"DetailId",title:"Product Id" },
                        { field: "ProductId", title: "Product", width: "160px", editor: reasonComboEditor0, template: "#=ProductName#" },
                    ],
                    editable: true
                });

Hope that helps!

Cheers!

User Gravatar

michaelmuxica

Posted May 22 2014 9:34 UTC

Hello, thanks for answer, but its not about grid, but combobox-list-dropdown filtering.

I need to filter items from list that dropsdown from combobox (edit mode in Product field) when user will type into it.

User Gravatar

user2203

Posted May 22 2014 10:08 UTC

you need a search function that will sort as you type?

A search function that has a dropdown when they type?

A dropdown function for when people start typing?

Your last sentence is unclear.

Is it that you want the user to be able to type in the product id and then use a dropdown to select the type?

User Gravatar

michaelmuxica

Posted May 22 2014 10:18 UTC

I need to fix dropdown filter behaviour.

Normally Kendo Combobox can filter as you type when filter is set to one of 3 options: startswith, endswith or contains.

But I can't use standard behaviour as they with these options I can't use custom defined filter.

So I need to filter it with some other custom function.

so... when user will type name of product I want combobox-dropdown to contain only items that match that name - now this functionality is broken, try to type some characters in edit mode

User Gravatar

user2203

Posted May 22 2014 10:27 UTC

There are two solutions I think would work.

(1) use a "server" DataSource, and define a transport to your clientside data. See http://stackoverflow.com/questions/12560736/kendo-ui-autocomplete-datasource-transport-reads-only-once

(2) Create a datasource and set your own filter function.

datasource = kendo.data.DataSource.create({data: []}); datasource.filter = function(filterObject) { var myrecords = [some array of data calculated based on filterObject.value];
this.data(myrecords); };

User Gravatar

MorrisJohns

Posted May 23 2014 17:02 UTC

Just, Received answer from Telerik team which is great.

The combobox doesn't have a "filters" option thus setting it will have no effect. Currently the combobox filters only over one field - the one specified via the dataTextField option. You have to extend the combobox in order to override the filtering behavior: http://trykendoui.telerik.com/@korchev/ObOw

Here is the relevant code:

function reasonComboEditor0(container, options) {
  var combo = $('<input name="' + options.field + '" style="width: 100%" />')
  .appendTo(container).kendoMultiFilterComboBox({
            autoBind: false,
            dataSource: dataSource,
            optionLabel: "Select...",
            dataTextField: "WarehouseProductName",
            dataValueField: "ProductId",
            filter: "contains",
            delay: 1
        });
  }

  kendo.ui.plugin(kendo.ui.ComboBox.extend({
    options: {
      name: "MultiFilterComboBox"
    },
    _filterSource: function() {
      this.dataSource.filter({
        logic: "or",
        filters: [
          { field: "WarehouseProductName", operator: "contains", value: this.text() },
          { field: "SupplierProductName", operator: "contains", value: this.text() }
        ]
      });
    }
  })
);
User Gravatar

user2203

Posted May 26 2014 12:50 UTC

Solution

This didn't solve your task? Get your own custom solution.

i need a search function that will sort as you type

User Gravatar

user5995

Posted Mar 20 2015 1:44 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions