Dynatree multi - selection implementaion ala Windows style - javascript

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);
});

Related

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

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([]);
});

How to select multiple elements in RadEditor in ie11

I am working on an application based on ASP.NET, running in IE11.
One part of the application makes use of (Telerik) RadEditor to create a layout of several items. I am trying to implement a feature that allows a user to select multiple elements and then align them either vertically or horizontally. I've been told that this feature used to work sometime in the past, but stopped working when IE upgraded either from 9 to 10, or 10 to 11.
I can select (selection border shows up on all selected elements) multiple elements in the page (in the (Telerik) RadEditor content space) by holding control+clicking. My problem is that the editor can't find all the selected elements, but rather returns the first one.
Relevant (Javascript) code is:
var editor = $find("RadEditor1");
var theSelectionObject = editor.getSelection();
var tempElem = editor.getSelectedElement();
Both theSelectionObject and tempElem are references to a single object. How can I get a collection of ALL selected elements or otherwise determine which elements are selected to use in later code?
The IE version of the browser's execCommand method offers a MultipleSelection option which allows for the selection of more than one site selectable element at a time when the user holds down the SHIFT or CTRL keys. You can find more info at https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/hh801232(v%3dvs.85)#multipleselection
To fire this method via the RadEditor API do:
editor.get_document().execCommand('MultipleSelection', true, true);

Change default behavior on click for jstree

I am using jstree to create a tree without checkboxes. In such a tree a click selects one node of the tree and deselects all others. To select multiple nodes one has to do ctrl + click (as examplified by the jstree demo). Is there a way to change this default to the more similar to checkbox default, which is click to select, click again to deselect?
If you're ok with using checkboxes and your only reservation is the dependence on one another, try using the checkboxes plugin but set "three_state" to false.
From JSTree:
$.jstree.defaults.checkbox.three_state: a boolean indicating if checkboxes should cascade down and have an undetermined state. Defaults to true.

How to interact with a custom select box with CasperJS?

When I visit a nike.com store page (test URL listed below) with my Casper script, I'm unable to change the value of the 'skuAndSize' select element. I am verifying this by checking the screenshot that is made after the supposed change. The code I am using to do it is:
// Add to cart
casper.then(function() {
this.fillSelectors('form.add-to-cart-form', {
'select[name="skuAndSize"]' : '3857923:9'
}, false);
this.capture("test.png");
this.click('button#buyingtools-add-to-cart-button');
});
Is there a better way to be handling this?
TEST URL: http://store.nike.com/us/en_us/pd/mercurial-superfly-fg-soccer-cleat/pid-1531739/pgid-1481200
I've looked at your link and the select box is hidden. It is replaced with markup which changes the select box under the hood, but the connection between the select box and the custom markup is one way. When you change the select box with JS, the custom markup is not changed.
If you only want to test the add-to-cart functionality, you can just keep it like you have it, because on submit the underlying select box data is used.
If you want to recreate the user interaction then you have to explicitly click this (untested):
casper.thenClick(".exp-pdp-size-and-quantity-container > .exp-pdp-size-container")
.wait(100) // little time to open dropdown
.thenClick(x("//div[contains(#class,'exp-pdp-size-dropdown-container')]/ul/li[not(contains(#class,'exp-pdp-size-not-in-stock'))][3]"));
This should select the third available size by using the CasperJS XPath utility.

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);

Categories