maxazan/jquery-treegrid

TreeGrid plugin for jQuery

jquery-treegrid's Issues

Uncaught RangeError: Maximum call stack size exceeded

I have this error on my Tree
Uncaught RangeError: Maximum call stack size exceeded

$(document).ready(function () { $('.table').treegrid({ initialState: 'collapsed', expanderExpandedClass: 'glyphicon glyphicon-minus', expanderCollapsedClass: 'glyphicon glyphicon-plus' }); });

saveState not working

Hey,

First of all, thanks for the plugin. It helped me so much ;)

When I activate the saveState, the tree-structure disappears, and I have the full table without tree-structure.
I have tried this multiple ways:

• adding in the 'init-code' ($('.tree').treegrid({'saveState': true,});
• adding in the plugin itself (jquery.treegrid.js line 560)

What's going wrong? :s

Greetzz

Id field can only be integer type?

Just like the display in the example, My data's Id is not an integer ,but a string like '1-1','1-2','1-2-1', I render the table ,but it seems it doesn't work.

Still maintenance or not?

I would like to use the plugin.
It still maintenance or not?

Not compatible with Bootstrap 3.1?

I followed this example: http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html

But it seems to be a bug hidding the icons on the first load. A capture: http://i.imgur.com/Ba52qyT.png

After clicking the icon appears: http://i.imgur.com/Lz8JJTk.png

Any idea how to solve it?

Thx

Angular support

Hi maxazan,
I'm currently trying to use your tool with angular 2, using ng-repeat to populate the grid. I've run into some issues with it. Do you support, or plan to support, angular?
Thanks!

Whether Editable Grid Feature is available

   Whether Editable Grid Feature is available in jquery-treegrid . if available plz let me know how to use it.

How do I implement savestate and a expand/collapse all button?

Hi there - thanks for this treegrid! As a JS beginner I have a few basic issues with adapting the tree to my needs.
Firstly, I like to know how I can trigger $('#tree').treegrid('expandAll'); with a button or a checkbox for example. Can somebody help?
Secondly, savestate is not working if applied as shown in the savestate example. initialState works however, but if I insert the savestate : true line, all the node arrows disappear, so there must be some issue here.
Thanks for help! Frank

how to identify onCollapse completed event?

Hi All,
I'm having a large set of data almost 2000 rows in table. I want to display progress bar or i need to do pagination while collapsing the row and once it is completed i want to disable the progressbar.
Is there any way to handle this method like completed or success event exists?

$('.tree').on("change", function() {complete: function () {}});

Is there any way kindly update.

Expanded node has a highlight behind the text

First, this is a great control. Thank you.

I've noticed that when I collapse and expand a node, there is a selected text highlight behind the node text. It looks like a colored block behind the text block.

I fixed it with this style:

.tree td {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Not sure if/how you want to include this in the styling.

unable to see expend icons

Hi,

I have downloaded the jquery-treegrid. but i am unable to get the expand or collapse, the table is displaying as simple table. Even the examples are also displaying as normal table.

In example 1 you have mentioned to add jquery.js , which file is this. This file is not included in tar.

Column hiding based on device size?

Hello all
I need option where it is possible to define which column(s) are always visible and which are hidden based on device size.
For example, on desktop displayed are all 5 columns
on iPad (portrait) displayed are 3 columns and on phone displayed is only one column, something like it works here:
https://github.com/filamentgroup/tablesaw

I want to pay if someone can add that feature (wanted to write directly to maxazan but can not find any email address?
Than you.

The method "isLast" still has some bug

If a node has a childNode,then its next node's parentNode is itself. So use the method "isLast" on this node will return ture.

unusably slow on large sets

In chrome and firefox tested.
With 100 rows of reasonably nested lists, this completely fails to init, don't even try it on anything larger as it freezes.

Some optimization needed here for this to be practical,
There is something wrong with init is seems.

:( was promising

Table in table issue

First, GOOD job!

pardon me for my poor english！

Extend or collapse raise ERROR:"...null" on browser console when I put the grid（table） in a table.

my way to fix:
at line 54: change "$($(this).parents('tr')).treegrid('toggle');" to "$($(this).closest('tr')).treegrid('toggle');"
at line 541: change "return $(this).parents('table');" to "return $(this).closest('table');"

VERSION: 0.1.8.

thinks!

Two enhancements proposals

-definable initial state of selected rows (collapsed/expanded)
-definition of behavior for too long lines (wrapping, indentation, trimming, etc.)

headboards levels of the tree

Dear, if I need to add headers to the levels of the tree. As I do so that the alignment and tabulation are equal to the contents of the table.
You add the thead but levels of the tree has its own tab, try to adjust it with css and do not take them, greetings!

Add possible to pass another value to initialState param

In my feature I need to instance the treegrid and keep the current state.
But currently, when I add one more row and apply the treegrid, the another rows are open or close.

I think in accept another value like "keep" or simply false. Currently is only ("expanded" and "collapsed").

Working AJax

there is some function to work with AJAX, every time you load the ajax actulice the tree?

on 'render' events

I think that it would be useful adding two events:

• the first would be 'onRendering' , which fires when the the grid is processing the data to render;
• the second would be 'onRendered' , which fires when as soon as the grid is rendered.

Thanks

Ability to specify glyph for items without children

We currently have the ability specify glyphs for items with children that are expanded or collapsed, but not glyphs for items that have no children.

This is helpful to provide a default icon for items with no children.

Nested treegrid

I'm trying make nested treegrids but get error: Uncaught TypeError: Cannot read property 'getChildNodes' of undefined

Code:

<table class="tree">
            <tr class="treegrid-1">
                <td>ID</td>
                <td>Client</td>
                <td>Date</td>
                <td>Status</td>
            </tr>
            <tr class="treegrid-2 treegrid-parent-1">
                <td colspan="7">
                    <table class="tree table table-bordered">
                        <tr class="treegrid-6">
                           <td>Test</td>
                        </tr>
                        <tr class="treegrid-11 treegrid-parent-6">
                            <td>Test2</td>
                        </tr>
                    </table>
                </td>
            </tr>
</table>

Added expand to title of treenode as well as chevron

This altered version of the initExpander code will add the expand action to the title of each treenode:
( makes it much easier to use, don't know how to add this to code, sorry )
initExpander: function() {
var $this = $(this);
var cell = $this.find('td').get($this.treegrid('getSetting', 'treeColumn'));
var tpl = $this.treegrid('getSetting', 'expanderTemplate');
var expander = $this.treegrid('getSetting', 'getExpander').apply(this);
if (expander) {
expander.remove();
}
$(tpl).prependTo(cell).click(function() {
$($(this).closest('tr')).treegrid('toggle');
});
// %%%%%%%%%% added these lines %%%%%%%%%%%%%%%
$(cell).find(".title").click(function () {
$($(this).closest('tr')).treegrid('toggle');
});
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
return $this;
},

Line helpers

Hello, is there option for something like these line helpers: http://powerconsulting.co/Samples/Tabelizer

It would be very nice. :)

Turn off Table Stripe

For a table with "table-striped", is it possible to turn off the table stripe for each child and its children row? Only allow stripes for the 1st level parent rows.

Not work if many data

Hi.
Level 1 - 4 rows
Level 2 - 226 rows
Level 3 - 5 rows

this configuration not work. Javascript is down.

New appended child is out of order

In the example below, if I had a button that added a new child for treegrid-1, it would show up in the table at the bottom. It isn't hard in jquery to make the the new child show up after the last tr with the class of treegrid-parent-1, but if that last child has children as well, the new treegrid-1 child shows up in the table before the children of the last child. In general I'm just having trouble adding children and having them show up in the correct order. Any help would be awesome!

Node 1Additional info Node 1-1Additional info Node 2Additional info Node 2-1Additional info

add to bower repo

pls add this project to bower

Is there a way to show the tree in collapsed form instead of expended form?

I wonder if we can set some parameters so that tree can be shown as collapsed form by default. When the user clicks on the icon or node, the tree nodes will be expended. Thanks!

load data by json

Is it possible to load data using url?

Create new nodes in runtime

It's possible to add new nodes to the grid and make the expand/collapse work?
I can't figure it out how.

Thaks.

Issue with saveState

Hi,

I am using django and supervisor/nginx to run my webserver. I have js-cookies in my static files (as well as a number of other items that are loaded without issue). For whatever reason, I cannot get saveState to cooperate. I am basically hanging on a blank load screen when I try to refresh the browser with saveState in the code block. If I remove saveState, everything works great.

Apologies if this isn't detailed enough, more of a weekend warrior with web dev.

Looking in DEBUG, I also see this:
[12/Sep/2017 20:53:38] "GET /static/js-cookie/src/js.cookie.js HTTP/1.1" 304 0

Here is my code block loading this in:

<html lang="en">
  <head>
    <title> Temp </title>
    {% load staticfiles %}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
    <meta http-equiv="refresh" content="300">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{% static '/jquery-treegrid/css/jquery.treegrid.css' %}">
    <script type="text/javascript" src="{% static '/jquery-treegrid/js/jquery.treegrid.js' %}"></script>
    <script type="text/javascript" src="{% static '/js-cookie/src/js.cookie.js' %}"></script>
    <script type="text/javascript" src="{% static '/jquery-treegrid/js/jquery.treegrid.bootstrap3.js' %}"></script>

    <style type="text/css">
      .hidden {display:none;}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("CurrentLink").href = window.location.toString();
        }
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.tree').treegrid();
        $('.tree-2').treegrid({
            'initialState': 'collapsed',
            expanderExpandedClass: 'glyphicon glyphicon-minus',
            expanderCollapsedClass: 'glyphicon glyphicon-plus'
        });
    });

Ability to click not only the glyph but the whole word to expand the tree

It's hard to target the glyph in small devices (small screen). Is there any way to be clickable all the word to expand the subtrees?.

Tnx
Chris

Can I Use Chexkbox In This Table

Hello , I'm is China people,not good in English,
Thanks for you . you tools is so great
but wo don't know how to add checkbox in the tools.
do you have checkbox extend. thanks very much

Big data example

The Big data example takes to long to. Chrome and Firefox showing "to long working javascript" errors.

Any ideas how to speed this up? I need 1000+ rows in the android chrome.

make $('.noSelect').disableTextSelect() for row

Angular2

How do I use the plugin with Angular2 ?

Setting to prevent expansion/collapse of items

It would be helpful to provide a setting that disallows the expansion or collapse of items. That is, the entire tree is expanded by default, and users cannot collapse trees/subtrees.

Arrange elements at client side by treegrid based on parent id

Hi

Following is the output i get from my query

$array = array (0 => array ( 'id' => '1', 'parent' => '0','name'='aaaa' ),
1 => array ( 'id' => '2', 'parent' => '1','name'='mmmmm' ),
2 => array ( 'id' => '3', 'parent' => '0','name'='uuuu' ),
3 => array ( 'id' => '5', 'parent' => '0','name'='www' ),
4 => array ( 'id' => '17', 'parent' => '3','name'='bbbb' ),
5 => array ( 'id' => '31', 'parent' => '2','name'='ttttt' ),
6 => array ( 'id' => '32', 'parent' => '2','name'='kkkk')
7 => array ( 'id' => '97', 'parent' => '31','name'='pppp' ),);

If i created a table by looping trough this i will get the tree but the position of parent and child are not correct. The rows are not rearranged according to its parent id. Is it possible to rearrange them by this plugin to get the tree correctly.

Does this support json data?

Hi
I want to provide data in form of json, does this lib suppor that?

Thanks for your work!

Taking too much time just for 1530 nodes

Hi
I don't know if this is a known issue, but it is taking almost 1 minute to load the table grid for just 1530 nodes. Please let me know if there is any work around for this or this issue is in queue to be fixed.

Thanks

Sorting of grid

Is there any option to sort by drag&drop

Edit Row using Jquery Functionality

when Row Click i took values and passed them to popup. and after changing the values in it. i wanted it to store it back to grid, but when i closed the popup grid got refreshed and again same default values appeared.

if this is not clear let me know about this.

npm and Webpack

Hi there,

I'm trying to use this plugin with webpack using the version published on npm, but, I've noticed that the package.json's main point to a non existing index.js. It's also not working on tonic
It's possible to have an update to the package.json and relative update to npm?

Thanks

Initial loading for treegrid is not working

<script type="text/javascript"> $(document).ready(function() { $('.tree').treegrid(); }); </script>

says Object doesn't support this property or method at line " $('.tree').treegrid();"

When specific parent node is removed please remove it's child elements too

when specific parent node is removed please remove it's child elements too

Add headers to the treegrid

This is some cool stuff however it would be nice if the columns could have headers.

add animation ability

opening/collabsing big tree contents might irritate the user
How about adding an open/close animation where the speed can be configured by developer as well as on/off?

There's a problem about the method 'isLast';

$('.tree').find('tr').each(function(){
if ($(this).treegrid('isLast')){
$(this).find('.treegrid-expander').css("background","red");
}
});
Here's my code;
And this is the error from firebug
TypeError: $(...).treegrid(...) is undefined

set level of expansion?

Is it somehow possible to set level of expansion?