Kendo UI Combobox doesn't trigger read when dropdown arrow is clicked - javascript

I have a Kendo UI ComboBox with serverfiltering set to true and autobind to false. I want it to behave like the following:
1) On page load doesn't load anything.
2) When the user writes some text, server filtering is performed and results are displayed.
3) When the user click dropdown, load all items regardless of filtering and display them.
The issue is that in earlier versions of KendoUI, the combobox worked like the above with the right configuration, but in newer versions, entering some text and clicking on the dropdown does not trigger a read and thus only show items matching the filter.
Reproduce
See the following example: https://dojo.telerik.com/ATEWEmuz
1) Select newest version of the Kendo UI framework at "Choose Library"
2) Click the combobox
3) Write j and wait a bit, then click outside the combobox
4) Click the dropdown arrow
Result in earlier versions vs result in current version:
Is there a way to tell kendo to reload all data when I click on dropdown via configuration? I tried binding the ondown event on the arrow to a datasource read command, but that resulted in other weird behavior.

If you log the read actions
var ret = ["John", "Candice", "Scott", "Rejer"];
console.log(ret);
console.log(filter);
You will see that older libraries read with no filter during open event. The newest library does not perform a read during open.
This could be related to https://github.com/telerik/kendo-ui-core/issues/3926, or it could be the behavioral contract changed.
To revert to prior behavior you can remove the filters in the combobox blur event handler.
var kendoControl = $("#box").data("kendoComboBox");
$("#box").blur(function(e) {
kendoControl.dataSource.filter([]);
});

Related

Kendo UI bind drop down value from PopupEditor

I have a Kendo Grid which has an option to add a new record using the Popup Editor.
One field from the popup editor is a DropDownList. I have the first record from the dropdown list pre-selected when I open the Popup Editor. Since I pre-selected it, I would like it to be automatically created (bound) within the grid (when pressing "Update") without having to manually select it again.
I have the example script here
Working script: https://dojo.telerik.com/OFinidew/28
Here's a few things that are useful to know:
1. Defining schemas for your dataSources
A schema is a way to define what structure to expect from your data. When a schema is defined, your data will be "bound". As much as possible you'll want to bind your data, because as a last resort you'll end up having to use templates. Normally, Kendo UI will try to figure things out and get things bound automatically, but in special cases you'll have to give it a schema. This is one of those cases.
From the code sample, it seems like the approach of the workaround was to try change the "edit" event of the kendoGrid to immediately select the "Processing" status - Instead, you can define the "Processing" status (value "2") as the defaultValue of the "status" field in your model. But then, you'll need to make sure your custom editor template CAN be bound to, which leads us to..
2. Using the HTML property: data-bind="value:(nameOfYourField)"
When you're making your own editor templates for the kendo popup, it has no way of knowing what part of your HTML to bind to. See the statusDropdownEditorTemplate in the link provided as an example of how this is done.
3. What valuePrimitive means
Normally, a kendoDropDownList will return an object containing both the Text and Value of the selected choice. But this is not what we want in this case, because status is defined as "0", "1", "2" - so we just wanted the value. When you set valuePrimitive to true, you're instructing the kendoDropDownList to only return the value itself, not an object containing everything.

Preserve selection after clicking a custom button in tinyMCE issue

Here is my issue :
I have a custom button with a code onClick. This code modify the selection's parent node, and I would like that my selection stays the same after my code, but tinyMCE disable my selection and give me a caret instead.
I tried getRng() and setRng from tinyMCE API but without success, the results are pretty odd. Sometimes it works and sometimes it deactivate my selection and give me a caret instead. Plus, sometimes it works only 2 times and then my button does not respond.
Here is my code which does not work:
onclick : function() {
range_selection = tinymce.activeEditor.selection.getRng();
//Here is my own code which modify my parent node
tinymce.activeEditor.selection.setRng(range_selection);
}
Problem here is that this range is probably not applicable anymore because of a changed DOm structure. I would use a bookmark to overcome this issue:
var bookmark = ed.selection.getBookmark();
// do what you like to do here
ed.selection.`moveToBookmark`(bookmark);

How to manually focus/highlight an item in jQuery UI Autocomplete?

I am using jQuery UI 1.10.2 and I would like to manually highlight/focus an item in the list. Basically, I am trying to achieve a HTML select-like behavior:
All the results from source should always be shown
When typing in the inout field, the best match should be highlighted, the list should NOT be filtered
When the user selects an item, the suggestion list is closed. When the user focuses on the input, the suggestion list should be opened and the selected value should be highlighted.
I can successfully open the suggestion list on input focus and not filter the result list, but I am having a bit of hard time figuring out how to manually highlight/focus the selected element when autocomplete suggestion list is opened and while typing - I am able to find the matching item, but don't know how to "activate" it.
I have tried this:
open: function() {
// Find the selected menu item...
var $menuEl = ...
$(this).data("uiAutocomplete").menu.focus(new $.Event("mouseover"), $menuEl );
}
But it doesn't seem to work.
It seems that passing null instead of an event makes it work:
$(this).data("uiAutocomplete").menu.focus(null, $menuEl );
FWIW: I created the Event because an older version of jQuery UI Menu required it. It seems that the UI Menu has changed considerably since then.

Populate chained select menu

I am working on a chained select menu, which you can see here - http://jsfiddle.net/stocktrader/EhUKJ/. I have it coded so that the "country" selection changes the "state/zip/city" options via show/hide. All of that is working well.
But my problems is that this form is also used for updating this information for each person. And when I populate the form with current data, I can't get the correct show/hide settings to trigger based on the country setting. You can see an example in the current fiddle where I pre-selected "United States", but the "city/state/zip" options don't come up. The DO come up if you click to a different country and then back on.
I attempted to write some JavaScript that would change the populated show/hide settings by retrieving the "country" value but I don't know JavaScript at all. I tried the below code, which is in the fiddle, but I doubt it is even close.
var s = document.getElementById('country');
var item1 = s.options[s.selectedIndex].value;
function cty()
{
if (item1 == 'group1')
unhide('.group1_opts');
}
When you bind a function to any of the event handlers in jQuery - simply calling the handler a second time without a parameter will trigger it's execution.
Eg. $('select').change(); will run the "change group" function you applied to it - In this case any "pre-selected" options will be processed.
updated your fiddle

Dynatree multi - selection implementaion ala Windows style

I would like to implement windows style multi-selection:
when user holds CTRL key and selects several nodes of the tree.
Dynatree (from here http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html) by default has checkboxes for node selection which my client doesn't seem to like.
My question is, is it possible to implement what I need using provided set of callbacks?
also, curently, when I hold CTRL key and click on the node, it opens a new window.
Is there any way to suppress this functionality? i am guess I would have to do through CSS?
Have a look at the sample and source code here
http://wwwendt.de/tech/dynatree/doc/sample-select.html
The last example on that page uses the checkbox: false tree option to hide the checkboxes.
The onClick handler calls dtnode.toggleSelection().
This could be replaced by something like
if not CTRL pressed:
deselect all nodes
toggle selection
Desecting all nodes could be done like this:
tree.visit(function(dtnode) {
dtnode.select(false);
});

Categories