I am generating several dropdown lists dynamically in a modal when the user clicks a button. The number of dropdownlists varies depending on the data associated with the button click. I want the user to be able to tab from field to field and have the list automatically open when the user tabs into the field. When the user clicks on the field I want it to toggle open or closed still though. Currently, I added an onFocus event

$('.js-k-item-dropdown').on('focus', function (evt) {
        let elementID = $(evt.target).find('input').attr('id');
        let dropdown = $(`#${elementID}`).data("kendoDropDownList");
        dropdown.open();
    });

This works when the user tabs to the field but when the user clicks on another dropdown list the list opens and closes immediately. How do I prevent this behavior?

Hi,

I have a grid with transport.read.data specified to a javascript function to call. This isn't working as it doesn't ever call the function in javascript. Any help here would be great.

            $("#mailingListGrid").kendoGrid({
                dataSource: {
                    autoBind: false,
                    transport: {
                        read: "@Url.Action("GetCustomersJson", "MailingList")",
                        type: "jsonp",
                        data: additionalData
                    },
                    pageSize: 40,
                    schema: {
                        id: "KeyCustomer",
                        model: {
                            fields: {
                                CustomerName: { field: "CustomerName", type: "string" },
                                CustomerContact: { field: "CustomerContact",type: "string" },
                                ShipAddress1: { field: "ShipAddress1",type: "string" },
                                ShipCity: { field: "ShipCity",type: "string" },
                                ShipState: { field: "ShipState",type: "string" },
                                ShipZipCode: { field: "ShipZipCode",type: "number" },
                                IsShipTo: { field: "IsShipTo",type: "number" },
                                IsBillTo: { field: "IsBillTo",type: "number" },
                                KeySalesOrg: { field: "KeySalesOrg",type: "number" },
                                KeySendBillsTo: { field: "KeySendBillsTo",type: "number" },
                                DoubleUnitsBooked: { field: "DoubleUnitsBooked",type: "number" },
                                SingleUnitsbooked: { field: "SingleUnitsBooked",type: "number" }
                            }
                        }
                    }
                },
                height: 550,
                sortable: true,
                noRecords: {
                    template: "Please Select a Name to continue"
                },
                pageable: true,
                selectable: false,
                columns: [{
                    template: "<div" +
                    "style='');'><input class='checkboxSelector' type=\"checkbox\"/></div>",
                    field: 'field', headerTemplate: "<input id='checkboxHeader' onclick='checkAll()' type='Checkbox'/>",
                    width: 50,
                    sortable: false,
                }, {
                    field: "CustomerName",
                    title: "Customer Name",
                    width: 240
                }, {
                    field: "ShipAddress1",
                    title: "Address"
                }, {
                    field: "ShipCity",
                    title: "City"
                }, {
                    field: "ShipState",
                    title: "State",
                    width: 150
                }, {
                    field: "ShipZipCode",
                    title: "Zip Code"
                }],
                change: function (e, args) {
                    var grid = e.sender;
                    var items = grid.items();
                    items.each(function (idx, row) {
                        var idValue = grid.dataItem(row).get(idField);
                        if (row.className.indexOf("k-state-selected") >= 0) {
                            selectedOrders[idValue] = true;
                        } else if (selectedOrders[idValue]) {
                            delete selectedOrders[idValue];
                        }
                    });
                },
                dataBound: function (e) {
                    var grid = e.sender;
                    var items = grid.items();
                    var itemsToSelect = [];
                    items.each(function (idx, row) {
                        var dataItem = grid.dataItem(row);
                        if (selectedOrders[dataItem[idField]]) {
                            var currentRow = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
                            currentRow.toggleClass('k-state-selected');
                            currentRow.find('input:checkbox').prop('checked', 'checked');

                            itemsToSelect.push(row);
                        };
                    });

                    //e.sender.select(itemsToSelect);
                },
            });

        function additionalData() {
            var value = $("#dsmList").data("kendoDropDownList").value();
            return { dsm: value };
        };

Not sure what exactly is going wrong here. Any help is appreciated.

Fails to compile on using the simplest of grid implementations as follows. (But the same works on a react JS implementation)
The attached image has a screen shot of the implementation.
Code is as follows for the react component.

Throws the following error:

./src/components/projects/ProjectsPage.tsx
Cannot find file: 'main.js' does not match the corresponding name on disk: '.\node_modules\@Progress\kendo-react-grid\dist\es\@progress'.

