homfen / datatables.treegrid.js Goto Github PK

Can we expose some events so that we can do some manipulation when item is shown or hidden? Thanks.

After expand row in dataTable mark as selected more then one row

Source row 117 is :
select && (selectedIndexes = dataTable.rows({selected: true}).indexes().toArray());

Check for variable:
dataTable.rows({selected: true}).indexes().toArray();
Console: (2) [0, 1]

dataTable.rows(".selected").indexes().toArray();
Console: [1]

It is not obvious how to use this plugin. Can you please make documentation more detailed? How to make items children? How to create tree-levels?

click on the td of the second level does not obey the collapsed and expanded (red circle), in the second level, clicking on td only to create append of the children.

Hello,

is there a function/property for collapse all childs into the datatable?
Thank you

Best regards, Luca

Sorting in the demo shows a rows children sometimes above it when sorting.

Can we have an option to use a different word other than children? Sometimes we don't have complete control of the data so we can't name the child dataset 'children'. Having an option to name it something else would help. Thanks.

1. for child rows not called callback function of dataTable "fnRowCallback"

2. after expand parent row attribute "id" changed to id="tr-1549374473989"

3. for file version 1.0.1 not fixed TreeGrid.version = '1.0.0';

The built-in search function only filters through what is visible, so if a tree is collapsed the items in it won't be found.

Pull request

But this pull request can't use under dataTables-1.10.19.

Bugs:
#23
#18
#12
#9
#3

Does it possible to make it expand all by default?
Thanks

Hi,

I use datatables with ajax and server side, but when I click on expand, I get an error

Uncaught TypeError: Cannot read property 'children' of undefined

When datatable treegrid have more than 2 levels and trying to collapse parent
sometimes not all nodes under the parent are collapsed.
see http://jsfiddle.net/xwjga044/13/ on node that it's spid is 7

Hi,

Can you add an installation via bower, it will be great.

Best regards.

Hi,
I am trying to reproduce the example that you given.
I have this code :
`

<script type="text/javascript" src='{{ asset('js/DataTables/media/js/jquery.js') }}'></script>

<script type="text/javascript" src='{{ asset('js/DataTables/media/js/jquery.dataTables.min.js') }}'></script>

<script type="text/javascript" src='{{ asset('js/dataTables.treeGrid/dataTables.treeGrid.js') }}'></script>

<script>
    var columns = [
        {
            title: '',
            target: 0,
            className: 'treegrid-control',
            data: function (item) {
                if (item.children) {
                    return '<span>+</span>';
                }
                return '';
            }
        },
        {
            title: 'Name',
            target: 1,
            data: function (item) {
                return item.name;
            }
        },
        {
            title: 'Position',
            target: 2,
            data: function (item) {
                return item.position;
            }
        },
        {
            title: 'Office',
            target: 3,
            data: function (item) {
                return item.office;
            }
        },
        {
            title: 'Extn.',
            target: 4,
            data: function (item) {
                return item.extn;
            }
        },
        {
            title: 'Start date',
            target: 5,
            data: function (item) {
                return item.start;
            }
        },
        {
            title: 'Salary',
            target: 6,
            data: function (item) {
                return item.salary;
            }
        }
    ];

    $('#example').DataTable({
        'columns': columns,
        'ajax': "{{ asset('js/arrays.json') }}",
        'treeGrid': {
            'left': 10,
            'expandIcon': '<span>+</span>',
            'collapseIcon': '<span>-</span>'
        }
    });
</script>

`

And my file arrays.json contains is ine the same format of your example.

So in my dispplay I have that :

My problem is, when I click on "+" or "-" I have this message in my console :

" [Afficher/Masquer les détails du message.] TypeError: data is undefined[En savoir plus] dataTables.treeGrid.js:140:1
fnConstruct/<
http://localhost/gestion_MKT/web/js/dataTables.treeGrid/dataTables.treeGrid.js:140:1
dispatch
http://localhost/gestion_MKT/web/js/DataTables/media/js/jquery.js:3:12392
add/r.handle
http://localhost/gestion_MKT/web/js/DataTables/media/js/jquery.js:3:9156
"

I hope you cna help me to understand why it doesn't work.

Thank you.

In your example, your parent data matches up with child data in terms of the title. How would one go about having a different dataset as the child? Something that looks like this:

Nation
+ France
+ Germany
+ United States
            States        Population
            Alabama       1000000
            Alaska        1000000

Would be nice even without the header, just display the data or the header could be on top next to "Nation"

How to get this to work with server side data? I have table that may go about 1000 parents and 5000 rows in all. I don't want to load full data set into DT during initialization.

Not work on last datatables & bootstrap3 extention

When opening the children in the data-table tree-grid - the cells' content move according to the indent but the columns headers don't move.
see http://jsfiddle.net/xwjga044/13/ example.
Do you have any idea about this issue?

Hi,

I use datatables with ajax and server side, Can I get children data by ajax when I click on expand ?
thanks.

Hi,

When there are 3 levels, and you collapsed the level n-1, the n+1 items are not deleted ...

Can you help me ?

Regards
Frédérik

{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011/04/25",
"salary": "$320,800",
"children": [
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008/11/13",
"salary": "$183,000"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009/02/27",
"salary": "$103,500",
"children": [
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008/11/13",
"salary": "$183,000"
},
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010/07/14",
"salary": "$86,500",
"children":[
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008/11/13",
"salary": "$183,000",
"children":[
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008/11/13",
"salary": "$183,000"
}

                        		]
               				 }
	                       
                	]
                    }
                    
                ]
            }
        ]
    }
]

}

rows do not expand as plus/minus buttons are clicked.
I traced the code on browser debugger and I was able to fix it as below:
// Expand TreeGrid
dataTable.on('click', 'td.treegrid-control', function (e) {
if (!$(this).html()) {
return;
}
var tr = $(this).closest('tr[role="row"]');

        // record selected indexes
        var selectedIndexes = [];
        select && (selectedIndexes = dataTable.rows({selected:true}).indexes().toArray());
        var tr = $(this).closest('tr[role="row"]'); //ADD THIS LINE
        var row = dataTable.row(tr); //CHANGE THIS LINE FROM var row = dataTable.row(this); //"this" selects the cell, not the row!!!
        var index = row.index();
        var data = row.data();

Hi,

First of all, TreeGrid is a POWERFUL datatable plugin with a simple approach (children)
There is however a small lack for me. When a column is sorted, the column of the child branch is not sorted.
If that had been possible, it would be great !

Best
Frédérik

deferRender: false
延迟渲染可以提高Datatables的加载速度,延迟渲染，对treeGrid有影响，所以置于false。
点击+，不会扩展子集。

Can you unregister eventHandlers on dataTables destroy?

this is your example