Hi,

Following the example from: https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-filter-multiple-properties, I have implemented custom filtering on my kendo drop down list as follows:

$("#options").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
noDataTemplate: $("#noDataTemplate").html(),
filter: "contains",
dataSource: {
type: "odata-v4",
transport: {
read: function (options) {
$.ajax({
url: optionsURL,
dataType: "json",
success: function (result) {
options.success(result);
 },
error: function (result) {
console.log(result);
}
});
}
},
},
filtering: function (ev) {
var filterValue = ev.filter.value;
ev.preventDefault();
this.dataSource.filter({
logic: "or",
filters: [
{
field: "name",
operator: "contains",
value: filterValue
},
{
field: "address",
operator: "contains",
value: filterValue
},
{
field: "id",
operator: "contains",
value: filterValue
}
]
});
} });

I also have code implemented which allows the user to add a new item to the dropdown if it doesn't exist, using the no data Template. Here I perform a remote call to add the item server side and then I execute the following lines of code to refresh the drop down:

var dropdown = $("#options").data("kendoDropDownList");
dropdown.dataSource.read();

If the user has added a new item I want to set the selected value of the dropdown to the newly added item. To achieve this I have set a global flag 'addNew' = tru once the remote call which adds the new item has been successful. I also store, in a global variable, the id of the item just added. I have then plugged into the 'success' method of the datasource on the drop down and added the following lines:

if (addNew) {
var dropdown = $("#options").data("kendoDropDownList");
dropdown.value(newId);
}

However, when  executing my code crashed out at this line on the 'filtering' option: "var filterValue = ev.filter.value" because inb fact ev.filter is 'undefined'.

If I remove my custom filtering the dynamic select works perfectly and vice versa. Can the two exist together?

Many thanks

Hello, i have a dropdownlist, virtual mode (the real one is bound to 120K records).

The dropdownlist is bound to a property on a viewmodel.

After selecting an item in the dropdownlist the bound property value became "[object Object]" instead that being set to the value property of the dropdownlist's datasource item.

An example here: https://dojo.telerik.com/EbIbe

1) Looking at the example you'd see that initially the textbox and the dropdownlist are bound to the correct initial value that is "11" for the value property and "T11" for the text property.

2) After selecting an item on the dropdownlist the textbox value became "[object Object]" instead of having the text that is corresponding to the Value property of the selected dataitem.

tried with firefox 58.0.1, chrome 64.0.3282.140 and Microsoft Edge 41.16299.15.0

Any Idea what could be wrong with my case?

I have this table with a Row Filter. There is an "X" both in and after the filter input element used to clear content.

The following code can be used to remove both Xs, or you can comment out a line to remove one X.

dataBound: function (e) {
               this.element.find('.k-filtercell .k-autocomplete .k-clear-value').remove(); // remove X from input box
               this.element.find('.k-button-icon').remove(); // remove X button after input box
            },

The problem: even if you remove the X button after the input field, the space is not recovered. My table has a lot of fields and I do not have space for a redundant and completely unnecessary button.

The question: how can I remove the X button and get the space back? Even if I remove the button (code above), the input fields do not resize to fit the space available.

I am having trouble with a right-click context menu that contains multiple sub-menus.

When I hover with the mouse over the different submenus, the first sub-menu to open is opening fine, but when I move the mouse(without selecting anything from the first opened submenu) to the next submeny, this will cause the whole context-menu to close.

I have uploaded a video to demonstrate the problem:

https://www.youtube.com/watch?v=0TztKdJhVlI

Is this a known bug in the Kendo menu widget, or is this my fault?

Hello,

We use Kendo controls with AngularJS. If an user performs some search and then choose one of found items using keyboard, the Angular's model is not updated.

Steps to reproduce:

- open https://dojo.telerik.com/eledi

- select drop down and type 'item' in the input

- select one of found items using arrows buttons and press Enter

Result:

When Enter is pressed the 'close' event fired only.

'change' event is not fired and the model won't be updated.

See video https://www.screencast.com/t/ecce6h8EW for details.

As a temporary fix we trigger change event in 'close' handler:

                close: function (e) {
                    this.trigger('change');
                },
But this is not a good solution because each developer must remember about this issue.

Could you please provide more elegant workaround?

Thanks in advance!

I have a kendo grid and it has 18 columns including 3 locked. I have a sidebar in my application and wants to resize the grid when the side bar open/close. Grid not resizing when the sidebar open/close and cause mess. I guess it's happening because of fixed column width and locked columns. Please help to solve this.