treetable grouping

Webix JS
1

Hi, I’m trying to figure out a few things with a treetable.
Here is a simplified example of what I’m trying to do:

Given a dataset as follows:

[  
   {round:1, bidder:'A', bid:100},   
   {round:1, bidder:'B', bid:110},  
   {round:1, bidder:'C', bid:120},    
   {round:2, bidder:'A', bid:200},  
   {round:2, bidder:'B', bid:300},    
   {round:3, bidder:'A', bid:310}   
]

I’d like to be able to create a table with the headers: “bidder”, and “bid”
with the rows grouped by ‘round’.

e.g.:

Bidder  |  Bid   
Round 1   
   A       |  100   
   B       |  110   
   C       |  120   
Round 2   
   A       | 200   
   B       | 300    
Round 3    
   A       | 310

In other words, the column which is used for the grouping (‘round’) changes from a column to a whole row.

I’m almost there, using a treetable, but it can’t get the ‘round’ column to work properly.

Thanks

2

This is pretty close to what I want:
http://docs.webix.com/datatable__rowspans_colspans.html

So, the question really is whether the datatable can do this automatically or whether I have to manually figure out the spans parameters whenever the data changes, and somehow set that on the grid.

3

If I can’t get rid of the ‘round’ column, I’m ok with showing the data just for the parent node, and leaving the children cells in the round column blank.

The following column definition almost works:

{
id : “round”,
header : “Round”,
template:“Round #value#”
}

The parent cells show: ‘Round 1’ etc.
However the child cells show: ‘Round undefined’

If I could get the child cells to be blank then that would work fine for me.

So, I’m guessing I need to create a template function which knows if the current row is a parent or a child ??

4

Solved: the following works perfectly for me:

{
id : “round”,
header : “Round”,
template : function (obj, common) {
return (obj.$level == 1) ? 'Round ’ + obj.value : ‘’
}
},

5

I’m wondering if it’s possible, in a template, to set the colspan for that row?.

So, for example, if I know that this row $level == 1, then I could set the colspan in the template.

If this feature doesn’t exist then it would be a way to set the colspan without modifying the data array.

6

I tried this: but got a table with no rows at all:

        {   
           id       : "round",    
           header   : "Round",    
           template : function (obj, common) {      
                 if (obj.$level == 1){    
                       $('table').addSpan([obj.id], 'round', 4, 1)    
                       return 'id:' + obj.id    
                  }     
                  else {    
                     return ' '    
                  }     
         },
7

Absent being able to configure a column spanning row in the component, it seems that it can only be done on the data, is that correct?

If so, it seems that there are 2 possibilities:

a) before passing the data to table.parse([rows]), by reshaping the data like this:

   var data = [  
        data : [],  
        spans: []   
   ]

b) After the table has grouped the data, using table.addSpan() .
I’ve noticed that the id of the group row changes, e.g to: id: 0$1, so, I’m wondering if it’s possible to go through the data, after the table has grouped the data, looking for ids that start: 0$, and then using addSpan() with those id’s ?

David

8

Check the next sample

http://webix.com/snippet/900838f9

Grouping in treetable has a special “row” property, which can be used to span all cells in a single row.

9

Thanks, nice - I think that will work for me.

10

Maxim, table.openAll() doesn’t work with your suggestion - I actually don’t want the table collapsed, I need it open.

so with this: I get table.openAll(), but no row span:

     scheme  : {    
          $group : "round"    
     },

and with this: I get row span but no table.openAll():

   ready:function(){   
       this.group({by:"round", row:"round"});   
   },

Is there a way to add ‘row’ to ‘scheme’
Is there documentation for scheme ?

Thanks
David

11

I got it working, I found this in the forum:

            scheme  : {  
                $group : {  
                    by: "round",   
                    row: 'round'   
                }   
            },

Still would be nice to see full documentation for ‘scheme’.

David

12

Here is the complete script which works for me.

Problem:

You want a table grouped by an attribute (e.g: ‘round’), and you want that grouping attribute to be shown as a row spanning all the columns, instead of a column.

Solution:

  1. Set view: ‘treetable’.

  2. Set the scheme property to configure the grouping attribute, and the column in the spanning row to place it in, see below under $group.

  3. For that column, provide a template which will show data depending on whether it’s the group row, or a non-grouping row.

  4. If you want that column to show no data when it is not in a grouping row, then a) set it’s width small, b) set its header to: ‘’, and c) return ‘’ from that template:

  5. If you want the table to be open all the time, set table.openAll()

        webix.ui({
         view:"treetable", 
         scheme  : {
             $group : {
                 by  : "round",
                 row : 'round'
             }
         },
        columns:[
             { 
                      id:"round",	
                      header:"",	
                      width:10,
                      template: function(obj, common){
                           return (obj.$group) ? 'Round: ' + obj.value : ''
                  }
            },
            { id:"bidder" }, 
            { id:"bid" }
      ],
  );
13

Hi, here are the documentation articles on both topics:

14

Thanks Helga,
Dave