Separate panel for Tree view with multi-select checkbox having extra white space

138
March 10, 2022, at 10:40 PM

I am making multi-select tree view with jquery and I need to separate the list to left and right layout. And for the separating part, I found a way to do it. But the problem is whenever the child list from left or right is toggle down, the other side showing blank space. I tried adding padding and margin but not working. I also tried UL column separation, but not working. My required format is like this Got error like this

var data = {
  children: [{
    id: 1,
    title: "Option 1",
    children: [{
      id: 11,
      title: "Option 11",
      children: [{
        id: 111,
        title: "Option 111"
      }, {
        id: 112,
        title: "Option 112"
      }]
    }, {
      id: 12,
      title: "Option 12"
    }]
  }, {
    id: 2,
    title: "Option 2",
    children: [{
      id: 21,
      title: "Option 21"
    }, {
      id: 22,
      title: "Option 22"
    }]
  }, {
    id: 3,
    title: "Option 3",
    children: [{
      id: 31,
      title: "Option 31"
    }, {
      id: 32,
      title: "Option 32"
    }]
  }, {
    id: 4,
    title: "Option 1",
    children: [{
      id: 41,
      title: "Option 11",
      children: [{
        id: 411,
        title: "Option 111"
      }, {
        id: 412,
        title: "Option 112"
      }]
    }, {
      id: 42,
      title: "Option 12"
    }]
  }, {
    id: 5,
    title: "Option 2",
    children: [{
      id: 51,
      title: "Option 21"
    }, {
      id: 52,
      title: "Option 22"
    }]
  }, {
    id: 6,
    title: "Option 3",
    children: [{
      id: 61,
      title: "Option 31"
    }, {
      id: 62,
      title: "Option 32"
    }]
  }, {
    id: 4,
    title: "Option 1",
    children: [{
      id: 41,
      title: "Option 11",
      children: [{
        id: 411,
        title: "Option 111"
      }, {
        id: 412,
        title: "Option 112"
      }]
    }, {
      id: 42,
      title: "Option 12"
    }]
  }, {
    id: 5,
    title: "Option 2",
    children: [{
      id: 51,
      title: "Option 21"
    }, {
      id: 52,
      title: "Option 22"
    }]
  }, {
    id: 6,
    title: "Option 3",
    children: [{
      id: 61,
      title: "Option 31"
    }, {
      id: 62,
      title: "Option 32"
    }]
  }, {
    id: 4,
    title: "Option 1",
    children: [{
      id: 41,
      title: "Option 11",
      children: [{
        id: 411,
        title: "Option 111"
      }, {
        id: 412,
        title: "Option 112"
      }]
    }, {
      id: 42,
      title: "Option 12"
    }]
  }, {
    id: 5,
    title: "Option 2",
    children: [{
      id: 51,
      title: "Option 21"
    }, {
      id: 52,
      title: "Option 22"
    }]
  }, {
    id: 6,
    title: "Option 3",
    children: [{
      id: 61,
      title: "Option 31"
    }, {
      id: 62,
      title: "Option 32"
    }]
  }, {
    id: 4,
    title: "Option 1",
    children: [{
      id: 41,
      title: "Option 11",
      children: [{
        id: 411,
        title: "Option 111"
      }, {
        id: 412,
        title: "Option 112"
      }]
    }, {
      id: 42,
      title: "Option 12"
    }]
  }, {
    id: 5,
    title: "Option 2",
    children: [{
      id: 51,
      title: "Option 21"
    }, {
      id: 52,
      title: "Option 22"
    }]
  }, {
    id: 6,
    title: "Option 3",
    children: [{
      id: 61,
      title: "Option 31"
    }, {
      id: 62,
      title: "Option 32"
    }]
  }]
};
setupTreeView("treeview_div", data)

