Selecting checkbox in Kendo UI Treeview - kendo-ui

I am using Kendo UI tree view with checkboxes. My problem is when i am loading the tree i will be checking some checkboxes using javascript. But this is not selecting parent checkbox automatically. Do i need to do this manually or is there any option in the framework.
Thanks,
Raja

Lets assume that you want to select the node that is selected:
// Get the node that is selected
var selected = treeview.select();
// Find the checkbox associated with this node
var checkbox = $("input[type='checkbox']", selected)[0];
// Click on it for selecting it and its ancestors
checkbox.click();
Being treeview the result of creating kendoTreeView:
var treeview = $("#my_tree").kendoTreeView({...}).data("kendoTreeView");

If you check the nodes by adding the 'checked' attribute with JavaScript
e.g.
$('input').attr('checked','checked')
you will need to handle the parent checking manually. However if you simulate click the TreeView will update its state as it would do if you have used the mouse to click.
e.g.
$('input').click();
Keep in mind you need to call the click on the checkbox input not the span element wrapping it.

Kendo ui (html5) treeview the position is reset to the begining of the tree.
when i bind the many records in the tree . when i select the last node the treeview position is reset to the begining of the tree.
This problem arises only in IE(Internet Explorer 9). in firefox and chrome it is working fine .
The image 1 shows the page that treeview reset to begining of the tree after selecting the tree node at the last record.
the image 2 shows the page that treeview node is selected at the botom

Related

How can I "take control" of selecting TreeView items?

If you have a TreeView in a VS Code extension, when you click on the items in it, they get selected (highlighted green, in my color theme). Click away from them and they get un-highlighted. See the below screenshot, in the file explorer view:
I'd like to "take control" of this behavior. I want to disable the highlighting that happens by default when the user clicks on these items, disable the un-highlighting that happens when they click away, and control in my extension code when the items get highlighted. I'd like to do this in my extension's custom TreeView, not an existing one.
Use the 'reveal' method of the treeview item. You can specify if it's to be 'selected' and also 'focused'.
Basically, you can change to the structure you want by forcing a refresh of the whole treeview. You probably already know that if you started making treeview extensions for vscode...
But then, right as it finishes re-rendering the tree, you 'reveal' a node, with the 'select' parameter option, to have that node as the selection in the tree. ...To have another node selected, just 'reveal' another one. (no need to force a full refresh of the treeview if it's only to have another node selected without changing the structure of the tree.)
see the 'reveal' method of the treeview here treeview API
Also see the leointeg extension on vscode for actual code example of controlling which node is selected

Binding kendo UI tree view with kendo ui grid

I am trying to bind a kendo grid with data from tree view node click. So when user clicks on node 'A' of tree view then grid should get populated with data corresponding to that node.
1. How do I update the grid data while traversing through tree. I am reading data from an array.
2. Is there a way to just update the data without recreating grid or resetting the grid.?

Expand a node and two treeviews open

I have two kendo treeview.
When I do a drag and drop an item on an other, I duplicate the item. (no node is removed on drop)
treeright.append(itemSource, itemDestinationKitem);
and it's work fine.
When I click on item (just be drop) the node opens, BUT the itemSource too !
Thx
I found a way around the problem.
By duplicating items kendo ui widget does not regenerate new uid , so to expand a mirror effect occurs.
To solve this problem I SET again the datasource of treeview with call ajax the second treeview and new uid will be affected.
To be in the same state :
I just add persistence on items to keep the state of the nodes 'expand' before loading. This kendo link help me.

How to add an action to kendo ui combobox

I'm trying to add a button, like the k-select element, to the end of a Kendo combobox for adding new items but whatever i change the element the result is not consistent and fine with other elements.
kendo combobox generate this style for button to open the list.select
I want to find clear way to add an button to end of combobox like this link.
the template won't help becase it in control in in list.
tnx

Handsontable coloring cells using button

I want to allow the user to color selected cells by clicking a button (say, red, green and blue buttons).
To get the selected cells I found this code:
$('div#example1').handsontable(options);
//get the instance using jQuery wrapper
var ht = $('#example1').handsontable('getInstance');
//Return index of the currently selected cells as an array [startRow, startCol, endRow, endCol]
var sel = ht.getSelected();
//'alert' the index of the starting row of the selection
alert(sel[0]);
But I can't run this code when clicking a button, because the selection "disappear" after clicking and before the function starts to run.
I try following this instruction but I need a workaround this issue.
please add outsideClickDeselects: false, to your options in constructor and you can perform the 'ht.getSelected()' method.
How about using the afterSelectionEnd event to store the selection in a hidden field?
Then when pressing the button, you highligh/color the cells using the hidden selection info.
Would that work?

Resources