Treeview Sidebar

[Zachary]

Hello, I have a treeview sidebar that I'm using as a file explorer. It's quite a lot of code to post, but I can say it's based off this code: https://ej2.syncfusion.com/javascript/documentation/sidebar/docking-sidebar/ and just modified to show what files/folders are in the system, instead of a menu. SyncFusion support recommended I use this to achieve my goals, so it should be understandable. I need assistance with a couple things.

1) If I have many subdirectories (parent nodes of parent nodes), how can I make the subdirectories indent the deeper they go?

2) When the sidebar collapses, I have it collapsing all the way like you would expect from a file explorer. When it starts to collapse, all the file names suddenly appear on the right side of the sidebar and then it begins to collapse. What could be causing this?

[SureshRajan Alagarsamy]

Hi Zachary,

We have reviewed your query and understand that you have two concerns with our Sidebar component.

Query 1 : If I have many subdirectories (parent nodes of parent nodes), how can I make the subdirectories indent the deeper they go?

We would like to inform you that you can achieve indentation for sublevels through CSS. We have prepared a sample and met your requirements. We have prepared a sample code snippet that demonstrates how to achieve this functionality. Refer to the code snippet below.

Code Snippet :

[index.html]

 

....

 

<style>

    .e-treeview .e-list-item.e-level-2{

        padding: 0 0 0 24px;

    }

 

    .e-treeview .e-list-item.e-level-3{

        padding: 0 0 0 24px;

    }

</style>

 

We have attached a sample for your reference.

Sample : https://stackblitz.com/edit/jn43lz?file=index.js,index.html

Query 2 : When the sidebar collapses, I have it collapsing all the way like you would expect from a file explorer. When it starts to collapse, all the file names suddenly appear on the right side of the sidebar and then it begins to collapse. What could be causing this?

We have rendered the Sidebar with 40000 Treeview nodes, and when we expand and collapse the Treeview nodes, we didn't face any of your reported issues on our end. Could you please share with us the maximum number of nodes rendered in the TreeView and a code snippet of the TreeView with a video recording? This would be helpful to assist you promptly.

Check out the shared details and get back to us if you need any further assistance.

Regards,
Suresh.

[Zachary]

Hello. Thanks for the response. Unfortunately that snippet doesn't work with my code. I used the Sidebar 'Dock' guide from the SyncFusion documentation, so my code looks more like this:

<aside id="dockSidebar">

<div class="dock">

<ul>

<li class="sidebar-item" id="treeviewfilter" ><input id="mask" type="text">

<li class="sidebar-item" id="treeView">li>li>

<li class="sidebar-item" id="summaryCounts">li>

ul>

div>

aside>

#treeView {

width: 16vw;

position: absolute;

overflow: auto;

z-index: 0;

top: 13%;

bottom: 30vh;

}

#mask {

padding-left: 2%;

padding-top: 5%;

font-size: 130%;

}

.treeviewfilter {

width: 100%;

border: 1px solid #bbbbbb;

margin: 0 auto;

overflow: auto;

z-index: 0;

top: 0vh;

bottom: 33vh;

position: absolute;

}

.e-mask .e-input {

border-bottom: 1px solid #bbbbbb;

}

.heading {

font-size: 20px;

margin: 0 auto;

width: 500px;

margin-bottom: 10px;

}

/* Sidebar Begin */

#dockSidebar .e-icons::before {

font-size: 18px;

padding-top: .35vh;

}

#toggle {

width:50px;

height:50px;

margin:15px 15px -5px;

}

/* dockbar icon Style */

#dockSidebar .home::before {

content: '\e102';

}

#dockSidebar .profile::before {

content: '\e10c';

}

#dockSidebar .info::before {

content: '\e11b';

}

#dockSidebar .settings::before {

content: '\e10b';

}

.e-sidebar .expand::before {

content: '\e10f';

}

.e-sidebar.e-open .expand::before {

/* csslint allow: adjoining-classes*/

content: '\e10e';

}

/* end of dockbar icon Style */

#dockSidebar.e-close .sidebar-item {

padding: 5px 20px;

}

#dockSidebar {

visibility: hidden;

overflow: hidden;

}

.dock {

padding-top: 28%;

height: 100%;

}

#dockSidebar.e-sidebar {

visibility: visible;

}

.e-dock.e-close span.e-text {

/* csslint allow: adjoining-classes*/

display: none;

visibility: hidden;

padding-top: 5%;

}

.e-dock.e-open span.e-text {

/* csslint allow: adjoining-classes*/

display: inline-block

}

#dockSidebar li {

list-style-type: none;

cursor: pointer;

}

#dockSidebar ul {

padding: 0;

}

#dockSidebar.e-sidebar ul li:hover span {

color: black;

}

span.e-icons {

color: #c0c2c5;

line-height: 2;

visibility: visible;

}

.e-open .e-icons {

margin-right: 16px;

}

.e-open .e-text {

overflow: hidden;

text-overflow: ellipsis;

line-height: 23px;

font-size: 15px;

}

.sidebar-item {

text-align: center;

border-bottom: 1px #e5e5e58a solid;

}

.e-sidebar.e-open .sidebar-item {

/* csslint allow: adjoining-classes*/

text-align: left;

padding-left: 3%;

color: #c0c2c5;

overflow: auto;

}

#dockSidebar.e-sidebar {

background: #eae8e8;

}

What should I write differently to be able to use .e-list-item.e-level-2?