function getData() {
  let treeData = getTreeCheckedIDList("treeview_div");
  $("#treeDataLabel").text(treeData);
}
function setupTreeView(rootDiv, branch) {
  let treeViewRootId = $("#" + rootDiv).children('ul').attr("id")
  renderTree($("#" + treeViewRootId), branch);
  $('div#' + rootDiv + ' input[type=checkbox]').on("change", function() {
    if (this.checked) {
      let inidicaterImg = $(this).siblings('img');
      if (inidicaterImg.attr("data-parent") == 'true') {
        inidicaterImg.attr("src", "close.png")
      }
      $(this).closest('li').children('ul').slideDown();
      $(this).parents("li[id*=item]").children('input[type=checkbox]').prop('checked', true);
    } else {
      //$(this).siblings('img').attr("src","open.png")
      $(this).closest('li').find("li").children('input[type=checkbox]').prop('checked', false);
    }
  });
  $('div#' + rootDiv + ' label').click(function() {
    let toogleUl = $(this).closest('li').children('ul');
    let inidicaterImg = $(this).siblings('img');
    toogleUlAndInidicater(toogleUl, inidicaterImg);
  });
  $('div#' + rootDiv + ' img').click(function() {
    let toogleUl = $(this).closest('li').children('ul');
    let inidicaterImg = $(this);
    toogleUlAndInidicater(toogleUl, inidicaterImg);
  });
  function renderTree(parentUL, branchData) {
    for (var key in branchData.children) {
      var item = branchData.children[key];
      var $item = "";
      $item = $('<li>', {
        id: "item" + item.id
      });
      if (item.children) {
        $item.append($('<img>', {
          src: "open.png",
          class: "inidicater_icon",
          'data-parent': true
        }));
      } else {
        $item.append($('<img>', {
          src: "end.png",
          class: "inidicater_icon",
          'data-parent': false
        }));
      }
      $item.append($('<input>', {
        type: "checkbox",
        id: item.id,
        name: item.id
      }));
      $item.append($('<label>', {
        for: "item" + item.id,
        class: "treeItem",
        text: item.title
      }));
      parentUL.append($item);
      if (item.children) {
        var $ul = $('<ul>', {
          style: 'display: none'
        }).appendTo($item);
        $item.append();
        renderTree($ul, item);
      }
    }
  }
  function toogleUlAndInidicater(toogleUl, inidicaterImg) {
    $.when(toogleUl.slideToggle()).done(function() {
      if (inidicaterImg.attr("data-parent") == 'true') {
        if (toogleUl.is(":hidden")) {
          inidicaterImg.attr("src", "open.png")
        } else {
          inidicaterImg.attr("src", "close.png")
        }
      }
    });
  }

}
function getTreeCheckedIDList(rootDiv) {
  var selected = [];
  $('#' + rootDiv + ' input:checked').each(function() {
    selected.push($(this).attr('id'));
  });
  return selected
}
.treeview_div .inidicater_icon {
  width: 15px;
  margin-right: 5px;
}
.treeview_div ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* column-count: 2;
    column-gap: 20px; */
}
.treeview_div ul ul {
  margin: 0 0 0 40px;
}
.treeview_div li {
  padding: 5px;
}
.treeview_div .treeItem {
  vertical-align: top;
}
.treeview_div input[type="checkbox"] {
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  font: inherit;
  color: currentColor;
  width: 1.1em;
  height: 1.1em;
  border: 0.1em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.treeview_div input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em currentColor;
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.treeview_div input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* input[type="checkbox"]:disabled {  
    color: #959495;
    cursor: not-allowed;
} */
.treeview_div ul>li {
  float: left;
  width: 200px;
  text-align: center;
}
.treeview_div ul>li:nth-of-type(2n + 1) {
  clear: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<title>
  Tree View Checkbox
</title>
<head>
  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js'></script>
</head>
<body>
  <div id="treeview_div" class="treeview_div">
    <ul id="treeview_root"></ul>
  </div>
  <div style="display: block;">
    <button style="display: block;" onclick="getData()">Get Data</button>
    <label style="display: block;" id="treeDataLabel"></label>
  </div>
  <script>
  </script>
</body>
</html>

:Update I finally managed to get things work. May or may not be the best solution. If you guys know some smart way to done this, pls let me know.

var data = {
  children: [{
    id: 1,
    title: "Option 1",
    children: [{
      id: 11,
      title: "Option 11",
      children: [{
        id: 111,
        title: "Option 111"
      }, {
        id: 112,
        title: "Option 112"
      }]
    }, {
      id: 12,
      title: "Option 12"
    }]
  }, {
    id: 2,
    title: "Option 2",
    children: [{
      id: 21,
      title: "Option 21"
    }, {
      id: 22,
      title: "Option 22"
    }]
  }, {
    id: 3,
    title: "Option 3",
    children: [{
      id: 31,
      title: "Option 31"
    }, {
      id: 32,
      title: "Option 32"
    }]
  }, {
    id: 4,
    title: "Option 1",
    children: [{
      id: 41,
      title: "Option 11",
      children: [{
        id: 411,
        title: "Option 111"
      }, {
        id: 412,
        title: "Option 112"
      }]
    }, {
      id: 42,
      title: "Option 12"
    }]
  }, {
    id: 5,
    title: "Option 2",
    children: [{
      id: 51,
      title: "Option 21"
    }, {
      id: 52,
      title: "Option 22"
    }]
  }, {
    id: 6,
    title: "Option 3",
    children: [{
      id: 61,
      title: "Option 31"
    }, {
      id: 62,
      title: "Option 32"
    }]
  }, {
    id: 4,
    title: "Option 1",
    children: [{
      id: 41,
      title: "Option 11",
      children: [{
        id: 411,
        title: "Option 111"
      }, {
        id: 412,
        title: "Option 112"
      }]
    }, {
      id: 42,
      title: "Option 12"
    }]
  }, {
    id: 5,
    title: "Option 2",
    children: [{
      id: 51,
      title: "Option 21"
    }, {
      id: 52,
      title: "Option 22"
    }]
  }, {
    id: 6,
    title: "Option 3",
    children: [{
      id: 61,
      title: "Option 31"
    }, {
      id: 62,
      title: "Option 32"
    }]
  }, {
    id: 4,
    title: "Option 1",
    children: [{
      id: 41,
      title: "Option 11",
      children: [{
        id: 411,
        title: "Option 111"
      }, {
        id: 412,
        title: "Option 112"
      }]
    }, {
      id: 42,
      title: "Option 12"
    }]
  }, {
    id: 5,
    title: "Option 2",
    children: [{
      id: 51,
      title: "Option 21"
    }, {
      id: 52,
      title: "Option 22"
    }]
  }, {
    id: 6,
    title: "Option 3",
    children: [{
      id: 61,
      title: "Option 31"
    }, {
      id: 62,
      title: "Option 32"
    }]
  }, {
    id: 4,
    title: "Option 1",
    children: [{
      id: 41,
      title: "Option 11",
      children: [{
        id: 411,
        title: "Option 111"
      }, {
        id: 412,
        title: "Option 112"
      }]
    }, {
      id: 42,
      title: "Option 12"
    }]
  }, {
    id: 5,
    title: "Option 2",
    children: [{
      id: 51,
      title: "Option 21"
    }, {
      id: 52,
      title: "Option 22"
    }]
  }, {
    id: 6,
    title: "Option 3",
    children: [{
      id: 61,
      title: "Option 31"
    }, {
      id: 62,
      title: "Option 32"
    }]
  }]
};
$.when(setupTreeView("treeview_div", data)).done(function() {
  var $li = $("#treeview_root").children(),
    $newUl = $('<ul class="treeview_root">').insertAfter($("#treeview_root")),
    middle = Math.ceil($li.length / 2) - 1;
  $li.filter(':gt(' + middle + ')').appendTo($newUl);
});
function getData() {
  let treeData = getTreeCheckedIDList("treeview_div");
  $("#treeDataLabel").text(treeData);
}
function setupTreeView(rootDiv, branch) {
  let treeViewRootId = $("#" + rootDiv).children('ul').attr("id")
  renderTree($("#" + treeViewRootId), branch);
  $('div#' + rootDiv + ' input[type=checkbox]').on("change", function() {
    if (this.checked) {
      let inidicaterImg = $(this).siblings('img');
      if (inidicaterImg.attr("data-parent") == 'true') {
        inidicaterImg.attr("src", "close.png")
      }
      $(this).closest('li').children('ul').slideDown();
      $(this).parents("li[id*=item]").children('input[type=checkbox]').prop('checked', true);
    } else {
      //$(this).siblings('img').attr("src","open.png")
      $(this).closest('li').find("li").children('input[type=checkbox]').prop('checked', false);
    }
  });
  $('div#' + rootDiv + ' label').click(function() {
    let toogleUl = $(this).closest('li').children('ul');
    let inidicaterImg = $(this).siblings('img');
    toogleUlAndInidicater(toogleUl, inidicaterImg);
  });
  $('div#' + rootDiv + ' img').click(function() {
    let toogleUl = $(this).closest('li').children('ul');
    let inidicaterImg = $(this);
    toogleUlAndInidicater(toogleUl, inidicaterImg);
  });
  function renderTree(parentUL, branchData) {
    for (var key in branchData.children) {
      var item = branchData.children[key];
      var $item = "";
      $item = $('<li>', {
        id: "item" + item.id
      });
      if (item.children) {
        $item.append($('<img>', {
          src: "open.png",
          class: "inidicater_icon",
          'data-parent': true
        }));
      } else {
        $item.append($('<img>', {
          src: "end.png",
          class: "inidicater_icon",
          'data-parent': false
        }));
      }
      $item.append($('<input>', {
        type: "checkbox",
        id: item.id,
        name: item.id
      }));
      $item.append($('<label>', {
        for: "item" + item.id,
        class: "treeItem",
        text: item.title
      }));
      parentUL.append($item);
      if (item.children) {
        var $ul = $('<ul>', {
          style: 'display: none'
        }).appendTo($item);
        $item.append();
        renderTree($ul, item);
      }
    }
  }
  function toogleUlAndInidicater(toogleUl, inidicaterImg) {
    $.when(toogleUl.slideToggle()).done(function() {
      if (inidicaterImg.attr("data-parent") == 'true') {
        if (toogleUl.is(":hidden")) {
          inidicaterImg.attr("src", "open.png")
        } else {
          inidicaterImg.attr("src", "close.png")
        }
      }
    });
  }

}
function getTreeCheckedIDList(rootDiv) {
  var selected = [];
  $('#' + rootDiv + ' input:checked').each(function() {
    selected.push($(this).attr('id'));
  });
  return selected
}
.treeview_div {
  display: table;
}
.treeview_root {
  display: table-cell;
}
.treeview_div .inidicater_icon {
  width: 15px;
  margin-right: 5px;
}
.treeview_div ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.treeview_div ul ul {
  margin: 0 0 0 40px;
}
.treeview_div li {
  padding: 5px;
  width: 250px;
}
.treeview_div .treeItem {
  vertical-align: top;
}
.treeview_div input[type="checkbox"] {
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  font: inherit;
  color: currentColor;
  width: 1.1em;
  height: 1.1em;
  border: 0.1em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.treeview_div input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em currentColor;
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.treeview_div input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* input[type="checkbox"]:disabled {  
    color: #959495;
    cursor: not-allowed;
} */

/* .treeview_div ul>li {
    float:left;
    width:300px;
    text-align:center;
}
 
.treeview_div ul>li:nth-of-type(2n + 1) {
    clear:left;
} */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<title>
  Tree View Checkbox
</title>
<head>
  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <link rel="stylesheet" href="treeView.css">
</head>
<body>
  <div id="treeview_div" class="treeview_div">
    <ul id="treeview_root" class="treeview_root"></ul>
  </div>
  <div style="display: block;">
    <button style="display: block;" onclick="getData()">Get Data</button>
    <label style="display: block;" id="treeDataLabel"></label>
  </div>
  <script>
  </script>
</body>
</html>

Rent Charter Buses Company
READ ALSO
How to number rows with multiple condition using arrayformula on spreadsheet

How to number rows with multiple condition using arrayformula on spreadsheet

Column Number is the numbers of column Integer starts on 1 and so on, and if there is multiple number on the column Integer so will the Number make multiple number too

115
Adding a number with a plus button

Adding a number with a plus button

I want to make a button that will ad a number to existing fieldMy code:

99
Select author automatically in Wordpress importer

Select author automatically in Wordpress importer

If you're importing posts to Wordpress and the author is already on the new Wordpress, there is no default way to select the author in the list

131
price depend on selection of radio input

price depend on selection of radio input

I tried but can't get it after this so please help me with this

135