When I dig into the node modules' directory that its claiming to throw the error from,

looks like this
.\node_modules\@Progress\kendo-react-grid\dist\es\main.js

it doesn't apparently contain any directory called @progress inside of the es (.\node_modules\@Progress\kendo-react-grid\dist\es\@progress)

FYI: I also am a licensed developer. 

Is this something to do with the licensing of the kendo UI by any chance?

My package.json is as follows:

Does the css data binding work with kendo buttons? 

<button type="button"
aria-label="Thumbs up"
data-role="button"
data-bind="events: { click: thumbsUp }, css:{k-state-active: isThumbsUp}">
<i class="icon-thumbs-up icon-large"></i>
</button>

I have been struggling to understand a data-bind behavior of a dropdownlist control. I bound the source to an observable array of objects (with Text and Field properties). I want to bind the data-text-field to the Text property of the object and data-value-field to the object itself (not to it's Value property).

I tried several options:

Option1:

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="this"></select>

SelectedValue is the whole object as a string "[object Object]". Not what I want.

Option2:

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="this"></select>

SelectedValue is Text property of the bound object. Not what I want.

Option3:

https://jsfiddle.net/jakubjenis/z1o3L6hd/17

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="Value"></select>

Weirdly enough this works. SelectedValue is the whole bound object (with Text and Value properties), but why? This should bind the Value property of the bound object, not the object itself.

Could you please explain what the correct way to set the data-value-field is so that the value field is bound to the whole object? 

Thanks,
Jakub

Hi, 

To expand on my title a bit, I have a Upload widget which doesnt allow multiple files, and validates that uploaded documents are pdf's under 4Mb.

The problem is that when a new file is uploaded to replace the existing one, the Upload widget will make a call to delete the existing document, ONLY THEN will it validate the new one. How can I trigger the validation before the delete? This would prevent my users from inadvertently deleting the previous document, if the new one is not valid.

Thanks,
Grant

Background

I have a Kendo autocomplete that should display a list of "recently searches" on focus. To accomplish this, I wired up a focus event, where I autocomplete.search(''). This reliably displays the default list (whole list on local datasource and whatever my server returns on empty string with a remote datasource). However, we also wish to enable the suggest option, so upon focus, the autocomplete empty searches, and suggests the first option.

IE 11 Issue
This is where the first issue occurs. On IE11, our first search is triggered, and does as anticipated (shows list, and suggests the first option). However, a second search is also fired, but uses the suggestion as the search criteria.

This can be demonstrated in an isolated Dojo: https://dojo.telerik.com/ekIXopar by selecting the autocomplete input.

All Browsers Issue - Search Triggered by Modifier Keys

On all browsers, even non-IE11, pressing modifer keys (eg: ctrl, shift, caps-lock, etc...) will immediately trigger a search with whatever is in the textbox (including suggestions). This causes issues when combined with the suggest is true. The real-world use case for this was having our users go to paste in something:

1. The focus search and suggest fills in the textbox with the first search result
2. The user presses ctrl in preparation to ctrl-v paste.
3. Between ctrl and v, the autocomplete will trigger another search with the now suggested text as criteria, thus narrowing the result to only the 1, AND offsetting the selection by 1 at the start of the text (ie: all but the first letter is highlighted).
4. When the user finishes the paste, the result is the first letter of the original suggestion and whatever they pasted.

This can also be demonstrated in the above dojo. Simply select the input and press and release the ctrl button. You should immediately see the first character get unselected, and "Albania" should become the only auto-suggestion result.

Possible Causes

Digging into the Kendo AutoComplete source, the keydown listener is picking up the control key as it's own keydown. From here, we have some if/elses that perform certain logic such as moving the selection up/down. However, our example of ctrl (keycode 17), falls into the else logic, which triggers a search based on the input value.

Possible Solutions

1. If I put the focus listener before the autocomplete call, I remove the initial issue... however, the fundamental issue with modifier keys triggering searches remains. This is problematic as pressing control (and other modifier keys), imho, shouldn't directly change the user's search results.

2. Add additional listeners to filter our these keys before the kendo autocomplete init, and stop the events from getting to kendo (stopImmediatePropagation). May introduce some other issues...

Question

Is there a solution to the IE11 bug? And for modifier searches, is there better work-arounds, or is this something that Kendo could address in an update?