Can someone teach me how to expand child item on tree list when parent item was checked in JavaScript?
Current,i had function on JavaScript to check/unchecked parent item and child item. But this function fail to auto expand the child item when parent item was checked. Can someone lead me a hand please?
Here is my JavaScript.
var parenItemSelected = false;
function OnClientNodeClicked(sender, args) {
var currNode = args.get_item();
var childNodes = currNode.get_childItems();
var nodeCount = currNode.get_childItems().length;
var parentItem = currNode.get_parentItem();
if (parentItem) {
parenItemSelected = true;
parentItem.set_selected(true);
}
if (currNode.get_selected()) {
CheckAllChildren(childNodes, nodeCount);
}
else {
UnCheckAllChildren(currNode, childNodes, nodeCount);
}
parenItemSelected = false;
}
function UnCheckAllChildren(currNode, nodes, nodecount) {
var i;
for (i = 0; i < nodecount; i++) {
nodes[i].set_selected(false);
}
currNode.set_selected(false);
}
function CheckAllChildren(nodes, nodecount) {
var i;
if (!parenItemSelected) {
for (i = 0; i < nodecount; i++) {
nodes[i].set_selected(true);
}
}
}
Code from C# or vb.net are welcome.
Thanks.
Related
I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo
Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}
I have a function that selects all checkboxes (selecionarTodos()) on all pages of a table (#tbTarefas). However, I want to use the same method to select all checkboxes in other tables, which have the same structure, only with different id.
I would like to check if a certain table is rendered at that moment on screen. Something like that.
Before
function selecionarTodos(source) {
const tabela = $("#tbTarefas").DataTable();
let celulasCheckbox = tabela.column(0).nodes();
for (let i = 0; i < celulasCheckbox.length; i++) {
let checkbox = celulasCheckbox[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
After (Initial thinking)
function selecionarTodos(source) {
const tabelaTarefas = $("#tbTarefas").DataTable();
const tabelaAtendimento = $("#tbPendentes").DataTable();
if (tabelaTarefas) {
let CheckboxTarefasTd = tabelaTarefas.column(0).nodes();
for (let i = 0; i < CheckboxTarefasTd.length; i++) {
let checkbox = CheckboxTarefasTd[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
else if (tabelaAtendimento) {
let CheckboxAtendimentoTd = tabelaAtendimento.column(0).nodes();
for (let i = 0; i < CheckboxAtendimentoTd.length; i++) {
let checkbox = CheckboxAtendimentoTd[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
}
Datatables has a callback for once initialization has been completed.
$('#tbTarefas').on( 'init.dt', function () {
}
Or on each redraw use "draw.dt"
I am making a todo list... When the task is finished i need to be able to click it and then add a class to that item... It works but I have to double click.. Any suggestions?
list.onclick = function() {
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
list[i].onclick = function() {
if (!this.classList.contains("checked") || this.classList.contains("checked")) {
this.classList.add("checked");
} else {
this.classList.remove("checked");
}
}
}
}
As I understand purpose of this function is to check or uncheck list element each time user clicks on it. For this purpose, first of all we need to identify if 'class' exists or not and remove it. In other cases just add that 'class' to classList attribute.
list.onclick = function()
{
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++)
{
list[i].onclick = function()
{
if (this.classList.contains("checked")
{
this.classList.remove("checked");
}
else
{
this.classList.add("checked");
}
}
}
}
I implemented a solution, moving checked items to top of list, using
Keep checked items at top of list
Now, I have an anchor to uncheck all items in the list. The items are unchecked once we click the anchor tag. But the items are not sorting. It should default to first displayed list, as in html list:
var list = $("ul"),
origOrder = list.children();
list.on("click", ":checkbox", function () {
var i, checked = document.createDocumentFragment(),
unchecked = document.createDocumentFragment();
for (i = 0; i < origOrder.length; i++) {
if (origOrder[i].getElementsByTagName("input")[0].checked) {
checked.appendChild(origOrder[i]);
} else {
unchecked.appendChild(origOrder[i]);
}
}
list.append(checked).append(unchecked);
});
The demo of the scenario can be found here
http://jsfiddle.net/RPN3x/
in JS
var list = $("ul");
var html=$("ul").html();
sortItems(list);
var anch = $('#clear');
list.on('click',"a",function(){
var list = $("ul"); //$(this).parents().eq(0).find(':checkbox').removeAttr('checked');
$("ul").html(html);
sortItems(list);
});
function sortItems(list){
origOrder = list.children();
list.on("click", ":checkbox", function() {
var i, checked = document.createDocumentFragment(),
unchecked = document.createDocumentFragment();
for (i = 2; i < origOrder.length; i++) {
if (origOrder[i].getElementsByTagName("input")[0].checked) {
checked.appendChild(origOrder[i]);
} else {
unchecked.appendChild(origOrder[i]);
}
}
list.append(checked).append(unchecked);
});
}
see DEMO
I have a function whose destination is to work onClick event.
So, we have for example 4 Span elements and 4 Div elements.
The Spans are Tabs-buttons which I would like to "open" those Divs.
The 1st Span onClick would (open) change the style.display of the 1st Div in "block", from "none", and so on for the next Spans.
This piece of code works very well, but it changes only the design of elements.
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
}
I've tried to add the code below into my function to achieve what I want, but It does not work.
var getIndex = function(s) {
for (var index = 0; s != s.parentNode.childNodes[index]; index++);
return index;
}
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else {
supDivs[d].style.display = "none";
}
}
I'm not exactly sure what you're trying to do, but one thing I noticed is this:
var getIndex = function(s) { /* .... */ }
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else { /* ... */ }
}
This code is comparing getIndex to d, which means it's comparing an integer (d) to the function getIndex, instead of the result of the function call getIndex(spans[d]) (which is an integer, like d).
But what I think you're really trying to do, is getting the index of the clicked <span> so you can show the <div> with the matching index (and hide the rest). To achieve this, the code could be changed like so:
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
var index;
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
if (s == spans[i])
index = i;
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
for (var d = 0; d < supDivs.length; d++) {
if (index == d) {
supDivs[d].style.display = "block";
} else {
supDivs[d].style.display = "none";
}
}
}
Instead of the function getIndex, this just saves the correct index inside the first for loop.
There are many more improvements that could be made to this code, like rewriting it so you don't need that ugly s.parentNode.parentNode.parentNode.parentNode.parentNode and working with CSS classes instead of manually setting the style. But I'll leave that to the reader.