I have used the below example to populate a hierarchical structure.
http://www.jeasyui.com/documentation/treegrid.php
When initially loaded, the tree is all expanded. IS there any setting which I am missing to load the tree initially all collapsed. I have tried "state: 'closed' in the data-options but it is not working.
If you used the "convert" filter, you can add the state property to your node
while(toDo.length){
var node = toDo.shift(); // the parent node
// get the children nodes
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.parentId == node.id){
var child = {id:row.id,text:row.name, state:'closed'};
if (node.children){
node.children.push(child);
} else {
node.children = [child];
}
toDo.push(child);
}
}
}
Related
How can i expand kendotreeView nodes with no children?, i need help checking if parent has child node if there is one or more child i want to keep it collapsed otherwise expanded.
I used the following Jquery code and works fine but it find by text value. i rather check all node with child li and expand if no child exist.
var treeview;
treeview = $("#treeview").data("kendoTreeView");
var nodeToExpand = treeview.findByText('abc.');
treeview.expand(nodeToExpand);
is there anyways to replace the code above to collapse or expand based on that?
You can iterate over all nodes, and if any do not have children nodes, expand them like this:
var treeView = $("#treeview").data("kendoTreeView");
var nodes = treeView.dataSource.view();
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].hasChildren) {
treeView.expand(nodes[i]);
}
}
My requirement is to update the dynamic content to the child element. I tried to iterate the parent elements one by one and trying to update the child elements but I am unable can anyone guide me please?Thanks
<section id="parent_sec">
<div id="parent1">
<div id="childdiv">default1</div>
</div>
I tried like belo
function getTragetElement(elem, tem){
var tem1 = 'childiv';
for (i = 0; i <= elem.length - 1; i++) {
if(elem[i].childdiv!= undefined && elem[i].childdiv!= null){
elem[i].childdiv.innerHTML = "12345";
break;
}else{
getTragetElement(elem[i], tem1);
}
}
}
var parentDiv = document.getElementById("parent_sec");
var childElements = parentDiv.children;
getTragetElement(childElements[0], 'childdiv')
first when you pass in the array as a parameter don't declare an index value just pass in the array and let only the function declare the value (as your function is already doing).
And also take out the .childdiv when changing the content of the child div, because this doesn't work and there is no need for calling the child div, because the array with the index declaration, in your case - elem[i] - already contains the child div itself.
so here is a edited example:
function getTragetElement(elem, tem){
var tem1 = 'childiv';
for (i = 0; i <= elem.length ; i++) {
if(elem[i]!= undefined && elem[i] != null){
elem[i].innerHTML = "12345";
}else{
getTragetElement(elem[i], tem1);
}
}
}
var parentDiv = document.getElementById("parent1");
var childElements = parentDiv.children;
//passing in the array childElenents without an index value
getTragetElement(childElements, 'childdiv')
I'm using JavaScript to create a list of links from a text source. Using document.write(), resets/creates a new page which is not desirable. I do not know the amount of items in the list, so precomposing a list and using innerHTML to set values doesn't seem 'do-able' ? How would one go about generating dynamic lists in JS?
You can create elements dynamically by using document.createElement. It could work for example like this:
var container = document.getElementById('my-list'),
items = [],
addItem;
addItem = function (text) {
var elm = document.createElement('li');
elm.innerHTML = text;
container.appendChild(elm);
items.push(elm);
};
// generating random list
var i = 0,
j = Math.floor(Math.random() * 50);
for (i; i < j; i++) {
addItem('list item ' + i);
}
As Matti Mehtonen stated you can use document.createElement(), in order to create dynamically elements. One note on this is that instead of appending the newly created elements directly into a DOMnode, you should instead create a document fragment and append the elements to it, afterwards you append the fragment to the DOMnode. This way the process will be faster.
var items = ['cars', 'toys', 'food', 'apparel'];
function render(elementId, list) {
//getting the list holder by id
var el = document.getElementById(elementId);
//creating a new document fragment
var frag = new DocumentFragment();
//iterate over the list and create a new node for
//each list item and append it to the fragment
for (var i = 0, l = list.lenght; i < l; i++) {
var item = document.createElement('span');
frag.appendChild(item.innerHTML = list[i]);
}
//finally append the fragment to the list holder
el.appendChild(frag);
}
//rendering
render("my-list-holder", list);
I want to remove all selected nodes from dynatree? But it throws an error if you delete a folder before the child. How can i delete the list of selected nodes in order of leaf nodes first?
for (var i = 0; i < selectedNodes.length; i++) {
selectedNodes[i].remove(); //Remove
}
From below HTML code I want to get all the text except that in 'text_exposed_hide' span elements.
Initially I tried to get the text from span with no class names.
But this method misses the text which is not within any span but just in div.
How can I get the required text. I need this code in pure javascript
<div id="id_4f1664f84649d2c59795040" class="text_exposed_root">
9jfasiklfsa
<span>CT:PFOUXHAOfuAI07mvPC/</span>
<span>NAg==$1ZUlmHC15dwJX8JNEzKxNDGGT</span>
dwL/L1ubjTndn89JL+M6z
<span class="text_exposed_hide">...</span>
<span class="text_exposed_show">
<span>MDmclkBPI/</span>
<span>s4B7R9hJyU9bE7zT10xkJ8vxIpo0quQ</span>
55
</span>
<span class="text_exposed_hide">
<span class="text_exposed_link">
<a onclick="CSS.addClass($("id_4f1664f84649d2c59795040"), "text_exposed");">See More</a>
</span>
</span>
</div
Edit :
I tried removing nodes with class name 'text_exposed_hidden' and then getting text from remaining nodes. Below is the code. But its not working
Control is not entering for loop. Even visibleDiv.removeChild(textExposedHideNodes[0]) is not working. I am running this in Chrome Browser 16.0
//msg is the parent node for the div
visibleDiv = msg.getElementsByClassName("text_exposed_root");
textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide");
for(var n = 0;n < textExposedHideNodes.legth ; n++ ) {
console.log("Removing");
msg.removeChild(textExposedHideNodes[n]);
}
return visibleDiv.innerText;
This code will collect all text from text nodes who don't have a parent with the class="text_exposed_hide" and put the results in an array.
It does this non-destructively without removing anything:
function getTextFromChildren(parent, skipClass, results) {
var children = parent.childNodes, item;
var re = new RegExp("\\b" + skipClass + "\\b");
for (var i = 0, len = children.length; i < len; i++) {
item = children[i];
// if text node, collect its text
if (item.nodeType == 3) {
results.push(item.nodeValue);
} else if (!item.className || !item.className.match(re)) {
// if it doesn't have a className or it doesn't match
// what we're skipping, then recurse on it to collect from it's children
getTextFromChildren(item, skipClass, results);
}
}
}
var visibleDiv = document.getElementsByClassName("text_exposed_root");
var text = [];
getTextFromChildren(visibleDiv[0], "text_exposed_hide", text);
alert(text);
If you want all the text in one string, you can concatenate it together with:
text = text.join("");
You can see it work here: http://jsfiddle.net/jfriend00/VynKJ/
Here's how it works:
Create an array to put the results in
Find the root that we're going to start with
Call getTextFromChildren() on that root
Get the children objects of that root
Loop through the children
If we find a text node, collect its text into the results array
If we find an element node that either doesn't have a className or who's className doesn't match the one we're ignoring, then call getTextFromChildren() recursively with that element as the new root to gather all text from within that element
Is this what you're looking for?
/*Get Required Text
Desc: Return an array of the text contents of a container identified by the id param
Params:
id = Container DOM object id
*/
function getRequiredText(id)
{
/*Get container, declare child var and return array*/
var el = document.getElementById(id),
child,
rtn = Array();
/*Iterate through childNodes*/
for(var i = 0; i < el.childNodes.length; i++){
/*Define child*/
child = el.childNodes[i]
/*If node isn't #text and doesn't have hidden class*/
if(child.nodeName !="#text" && child.className != "text_exposed_hide")
rtn.push(child.textContent);
}
/*Return results*/
return rtn;
}
This will go through all childNodes, including nested childNodes and place all text into an array. if you want to exclude nested children replace the "if" statement with.
if(child.nodeName !="#text" && child.className != "text_exposed_hide" && child.parentNode == el)
Instead of removing the node, why not set its innertext/html to empty string:
//msg is the parent node for the div
visibleDiv = msg.getElementsByClassName("text_exposed_root");
textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide");
for(var i = 0;i < textExposedHideNodes.legth ; i++ ) {
//store to temp for later use
textExposedHideNodes[i].txt = textExposedHideNodes[i].innerHTML;
textExposedHideNodes[i].innerHTML = '';
}
return visibleDiv.innerText;