I am new to Kendo and I have a form that displays checkboxes that is 3 levels deep . The first level or root node contains a country, the 2nd node the state and the last node a city . They all have checkboxes next to them . I am trying to put a checkmark on the top root node if 1 or more children node gets a checkmark . This is my code
<div id="treeview"></div>
function CheckMark() {
var treeView = $("#treeview").data("kendoTreeView");
// This below is not working trying to checkmark the root node
$("#treeview .k-item:first").prop("checked", true);
}
.k-item can contain any item like li, div tags etc. So you have to specify .k-checkbox
$("#treeview .k-checkbox:first").prop("checked", true);
Related
I create a tree node component.
I want to make such a behavior of node in which, in the case of the parent node collapse, collapsed and children. If a parent expand again, children will be collapsed still. How to do this?
Code example: http://jsbin.com/wuxutaqona/1/edit?html,css,js,output
Parent Node could have an extra state called parentChangeToCollapsed, which is only set in titleClickHandle function to true when parent change from opened to collapse. Pass it to the child component by props in the map function.
In the child Node component, getInitialState() lifecycle. Do the following
getInitialState: function() {
if(this.prop.parentChangeToCollapsed){
return({hideChildren: true});
} else {
return({hideChildren: this.props.hideChildren});
}
}
I have a grid that has child grid for each item, when i add a new item to the main grid, there is a stub for the child (with the toolbar etc and an empty grid for the child), I would like to hide the child grid when adding new one, i know i need the edit event, i just dont know how to get reference to the detailgrid for the item that the row was just created for input.
edit event has e.sender, e.container, e.model, first 2 reference the main grid of course as the event is raised by the main grid
The required behavior is not supported out of the box, however you can for example attach click event handler to the expanding arrows in the Grid. In the event handler you can prevent the expanding if current model is new. Please check the example below:
//Change Employees with your grid name
//the grid should have model ID defined
$("#Employees table").on("click", ".k-hierarchy-cell a", function (e) {
dataItem = $("#Employees").data("kendoGrid").dataItem($(e.srcElement).closest("tr"));
//check if is new record
if (dataItem.isNew()) {
e.preventDefault();
e.stopImmediatePropagation();
}
})
UPDATE (as requested): The above code should be executed in script tag (wrapped in document "ready" event handler) which is placed just after the Grid initialization code.
Let's say I have hierarchical data that I display in a treeview. It's possible that a particular node might have 1000 children and I don't want to display them all, so I'm toying with the idea of paging the nodes in a tree. I would show 10 children and if there are more, the user needs to click on the next/previous buttons to see them. I've got sql paging working but I can't get the treeview to do what I want.
If I do this, my controller gets the proper node id and page id and it returns the correct page of results back. But then the treeview shows only the 1 page of children I just requested; the rest of the hierarchy (all the parents) is lost:
$("#btnNextPage")
.click(function () {
var selectedNode = treeview.select();
var selectedNodeID = treeview.dataItem(selectedNode).id;
ds.read({
LoopID: selectedNodeID,
page: ds.page() + 1
});
If I do this, I can keep the hierarchy and my controller gets called, but I can't figure out how to pass in the page that I'm requesting.
$("#btnNextPage")
.click(function () {
var selectedNode = treeview.select();
var testnode = treeview.dataItem(selectedNode);
testnode.loaded(false);
testnode.load();
});
I've been using ASP.NET webforms and this is my first foray into jquery and kendo. Any ideas?
When you change pages the Kendo DataSource replaces its records in memory with the new page retrieved from the server.
You would need to retain all the previously loaded pages in a separate observable array and bind your treeview to that instead.
With a pointer from the folks at Telerik, I got this working. The trick was to use the children property which is the datasource for the children of the selected node. So when the next page button is clicked I do this:
parentNodeDataItem.children.read({
LoopID: parentNodeID,
page: currentPage
});
This produced the behavior I wanted, which was for the children to be refreshed without losing the ancestor hierarchy.
I am using Kendo UI treeview to display certain data dynamically. I have no issues with the data loaded. But found one scenario which is as follows
When I click on the expand icon to the left of the node(which has a child node), the expand icon and the collapse icon overlaps with that of the nodes. When the focus moves out of that tabstrip which has the treeview data, then the expand/collapse icon does not overlap and it is to the left of the node. When I hover to the tab strip containing the data , then both the icons overlap with that of the nodes.
Following is the pane and the tab strip declaration
<div id="inner-1" class="configuration k-widget k-header" style="height: 100%; border: 0;background- color:#E1E5E7;"></div>
var leftTabStip=null;
leftTabStip = $("#inner-1").kendoTabStrip().data("kendoTabStrip");
leftTabStip.append({
animation: {
open: {
effects: "fadeIn"
}
},
text: "Sample",
content: '<div id="treeSample" style="overflow:auto;position:relative;border:1px solid #B0B0B0;"> </div><ul class="options"> ',
encoded: false
});
finalPath is the array that contains the tree hierarchy data and I am using these 3 properties id,text and encoded..
var localDataSource = new kendo.data.HierarchicalDataSource({
data:finalPath
});
var groupTree1 = $("#treeSample").kendoTreeView({
dataSource: localDataSource
}).data("kendoTreeView");
Is there any way to ensure that the icons and nodes do not overlap and that even if i hover/ move out of tab strip or click on the icon, the data should be displayed properly like the expand/collapse icon should be to the left of the node and not overlap. Please guide me.
Thanks in advance.
I had the same problem with IE 8 running in compatibility view settings (i.e. IE 7 document mode)
Found this link quite useful:
...The problem is probably hasLayout related in IE 7, so I advise you to experiment whether triggering layout with a zoom:1 style to specific elements will fix the issue...
This css I applied to treeview, fixed the same problem in my case:
li
{
zoom: 1;
}
I have a tree-like structure using Kendo UI tree view. Each node is displayed as a hyperlink and on clicking each one, a new kendotabstrip will be opened. My problem is if I select one node, the results are displayed fine in a new tab but if I close the newly opened tab and then select the same node then no new tab is opened since the node has already been selected. If I have to choose the same node, then I have to access another node and then come back to node.
I tried to deselect the selected item once the new tab is opened using the following snippet:
var treeview=$(#grpTree).data("KendoTreeView");
var selNode=treeview.select();
selNode.find("span.k-state-selected").removeClass("k-state-selected")
but the node is not getting deselected. Is there any other way to do it or have I missed out anything?
I know this post is a bit dated, but as Telerik is continually upgrading its components, I thought I'd put this here so that people can be aware of this change moving forward.
You can deselect all selected nodes with the following syntax:
var treeView = $("#treeView").data("kendoTreeView");
treeView.select($());
Source: Kendo UI Treeview Documentation for Select
Yes this is by design. If you want to attach a click handler which will be triggered each time (no matter if the node is already selected). You can attach a delegate event like the following:
$('#treeviewName').on('click','.k-item',function(e){
var clickedNode = $(this);
var treeViewClientObject = $(e.delegateTarget).data().kendoTreeView;
})
My code:
var treeview=$(#grpTree).data("KendoTreeView");
treeview.select(null);
This calls the change function always, so this can be another solution:
$("#favorite_tree").kendoTreeView({
change: function () {
if (this.dataItem(this.select())) {
var treeView = $("#calendar_tree").data("kendoTreeView");
treeView.select($());
}
}
}).data('kendoTreeView');
$("#calendar_tree").kendoTreeView({
change: function () {
if (this.dataItem(this.select())) {
var treeView = $("#favorite_tree").data("kendoTreeView");
treeView.select($());
}
}
}).data('kendoTreeView');