And I have included a video below with the bug I'm having. I suspect it may be somewhere in the css, hopefully the css provided above is helpful in assisting me.

Attachment: Screen_Recording_20230426_at_8.34.11_PM.mov_555c3814.zip

[Prasanth Madhaiyan]

Hi Zachary,

We have validated your reported query in the JS Sidebar component by using your shared code snippets. Based on the details you provided, we suspect that you are not using our Syncfusion TreeView component inside the Sidebar component.

Documentation: https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started/

Are you using a customized your own component instead of our TreeView component? Could you please share the requested details? Based on that, we will check and provide you with a prompt solution. Please get back to us with the requested details.

Regards,

Prasanth Madhaiyan.

[Zachary]

I am definitely using the SyncFusion treeview. All of the code is from SyncFusion documentation. Here is the javascript:

var dockbar = new ej.navigations.Sidebar({

width: '15%',

dockSize: '1px',

enableDock: true,

enableGestures: false

});

dockbar.appendTo('#dockSidebar');

// Render the TreeView with list data source

var listTreeObj = new ej.navigations.TreeView({

fields: { dataSource: localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', path: 'path' },

nodeClicked: changeSample

});

listTreeObj.appendTo('#treeView');

//Render the MaskedTextBox input element

var mask = new ej.inputs.MaskedTextBox({

placeholder: "Search",

change: searchNodes

});

mask.appendTo('#mask');

//Change the dataSource for TreeView

function changeDataSource(data) {

listTreeObj.fields = {

dataSource: data, id: 'id', text: 'name',

parentID: 'pid', hasChildren: 'hasChild'

}

}

//Filtering the TreeNodes

function searchNodes(args) {

var _text = mask.element.value;

var predicats = [], _array = [], _filter = [];

if (_text == "") {

changeDataSource(localData);

}

else {

var predicate = new ej.data.Predicate('name', 'contains', _text, true);

var filteredList = new ej.data.DataManager(localData).executeLocal(new ej.data.Query().where(predicate));

for (var j = 0; j < filteredList.length; j++) {

_filter.push(filteredList[j]["id"]);

var filters = getFilterItems(filteredList[j], localData);

for (var i = 0; i < filters.length; i++) {

if (_array.indexOf(filters[i]) == -1 && filters[i] != null) {

_array.push(filters[i]);

predicats.push(new ej.data.Predicate('id', 'equal', filters[i], false));

}

}

}

if (predicats.length == 0) {

changeDataSource([]);

} else {

var query = new ej.data.Query().where(new ej.data.Predicate.or(predicats));

var newList = new ej.data.DataManager(localData).executeLocal(query);

changeDataSource(newList);

setTimeout(function () {

listTreeObj.expandAll();

}, 400);

}

}

}

//Find the Parent Nodes for corresponding childs

function getFilterItems(fList, list) {

var nodes = [];

nodes.push(fList["id"]);

var query2 = new ej.data.Query().where('id', 'equal', fList["pid"], false);

var fList1 = new ej.data.DataManager(list).executeLocal(query2);

if (fList1.length != 0) {

var pNode = getFilterItems(fList1[0], list);

for (var i = 0; i < pNode.length; i++) {

if (nodes.indexOf(pNode[i]) == -1 && pNode[i] != null)

nodes.push(pNode[i]);

}

return nodes;

}

return nodes;

}

[Zachary]

The CSS indentation part works now, if you could just address the part about a visual bug when collapsing the sidebar. There is also an issue with the treeview+mask(search bar) not scaling when the window size resizes. Maybe this is a problem that can be fixed somewhere in my CSS code.

[SureshRajan Alagarsamy]

Hi Zachary,

We have reviewed your query and understand that you have two concerns with our Sidebar component.

Query 1 : Flickering issue occurring when collapsing the sidebar.

We understand that you are experiencing a flickering issue when collapsing the Sidebar. We have validated the issue and need additional time to further investigate and provide a solution. We will update you with further details on or before May 8, 2023.

Query 2 : Input and TreeView inside sidebar need to be responsive when the window is resize.

We have replaced the ‘li’ tag with a ‘div’ tag, as this is required for making the TreeView responsive. We have also used media queries in CSS to ensure that the TreeView and input elements are responsive when the window is resized. In additional, We also suggest you refer to the meta tag for better results.  Refer the below code snippet for further reference.

Code Snippet :

[index.html]

 

<html><head

....

 

<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>

 

....

 

<aside id="defaultSidebar" class="default-sidebar">

    <div class="dock">

        <ul>

            <input id="mask" type="text">

            <div class="sidebar-item" id="defaultTree" ></div>

            <div class="sidebar-item" id="defaultTree"></div>

            <div class="sidebar-item" id="summaryCounts"></div>

 

        </ul>

    </div>

</aside>

 

<style>

  @media screen and (max-width: 1000px) {

 

  .e-mask.e-input-group, .e-treeview, .e-sidebar {

      width: 50% !important;

      overflow: auto;

  }

  .e-treeview {

    display: inline-table !important;

  }

 

</style>

 

<html><head>

 

We have attached sample for your reference.

Sample : https://stackblitz.com/edit/jn43lz-pj92rs?file=index.html

We also suggest referring to the provided Stack Overflow links for further information on responsive design.

https://www.geeksforgeeks.org/how-to-make-a-html-div-responsive-using-css/

https://stackoverflow.com/questions/38017547/how-make-a-div-container-responsive

Check out the shared details and get back to us if you need any further assistance.

Regards,
Suresh.