.NET GENES

Hello Everyone, Normally when working with real world information, we tend to have projects or tasks that will show employees with their supervisors or managers viewed in hierarchical structure. If the given project is a web application, the jsTree.js fits for this requirement. This article will show you how to populate a jsTree from SQL Server database table called ContosoRetailsDW which is a Microsoft sample database. It already has a table specifically DimEmployee that we can play with. To begin with lets define the models used. The JsTreeModel class contains the information used by the jsTree while the clsResourceManagers class receives the result from the query. public class EmpManagerTreeViewModel { public clsResourceManagers ResourceManager { get ; set ; } public JsTreeModel EmployeeTreeModel { get ; set ; } public EmpManagerTreeViewModel() { ResourceManager = new clsResourceManagers(); EmployeeTreeModel = new JsTreeModel(); } } public class clsRes

To change the open and close folder icons, I found the answer here which is to set the 'open' and 'closed' properties of 'types' plugin. On the 'open_node' and 'close_node' events of the tree, set the data.nodes to 'open' and 'closed' respectively. See sample code below. function InitTreeEmployeesList() { $( '#jstree' ).jstree({ 'core' : { 'multiple' : false , 'themes' : { 'dots' : true , 'icons' : true } }, 'types' : { 'default' : { 'icon' : '../Content/Employee/Images/emp_default.png' }, 'open' : { 'icon' : '../Content/Employee/Images/employee_active.png' }, 'closed' : { 'icon' : '../Content/Employee/Images/emp_default.png' } },

Hello all, I was confronted with a minor issue in jsTree.js on how to uncheck a parent only if all it's child notes are unchecked. I checked on the documentation if there's an existing property or attribute that will be set to achieve this functionality. Since there is none, I decided to just do the coding stuff to solve this problem. The logic behind this is that get the parent node and it's direct descendants. If there are child nodes, loop through those elements and if one of them is still checked, the parent node remains checked. But to make this work, the properties cascade up and three_state should be set as 'up' and 'false'. $( '#jsEmployees' ).jstree({ 'checkbox' : { keep_selected_style: false , three_state: false , cascade: 'up' }, 'core' : { 'themes' : { 'icons' : false } }, 'plugins' : [ "defaults" , "checkbox" ], 'expand_selected_onload'

Good day all! Here's a snippet to collapse or exand a jstree node programmatically on page load based on the node id. The code below will collapse if node id is '45' while other nodes remain open. $( '#TreeRoles' ).bind( 'ready.jstree' , function (e, data) { var $tree = $( this ); $($tree.jstree().get_json($tree, { flat: true })).each( function (index, value) { var node = $tree.jstree().get_node( this .id); if (node.id === "45" ) { $tree.jstree().close_node({ "id" : node.id }); } else { $tree.jstree().open_node({ "id" : node.id }); } }); });

Hello, I'm currently working on a JavaScript Library jsTree that mimics the behavior and UI of a TreeView control in .NET. One of the issue that's bothering me was to disable the cascade down selection of jsTree Child Nodes On page load if a parent node is selected. The solution is to set the three_state attribute to false and cascade to empty or 'up as presented in the code below. $( '#TreeRoles' ).jstree({ 'checkbox' : { keep_selected_style: false , three_state: false , cascade: 'up' }, 'plugins' : [ "defaults" , "checkbox" ] });